July 10, 2012 at 12:14Consistently save settings using AJAX and jQuery queues
Good afternoon, colleagues!
In one of the projects I needed to save the settings selected by the user (made in the form of checkboxes). Since it was assumed that the settings would change infrequently, I decided not to transfer the settings all at once, but as a sequence of changes. Implementation details under the cut.
I'll start with the statement of the problem. There is an object, which is a set of contact information. The user selects in which form to save it, after which the object is converted to the desired form on the server. But the user may not want to save all the information, but only the part that interests him. To do this, he needs to be given a choice - what to keep.
You can save it with just asynchronous AJAX requests, but in this case a not-so-pleasant situation may arise when the next change is sent to the server and gets stuck somewhere along the way, and the user is already trying to save the contact. As a result, he will not get exactly what he expected. The question arises - how to make sure that the changes are kept strictly in order. To do this, I decided to use the queues available in jQuery.
Queues in jQuery are used to implement animations and effects, but no one bothers to use them simply for sequentially performing the necessary actions. As a result, I got something like this code:
When switching the checkbox, a new step is put in the queue - the function of sending the change to the server. If at the same time the queue was empty, then the function is immediately launched for execution (dequeue in the ajaxQueue function). After executing the AJAX request in the function, the next step is taken from the queue and executed.
A request to save a contact is queued in the same way and executed after all the changes have worked.
PS: In the process of writing this article, I came to the conclusion that it’s still easier to transfer all the states of the checkboxes in bulk before saving the contact (this is to the question of why it is useful to write articles :)), but maybe the scheme I described is useful to someone other tasks.
In one of the projects I needed to save the settings selected by the user (made in the form of checkboxes). Since it was assumed that the settings would change infrequently, I decided not to transfer the settings all at once, but as a sequence of changes. Implementation details under the cut.
I'll start with the statement of the problem. There is an object, which is a set of contact information. The user selects in which form to save it, after which the object is converted to the desired form on the server. But the user may not want to save all the information, but only the part that interests him. To do this, he needs to be given a choice - what to keep.
You can save it with just asynchronous AJAX requests, but in this case a not-so-pleasant situation may arise when the next change is sent to the server and gets stuck somewhere along the way, and the user is already trying to save the contact. As a result, he will not get exactly what he expected. The question arises - how to make sure that the changes are kept strictly in order. To do this, I decided to use the queues available in jQuery.
Queues in jQuery are used to implement animations and effects, but no one bothers to use them simply for sequentially performing the necessary actions. As a result, I got something like this code:
function ajaxQueue(func){
$(document).queue("ajax",func);
if($(document).queue("ajax").length == 1)
$(document).dequeue("ajax");
}
$(".contact input:checkbox")
.change(function(){
var $_ = $(this),
checked = $_.is(":checked"),
$_.attr("disabled","disabled");
ajaxQueue(function(){
$.post("/ajax/check_elem",
{name: $_.attr("id"),
value: checked})
.error(function(){
$_.val((!checked)?"on":"off");
})
.complete(function() {
$_.removeAttr("disabled");
$(document).dequeue("ajax");
});
});
});
When switching the checkbox, a new step is put in the queue - the function of sending the change to the server. If at the same time the queue was empty, then the function is immediately launched for execution (dequeue in the ajaxQueue function). After executing the AJAX request in the function, the next step is taken from the queue and executed.
A request to save a contact is queued in the same way and executed after all the changes have worked.
function doAction(link){
$.get(link, function(data){
$('body').append(data);
}, 'html');
}
$("a.saveButton")
.click(function(){
ajaxQueue(doAction($(this).attr("href")));
});
PS: In the process of writing this article, I came to the conclusion that it’s still easier to transfer all the states of the checkboxes in bulk before saving the contact (this is to the question of why it is useful to write articles :)), but maybe the scheme I described is useful to someone other tasks.