Fill the fields of lightbox's form with json data - php

Question

I have a form that loads into a lightbox panel and a json response from a php script.
So im trying to load the data from json in the fields of form but nothing happens. Neither an error nor a result.
Here is some code:
Form:
<form id="FORM" name="newUserForm">
<br>
<label for="username" style="padding-right:35px;">Username: </label>
<input type="text" name="username" id="username" value="" style="margin-right:35px;">
<label for="email" style="padding-right:35px;">Email: </label>
<input type="text" id = "email" name="email" value="" ><br><br>
<label for="password" style="padding-right:40px;">Password: </label>
<input type="password" id="password" name="password"><br><br>
<label for="repeatpassword">Repeat Password: </label>
<input type="password" name="repeatPassword" style="margin-right:35px;">
<label for="submitBt" id="submitEditUser" style="background-color:black;color:white;font-weight:bold;padding:4px 4px 4px 4px;">Submit</label>
</form>
Javascript:
var user = user_id;
jQuery.ajax({
type: "POST",
async : false,
url: "/op/controller.php",
data: { method: "editUser", user_id: user },
contentType : ('application/x-www-form-urlencoded'),
dataType : "json" ,
success : function(json){
$('#lightbox-background').fadeIn(300);
$('#lightbox-panel').fadeIn(300).load('forms/editUserForm.php');
$('#username').val = json.username;
}
});
I have also tried with getElementById and populate but nothing happened.
Is there any idea why this problem exists? Maybe its because of the lightbox?
In addition i want to say that the html form exists in to the forms/editUserForm.php file.
Thanks.

Answer 1

You need to put the last command in the callback of load() and also the new value of #username must be passed as argument in val() like this
var user = user_id;
jQuery.ajax({
type: "POST",
async : false,
url: "/op/controller.php",
data: { method: "editUser", user_id: user },
contentType : ('application/x-www-form-urlencoded'),
dataType : "json" ,
success : function(json){
$('#lightbox-background').fadeIn(300);
$('#lightbox-panel').fadeIn(300).load('forms/editUserForm.php', function(){
$('#username').val(json.username);
});
}
});