Question

I had a long question along with my complete code but now it is shorter one.

  function showRecord(tbl) {
    myDataTable.fnDestroy();
    $.ajax(
    {
        data: "tableName=" + tbl,
        url: "showTable.php",
        dataType: "html",
        success: function (data) { $("#example").html(data); }
    });
    alert('I get desired output as long as I do not comment/remove this alert');
    myDataTable = $('#example').dataTable();
}

BUT if i just comment the alert I do not get data from database

If I do not use $('#example').dataTable(); (a jquery plugin for pagination from datatables.net ) then code works fine without alert.

function showRecord(tbl) {
    //myDataTable.fnDestroy();
    $.ajax(
    {
        data: "tableName=" + tbl,
        url: "showTable.php",
        dataType: "html",
        success: function (data) { $("#example").html(data); }
    });
  //alert('I get desired output as long as I do not comment/remove this alert');
  //myDataTable = $('#example').dataTable();
}

I need to know why alert is necessary in first sample of code. If it causes delay, why delay is necessary here and how to achieve this without using alert

Answer 1

Ajax calls are asynchronous. In the first block of code (if there is no alert) ajax call get executed and then immediately after that (before server responds) this line executes:

myDataTable = $('#example').dataTable();

and since server did not return result yet $('#example') is empty. You can put it it like this:

function showRecord(tbl) {
    myDataTable.fnDestroy();
    $.ajax(
    {
        data: "tableName=" + tbl,
        url: "showTable.php",
        dataType: "html",
        success: function (data) {
            $("#example").html(data);
            myDataTable = $('#example').dataTable();
        }
    });
}