draw() does not refresh DataTable - what I have to see in my code?

rentech

I have dynamic webpage with DataTable and source from DB. There is a modal window opened (and created dynamically) after key pressed on this page. Then I am adding a record from this modal window form into the DB, call draw() and close (destroy) this modal window. I saw the message "waiting" appeared and nothing else on my webpage with DataTable. So API call draw() does not refresh the DataTable.

DataTables 1.10.12, JQuery 2.2.3, Chrome 50.0.2661.102.

Code called after pressing the key "Save" on modal window:

function request_insert () {
....
    $.ajax ({
        method: "GET",
        url:  "/cgi-bin/insert.php",
        data: {
            e: "request",
            place: place,
            addr: addr,
            service: srvc,
            qnt: qnt,
            msr: msr,
            dt_start: dt_start,
            dt_finish: dt_finish
        }
    });

    var dt = $('#request_pool').DataTable();
    dt.draw(false);

    $('#new_request').remove();
    $('#mask').remove();
}

where #new_request is the modal window,
and #request_pool - DataTable on underlying window with dynamic content.

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

We'd really need a link to a page showing the issue to be able to debug it (as required in the forum rules). Is it an Ajax sourced table? If so use ajax.reload(). Also I would suggest you wait until the Ajax request is completed before reloading / redrawing the table. Otherwise that will happen before the insert is completed.

Allan

rentech

Thanks. I tried to call

dt.ajax.reload();

but the problem remains the same.

This the function that creates the webpage with DataTable

function create_table (ti, cap, columns) {
    var t = $('<table id="' + ti + '" class="display table table-bordered" width="100%"><caption>' + cap + '</caption><thead></thead></table>');
    var h = '<tr id="thi">';
    var sql = "select";

    $.each (columns, function (key, value) {
//      t.children ('#thi').add ($('<th id="' + key + '">' + value + '</th>'));
        sql = sql + key.replace (/t_/, ", ");
        h = h + '<th id="' + key + '">' + value + '</th>';
    });
    sql = sql.replace (/select,/, "select");
    h = h + '</tr>';
    t.children ('thead').append (h);

    $('.content').append (t);

    $('#' + ti).DataTable ({
        "ajax": {
            data: { db_table: ti, sql: sql },
            url: "/cgi-bin/select_datatable.php"
        },
        "info": false,
        "language": {
            url: "../locale/datatable.json"
        },
        "paging": false,
        "processing": true,
        "searching": false,
        "serverSide": true
    });

    $('#' + ti).on ('click', 'td', function () {
        if ($(this).hasClass ('selected')) {
            $(this).parent().removeClass ('selected');
        }
        else {
            $(this).parent().addClass('selected');
        }
    });

    return t;
}

I am sorry that I can not post a link to my website currently because of it is internal (not in Internet). Internet access to this website is being planned in future.

rentech

I solved this problem. It was in "draw" counter that was constant. I corrected it and datatable began to refresh.

allan

Good to hear - thanks for posting back.

Allan