Using ajax.reload() in dataTables saving input text

Question

I'm working on converting code from dataTables 1.9 to 1.10 as well as using a ajaxSource instead of a prepopulated table.

The issue I have is that my table rows have a input field and when populating the new source I lose the data written in the input field. I have tried many workarounds but can't seem to get something that is seamless.

Below you will find the PHP code generating the table data as well as the input box with class user_list. Since I update the table data every 30 seconds I am trying to pull the written text and place it back without the user knowing that the data updated.

I have tried accomplishing this using:

        setInterval(function() {
            var predata = $(".user_list:focus").val();
            var trid = $(".user_list:focus").closest('tr').attr('id');
            mainTable.ajax.reload(null, false);
            console.log(predata);
            console.log(trid);
            $("#" + trid + " .user_list").val(predata);
        }, 30000);

However the value of the input is never updated although when console.loging the id is correct. Please assist.

JS:

mainTable = $("#main_dash").DataTable({
    "language": {
        "url": "../locale/" + locale + "/LC_MESSAGES/" + "dt." + locale + ".txt",
    },
    "pagingType": "full_numbers",
    "pageLength": 10,
    "ajax": {
        "url": "ajax_tables/main_table.php",
        "type": "POST"
    },
    "columnDefs": [
        { "orderable": false, "targets": 0 }
    ],
    "columns": [
        {"data": "flagged"},
        {"data": "date"},
        {"data": "type"},
        {"data": "regarding"},
        {"data": "submitted_by"},
        {"data": "review"},
        {"data": "assign"},
    ],
    "autoWidth":false,
    "order": [[1, 'asc']],
    "deferRender": true,
    "initComplete": function() {
        setInterval(function() {
            mainTable.ajax.reload(null, false);
        }, 30000);
    },
});

PHP Code (main_table.php):

foreach ( $data as &$d ) {
    $d['DT_RowId'] = $d['groom_id'];
    $d['DT_RowClass'] = 'groom-color-' . $d['type_id'];
    $d['review'] = '<button class="button button-blue review_item">Review</button>';
    $d['assign'] = '<span class="groom_id hidden">' . $d['groom_id'] . '</span><input type="text" class="user_list">';
    if ( preg_match('/1969-12-31/', $d['date'] )) {
        $d['date'] = $d['date2'];
    }
    if ( $d['flagged'] ) {
        $d['flagged'] = '<img src="images/red_flag.gif">';
    } else {
        $d['flagged'] = null;
    }
}

echo json_encode(array(
    "draw" => 1,
    "recordsTotal" => $count,
    "recordsFiltered" => 1,
    "data" => $data,    
));

Answer 1

Add an onchange() handler to your input field and write the value with an ajax call to your db.

Then in the next reload the values should be there again.

Of course you should prevent auto-reload while the data is written and reload instead when the changed data was successfully saved to the db and then activate auto reload again. Could be done with a i am busy saving - don't auto-reload now flag.