Remember that checkboxes are checked between pages - what's the best way?

Question

I need to add functionality similar to Gmail, where the checkboxes in the list of items are remembered on several pages of results, and when they go away and return to the result. What I'm trying to understand is the best way to do this. I am using PHP and probably jQuery.

My first thought is to add onClick to each checkbox that launches an AJAX call to a server that stores the identifier in an array in the session. Each time a list of items is loaded, the system checks to see if the string is checked, and check the box if necessary. For reliability, the check box will be unchecked if the request to the server cannot be completed (connection problem, server error, etc.), and the request will be made as soon as possible.

This sounds good, except for a few elements:

• check everything: what's going on? Does it send 30 requests to the server by default (default)? Or will I remove all onClicks, check the boxes, send a request to the server with all the identifiers, and then re-add onClicks? Or...? A similar problem when unchecking.
• speed: problems can occur if all 100 users check and remove all the time
• browser speed: I think it’s better to add onClick with JS after loading the page, which, I think, can take a second or 2 if there are 500 or more elements on one page. It would become a big problem when checking everyone.

In the past, I have not found a reliable way to detect when a user leaves a page. If there is a reliable way, I could see that this is an option, so it just writes the offload on each page.

Are there any other solutions or better methods?

Edit: As Eran Halperin mentioned, to check all the methods you would only need to check each of the checkboxes, and then do ajax call all the lines. No need to remove onClick.

Also, it seems like the event delegation method is a good idea - much simpler.

Answer 1

• The onclick event will not fire if you programmatically change the check status of the checkbox. You can send another AJAX request when the user clicks the Check All / Delete link without worrying about the click events that you attach to individual checkboxes.
• This is a tradeoff when using request per click. Alternatively, use the "Save" button, which saves the entire form.
• Use event delegation - attach one onclick event to the entire container containing all the flags, and check the purpose of the event to see if the checkbox has been checked. In addition, personally, I would not show 500 different options on one page. If it is absolutely necessary to have so many options, divide them into several zones / pages.

For the user leaving the page, you can use onbeforeonload , however, if the browser crashes or otherwise crashes, it will not be caught. Use it depending on how important it is for it to record user changes.