Loading detail from database with ajax - php

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">×</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?

Answer 1

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");
}
);
}