Loading detail from database with ajax

Question

I'm trying something very simple yet can't make it work and I have no idea why. I'm trying to load details on bootstrap modal windows from database so I can edit them. My button looks like

<button onclick="GetUserDetails('.$row['row_id'].')" class="btn btn-warning">Update</button>

Then this is the php part which should load the data

include("../../misc/database.inc.php");


error_reporting(E_ALL); 
ini_set('display_errors', 1);
$pdo = Database::connect();
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

if(isset($_POST['row_id']) && isset($_POST['row_id']) != "") {

    $row_id = $_POST['row_id'];                 
    $value = $pdo->prepare('SELECT row_id, row_content, row_email FROM excel_table WHERE row_id =  ?'); 
    $value->bindParam(1, $id, PDO::PARAM_INT);
    $value->execute();

    $response = array();

    if($value->rowCount() > 0){
         while ($rs = $value->fetch(PDO::FETCH_ASSOC)) {
             $response = $row;

         }                  
    }
    else
    {
        $response['status'] = 200;
        $response['message'] = "Data not found!";
    }   
    echo json_encode($response);
    //var_dump($_POST['row_id']); // return correct id
}

On the console->Network I see correct response

{"row_id":"1","row_content":"asd","row_email":"sad"}

Here is js part which should load data

function GetUserDetails(row_id) {

    $("#row_id").val(row_id);
    $.post("ajax/readUserDetails.php", {
            row_id: row_id
        },
        function (data, status) {
            // PARSE json data
            var excel_table = JSON.parse(data);
            // Assing existing values to the modal popup fields
            $("#row_content").val(excel_table.row_content);
            $("#row_email").val(excel_table.row_email);
        }
    );
    // Open modal popup
    $("#update_user_modal").modal("show");
}

And this is my modal

<div class="modal fade" id="update_user_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Update</h4>
            </div>
            <div class="modal-body">

                <div class="form-group">
                    <label for="row_content">Desc</label>
                    <input type="text" id="row_content" placeholder="Описание" class="form-control"/>
                </div>

                <div class="form-group">
                    <label for="row_email">Email</label>
                    <input type="text" id="row_email" placeholder="Email" class="form-control"/>
                </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" onclick="UpdateUserDetails()" >Save Changes</button>
                <input type="hidden" id="row_id">
            </div>
        </div>
    </div>
</div>

Can anyone tell me why modal isn't populated with data?

Yes, on button submit row_id:1 and response {"row_id":"1","row_content":"asd","row_email":"sad"} — Jason Paddle
– Jason Paddle, Commented Nov 17, 2016 at 14:55
I've tried what I know. So far to see what I sent and receive on button click. What else I can debug? — Jason Paddle
– Jason Paddle, Commented Nov 17, 2016 at 14:56
I mean do you know where is the problem? We cant debug the code for you. you ask why modal isn't populated with data?, then you check where you populate your data. — Juan Carlos Oropeza
– Juan Carlos Oropeza, Commented Nov 17, 2016 at 14:58
I believe the problem is in js part because the query is fine and no errors. Meaning next step is to be parsed from js to modal. — Jason Paddle
– Jason Paddle, Commented Nov 17, 2016 at 15:00

Juan Carlos Oropeza · Accepted Answer · 2016-11-17 15:09:45Z

2

well my guess is you need to show the modal after the ajax asynchronous call end.

function GetUserDetails(row_id) {

    $("#row_id").val(row_id);
    $.post("ajax/readUserDetails.php", {
            row_id: row_id
        },
        function (data, status) {
            // PARSE json data
            var excel_table = JSON.parse(data);
            // Assing existing values to the modal popup fields

            //add console.log to make sure you have some value
            console.log('row_content: ' + excel_table.row_content);

            $("#row_content").val(excel_table.row_content);
            $("#row_email").val(excel_table.row_email);

            // then add another to make sure you update it correctly.
            console.log('#row_content: ' + $("#row_content").val());

           // Open modal popup AFTER YOU UPDATE 
           $("#update_user_modal").modal("show");
        }
    );     
}