Wait For Function to Finish Before Starting Next
I currently have a page which displays a list of items people have in their wishlist.
Each item has a checkbox next to it, and I have a "Delete Selected" link at the top of the page.
What I want to do when a person clicks "Delete Selected" is:
1) Display a "processing" message
2) Send an AJAX query to delete item in the db
3) Remove the item from the list
4) When all items are processed, remove the "processing" message
To do this so far I have:
-
$('a#deleteselected').click(function() {
$.('#loading').show()
var items = $('.items :checkbox:checked');
items.each(function(){
deleteItem(this);
});
$.('#loading').hide()
return false;
});
And the deleteItem function looks like this:
-
function deleteItem(e) {
item = e;
$.get("/ajax/deleteItem.php", { item: $(item).attr('name')}, function(data,sender) {
if(data=='true') {
$(item).parents('.wishlistitem').remove();
return true;
}
});
return false;
}
The problem is that the code executes without waiting for deleteItem to finish. Therefore the loading box disappears almost instantly, and then the items are not removed from the page, although they are being deleted from the database.
Please can someone help with this.
Thanks in advance.