Reset checkboxes after form is submitted and getting back to the table page

Reset checkboxes after form is submitted and getting back to the table page

brazbraz Posts: 12Questions: 0Answers: 0
edited June 2009 in Bug reports
Hi,

I'm experiencing a problem. Here is a description.

I have a DataTable with a form inside. Each row contains a checkbox element. All rows are displayed, there are no hidden rows. Then I select several checkboxes and submitting the form (syncronously without ajax). The new page which handles the submitted form is loaded. Then I press "Back" button in the browser, the table is displayed correcctly, but checkboxes which were selected previously are not selected (actualyy one of them is selected, but others are not).

How can I fix that , make all checkboxes their initial state as they have before submitting the form ?

It also occurs in your example http://datatables.net/examples/example_form.html, if you remove the custom submit handler form is submitted correctly, but when getting back checkboxes are not selected.

If I'm not making dataTable from my table, everything works correctly.

Does some Init() function is executed with dataTable when I pree "Back" browser button ?

Tested in FF 3.0.10 and IE 8

Replies

  • brazbraz Posts: 12Questions: 0Answers: 0
    Update: the problem is not occuring in Google Chrome, checkboxes remain checked after getting back to the table page.

    Any ideas so far? Really need to fix that.
    Thanks
  • allanallan Posts: 63,113Questions: 1Answers: 10,396 Site admin
    I suspect that this might be quite a tough one... What I think is happening is that the browser only selects the form elements (and inserts values to input boxes etc) when window.onload fires. Typically DataTables will be initialised using $(document).ready(...), which fires before this point, and as such some elements which are removed from the HTML page (the ones which are not on display in the current DataTables page) are not selected as expected.

    It sounds like Chome might update the form at the DOMReady point, or it might retain the form values in it's cache, which you will be going back to.

    Either way, I have two suggestions for making this 100% reliable:

    1. Make use of Cookies. At the point when the form is submitted you can store which checkboxes are selected, and then when the page loads again in future you can select them again.

    2. Make use of the server-side. You might be able to store information about which rows were selected on the server-side, and then set the cache timeout for your page to -1, which will force the browser to always reload the page from the server. Then your server-side process which outputs the HTML can put a 'selected="selected"' attribute in as required.

    Help this helps,
    Allan
  • niclashughesniclashughes Posts: 1Questions: 0Answers: 0
    I am having the same issue, when you click back in firefox it does not remember what checkboxes were checked but (which is strange) is that it checks random checkboxes. In IE no checkboxes are checked when the back button is clicked.

    I haven't checked but im sure the two comments above will not make is 100% reliable becasue when the you click back in the browser that does not re-post data back to the server (depends on setup but most cases) so you have to rely on the javascript when the browser renders it.

    If no fix is issued for this then a start would be to just have all the checkboxes un checked when the back button is clicked then at least you havent got to worry it setting random checkboxes.

    Any ideas would be a help and a bug fix would be great.
  • brazbraz Posts: 12Questions: 0Answers: 0
    edited March 2011
    After many experiments I've figured out that the problem is related to "Filter" feature. If I set "bFilter" : false, everything works fine and controls remain the same when using back-forward browser button.

    Also I can reproduce a bug in FF mentioned by niclashughes.
    Check the code:
    [code]






    jQuery(document).ready(function() {
    jQuery("#main_table").dataTable( {
    "bPaginate" : false,
    "bFilter" : true,
    "bSort" : true,
    "bInfo" : false
    });

    });









    Col 1
    Col 2














    [/code]

    When I initially open this page in FF (3.6.15 for Ubuntu) the first radio button is checked. The when I press F5 (refresh page) suddenly the second radio button is checked, on next F5 the first radio is checked again, so when I keep pressing F5 radio it looks like radio buttons are switched on/off. When I press ctrl+F5 the first radio remains checked which is correct. When I set "bFilter" : false, everything is correct and radio buttons are not changing on F5.

    I'm looking for a solution of how to use "Filter" feature without a bug described above.
  • Su4pSu4p Posts: 5Questions: 0Answers: 0
    edited October 2011
    I'm experiencing exactly the same issue.
    Can we expect a fix soon ?
    I searched how to fix it and unfortunatly I didn't come up with a solution.

    If I cut off this ligne "nFilter.innerHTML = ''+sSearchStr+'';" It works,
    if I try this "nFilter.innerHTML = '';" It still works
    but if I use "nFilter.innerHTML = '';" It's not working anymore ...

    Best regards.
This discussion has been closed.