I have a function which returns html code based on pulled json data from the controller. I am trying to append the jquery ajax call result to a div after completing the ajax operation.
The problem is there are 100 records in json and pulling them take little time. Data is not binding to the div. But when I add an alert it shows the data. I think the background time to display alert and clicking on ok is setting the ajax resulted data. Do we have any good option to bind data or to bind data only after data is completely loaded? I tried with complete function but it didnt work.
function queryOrdersExtraRow() {
var Details;
$.ajax({
url: "../MoreDetails/GetJsonDetails",
type: 'Get',
dataType: 'json',
data:{Id:138},
cache: false,
contentType: 'application/json',
success: function (result) {
Details = '<table class="extra">' +
'<tr><th>Name#</th><td>' + result.name + '</td></tr>' +
'<tr><th>Address Type</th><td>' + result.address + '</td></tr>'+
'<tr><th>Phone:</th><td>' + result.phone + '</td></tr>' +
'</table>';
return Details;
},
error: function (error, textStatus, errorThrown) {
reportFriendlyAjaxError(error, textStatus, errorThrown);
},
complete: function () {
}
});
//alert(Details);
return Details;
//Bind data here }