stange issue with Select

lenamtl

Hi,

I'm using https://github.com/gyrocode/jquery-datatables-checkboxes
I have a strange issue...

If I select checkboxes and refresh the page
Resul the checkboxes get deselected = OK

If I select checkboxes and go to another the page then click back (using browser back button)
Result the checkboxes are still selected = Not OK

I have checked my localstorage and there are no localstorage value for the Selection...
So how come these are still selected ?
If I click Browser refresh button they are not selected ?

Here is my Datatables settings

"stateSave": true,
{
"targets": 1,
"visible": true,
"searchable": false,
"orderable": false,
"checkboxes": {
        "selectRow": true,
        "stateSave": false,
    }

},

"select": {
'style': 'multi',
'selector': 'td:nth-child(2)',
},

lenamtl

Hi,

I have fixed this way for now

JS
// refresh
if(performance.navigation.type == 2){
location.reload(true);
}

The 2 indicates the page was accessed by navigation into the history.

kthorngren

That problem doesn't happen on the Gyrocode StateSave example page:
https://www.gyrocode.com/projects/jquery-datatables-checkboxes/examples/basic/state-saving/

At least not with Chrome. Does the second table work for you?

Kevin

lenamtl

Hi,

His example is in an embed Iframe to display JSfiddle code, to reproduce we will need a real web page.

I have tested using Chrome and Opera, I have google about checkbox & back button, and this seem to happend often...

I suspect this is because the target use different column or maybe this is related to
'selector': 'td:nth-child(2)',

The values of the checkbox state are not saved in savestate.
But checkboxes are still checked when I come back on the page If click back button

kthorngren

I suspect this is because the target use different column or maybe this is related to
'selector': 'td:nth-child(2)',

Your code snippets seem to work here:
http://live.datatables.net/doyukiku/1/edit

Do the examples I asked about work correctly with your browser?

Are you using any of these options?
stateLoadCallback
stateLoadParams
stateLoaded
stateSaveCallback
stateSaveParams

Kevin

lenamtl

Yes the example work ok but it is different from mine and is embed from jsfiddle into an iframe .

I may be wrong but I don't think we cannot replicate the case on a fiddle / bin because it is not a normal web page.

Yes I use stateSaveCallback, stateLoadCallback

If I select checkboxes and refesh the page manually
Resul the checkboxes get deselected = OK perfect

If I select checkboxes and go to another page then click back
(using browser back button)
Result the checkboxes are still selected = Not OK

I have checked the checkbox state are not saved into localstorage,
if I refresh the page manually the result is ok, unchecked.
So this is something about the back button and page that is not refreshed .

Maybe something stay into the Dom cache, is there a way to log something to investigate...

Also I'm using Yadcf, responsive, button, column reorder, show hide column
I don't think this is related but just incase..

kthorngren

You can open the jsbin outside of the environment:
http://live.datatables.net/sicigavo/1

If I select checkboxes and go to another page then click back
(using browser back button)
Result the checkboxes are still selected = Not OK

I tried the same with the above link and the checkboxes aren't saved.

Do you have a link to your page that can be looked at?

I have google about checkbox & back button, and this seem to happend often...

What did you find?

Does this problem occur with checkboxes outside of Datatables?

Kevin

lenamtl

Hi,

I have recreated the case here https://jsfiddle.net/lenamtl/fzr46ut9/

Select All or a few checkboxes
Then click on the link Visit W3Schools
Then click on back browser button
= the checkboxes are still checked

To fix this I'm now using this snippet

var perfEntries = performance.getEntriesByType("navigation");

    if (perfEntries[0].type === "back_forward") {
        location.reload(true);
    }

kthorngren

I think I found the issue (and your example confirms it). Finally realized you are using a DOM sourced table. My test case had Ajax data. Found this article regarding Autocompletion. The problem not related to Datatables, Statesave or the Gyrocode checkboxes. Its related to how browsers remember information in input fields. Since you have DOM sourced table the inputs in the DOM will be remembered. With Ajax the table is overwritten with the Ajax data.

You can use turn off the autocomplete attribute on the checkboxes. See this example:
http://live.datatables.net/tuzalugo/4/edit

I used this code to add autocomplete="off" to all the select checkboxes:

      initComplete: function (row) {
        $('th.dt-checkboxes-cell').find('input').attr('autocomplete', 'off');
        $('.dt-checkboxes').attr('autocomplete', 'off');
      }

You can test it by clicking the Upward/Right facing arrow next to Auto-run JS in the Output tab. The web page will open into a new window. There are two tables the top one sets the autocomplete attribute and the bottom one doesn't. Place check marks in both tables, go to a new site then back. The top table will be cleared and the bottom not

Kevin

lenamtl

Hi,

I knew that for the form but didn't thought that could applied to an input in a table

Here is my final code to also applied to dt-checkboxes-select-all

initComplete: function (row) {
    $('th.dt-checkboxes-cell').find('input').attr('autocomplete', 'off');
    $('th.dt-checkboxes-select-all').find('input').attr('autocomplete', 'off');
    $('.dt-checkboxes').attr('autocomplete', 'off');
    },

Thanks again for your time I always appreciate your help

lenamtl

To fix it directly into the plugin file dataTables-chexboxes.js

if(ctx.aoColumns[i].mRender === null){
    colOptions['render'] = function(){
        //return '<input type="checkbox" class="dt-checkboxes">';
          return '<input type="checkbox" class="dt-checkboxes" autocomplete="off">';
    };
}

//selectAllRender: '<input type="checkbox">'
  selectAllRender: '<input type="checkbox" autocomplete="off">'