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,    
));

mainguy · Accepted Answer · 2014-05-10 13:03:48Z

2

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.

answered May 10, 2014 at 13:03

mainguy

8,3312 gold badges34 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

morissette Over a year ago

Your a genius: var typing = $(".user_list:focus").val(); if ( ! typing ) { mainTable.ajax.reload(null, false); }

Collectives™ on Stack Overflow

Using ajax.reload() in dataTables saving input text

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related