Multiple updates at once via ajax - php

Question

I just want to make sure I'm on the right track at the moment:
Made a little thing so an admin can edit people's schedules. Right now he clicks on a row and all the schedules become editable. If he changes values in a row I'm catching it with
$('.selector').change(function() { // this happens to be a <select> dropdown. I guess technically this is the <option> inside of the select.
var updates = new Array(); // an array of all the updates
var classList = $(this).attr('id').split(/\s+\); // the id of a <select> would be something like "12 monday start" meaning the user_id, day_of_week, start/end time. Just converting it to an array here.
classList.push($(this).val()); // the time it has been changed to
updates.push(classList); // add the singular time update to the overall array
$('.save_schedule').click(function() {
// here I would iterate through all of the arrays in updates and do some sort of ajax call, correct?
});
});
Just want to make sure that I'm on the right track before I go any further and have to potentially rewrite things.
Thanks
My HTML since it has been requested: https://gist.github.com/2435293

Answer 1

if your HTML looks somehow like this
<select id="12 monday start" class="selector">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select id="12 monday end" class="selector">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="button" class="save_schedule" value="save" />
your javascript could look like this
$('.save_schedule').click(function() {
var arr = new Array();
$('.selector').each(function() {
arr.push($(this).attr('id').split(/\s+/));
arr.push($(":selected", this).val())
});
alert(arr);
// ajax call here
});
see jsfiddle example

Answer 2

I can think of two ways to implement this:
OPTION 1 - draft saving
Each time the user edits a row, you make an AJAX call to temporary save his changes (add a database column draft to distinct drafts from real changes).
You should move the click handler outside the change handler:
$('.selector').change(function() {
...
});
$('.save_schedule').click(function() {
...
});
In the change handler, $(this) points to the current tag select.
To get the selected value, you can use $(this).val().
To avoid splitting the select id attribute to get all the elements you need, you can use custom attributes:
<select data-user-id="12" data-day="monday" data-time="start">...</select>
Then, in your change handler, you can use the attr method to get their values.
var user_id = $(this).attr('data-user-id');
var day = $(this).attr('data-day');
var time = $(this).attr('data-time');
Now, you can make an ajax call to store the changes as draft.
When the user clicks on save_schedule, make a final ajax call to update the status of the drafts and set it to permanent.
OPTION 2 - simple save, form serializing
All changes are saved only when the user clicks on save button.
I would recommend to keep all the data in HTML tags and not in Javascript. (for reasons like: What happens if the user edits twice a schedule? Are the changes pushed again in the array?).
You could hide the inputs/selects when they are not editable and you won't need to treat the change event anymore.
When the user clicks on save_schedule, you can use a function like $(form).serialize() to gather all the data from your inputs (http://api.jquery.com/serialize/) and make an AJAX call to save your changes.