php - Remembering checked checkboxes across pages - what's the best way?

Question

I'm needing to add functionality similar to Gmail where the checkboxes on a list of items is remembered across multiple pages of results and when going away and coming back to the result. What I'm trying to figure out is the best way of doing this. I'm using PHP and likely jQuery.

My first thought is to add an onClick to each checkbox that triggers an AJAX call back to the server which stores the id in an array in the session. Each time a list of items is loaded, the system would check to see if the row is checked and check the checkbox if necessary. For reliability, the checkbox would be unchecked after checking if the request to the server cannot be completed (connection problem, server error, etc) and the request would be made as quick as absolutely possible.

This sounds all good, except for a few items:

• check all: what happens? Does it send 30 (default page items) requests to the server? Or do I remove all of the onClicks, check the checkboxes, send a request to the server with all of the ids, then re-add the onClicks? Or...? Similar problem with uncheck all.
• speed: there could start to be problems if 100s of users are all checking and unchecking all the time
• browser speed: I'm thinking it's best to add the onClick with JS after the page loads, which I'm thinking could take a second or 2 if there are 500 or more items on one page. Would become a bigger problem with check all.

In the past I haven't found a reliable way to detect when the user leaves a page. If there is a reliable way, then I could see this being an option so it just records on each page unload.

Are there any other solutions or better methods?

Edit: As mentioned by Eran Galperin, the check all method would only need to check each of the checkboxes and then make an ajax call with all of the rows. No need to remove the onClick.

Also, it looks like the Event Delegation method is a good idea—would make things a lot easier.

Answer 1

1. An onclick event won't trigger when you programmaticaly change the checked status of a checkbox. You can send a different AJAX request when a user clicks the check all / uncheckall link, without worrying about the click events you attached to individual checkboxes.
2. This is the tradeoff when using a request per click. Alternatively use a "Save" button that saves the entire form.
3. Use event delegation - attach one onclick event to the entire container that holds all the checkboxes, and check the target of the event to see if a checkbox was clicked. Also, personally I would avoid showing 500 different options on the same page. If absolutely necessary to have so many options, break them down into several zones / pages.

For a user leaving the page you can use the onbeforeonload event, however if the browser crashes or otherwise exits ungracefully it will not be caught. Use it depending on how critical is it to be able to capture user changes.