jQuery - batch up settings and AJAX to server in one go

I have a table that gets served off to a 3rd party site. Each row has “track” and “hide” checkboxes … I need to save/update these settings as the user updates their settings so I can call them back later on future visits.

(cookies are not an option… because that is too easily lost and there could be thousands of settings over time)

So, I am leaning toward a AJAX POST using Jquery. Rather than submit on every change… I would like to store the settings in JavaScript and then batch submit every 30 seconds or on page unload. I have most if this working… it is the saving of the data and then batch submission code that I am after.

Let me give you the use case and a scenario:

Table with 100 rows and each row has “track” and “hide”. Each row may be associated with one “subject” and multiple rows may have the same subject … so when you track or hide… it tracks multiple rows (highlights, checks their boxes, and grabs the subject from a row field) OR it “hides” multiple rows based on their subject.

All that is working. (Yes!)

Now, because they could be clicking quickly through… they might track then “untrack” the same subject or hide then “unhide” the same subject all within a very short period of time.

I don’t want all those AJAX calls!

So, I need some sort of data storage for the “subjects” that puts them in “track” and “hide” datasets … removes them out if undone … and occasionally submits whatever the queued up actions are (if any).

Also, there may be settings grabbed on page load that need undone (the track and hide setting grabbed from the DB that pre-dated that visit) … so it may not as simple as removing from a data set… there should be an explicit “untrack” & “unhide” submission in those cases to update the DB.

Can you help me wrap my head around this code with an example please! :smiley:

Thanks!

Are you sure you aren’t over complicating what you are trying to do? Your storage of data is already being done by ticking and unticking checkboxes, it sounds like all you would have to do is periodically send this information to the server.

JS Fiddle


var delay = 30;
var checkRows = setInterval(function(){   
   jQuery('#output').html(jQuery('#myTable').find('input[type="checkbox"]:checked').serialize());
},1000 * delay);

Instead of submitting to the server via ajax in the example I’m just outputting what the post data would be in a div so you can see it. Your server-side part of this would need to interpret the data of course. Because you are only sending through what is ticked, the ‘unticking’ of everything else would be assumed.