How to save checkbox state with ajax requests

steveinator

I am having an issue saving checkbox state across ajax requests. I have 1 column that contains checkboxes. Data in the other columns updates constantly through ajax calls. I can save the state of the checkbox in a js variable and have it persist when I update the tables, but I have found that there is always a couple milliseconds right when I call the draw() method in which the user cannot use the select box. In these milliseconds, if a user clicks a checkbox nothing happens. It seems that the user action gets overridden by the redraw. I have tried using .invalidate on the cells that had changing data. I have tried redrawing the whole table. I have tried using the row select that is built in to datatables. All have the same problem. EXE:

//do stuff...           //    --
rows[] = table.rows()   //      |
cell = rows[0]["city"]; //      | -- User can click checkbox and it will remain checked through redraw
cell = "New York";      //      |
cell.invalidate();      //    --
cell.draw();            //    -- If user clicks checkbox nothing happens
//do other stuff...     //    -- User can click checkbox and it remains checked

Is there a way to have the invoke draw without having a gap in the clickability of the checkboxes? It seems that normally you would invoke draw in response to a user's action, so this would not be an issue, but in the specific case of invoking draw in response to an ajax response, it is entirely possible that a user will be clicking a checkbox exactly while the table data is being refreshed.

steveinator

I created a jsfiddle demonstrating the problem. I have 1 cell updating every 100 milliseconds. You will notice that all rows are now nearly unselectable. If you keep clicking a row it will only sometimes become selected.

https://jsfiddle.net/steveinator/p37200s4/1/

The relevant code is as follows:

//async modify data
   setInterval(function(){
     var row  = table.row(0);
     var rowdata = row.data();
     console.log(rowdata);
     rowdata[4] = Math.random();
     row.data(rowdata);
     row.invalidate();
     row.draw();
   }, 100)