I have a photo gallery that can be updated via an looped ajax call. The problem is, it only updates about 6 images before the "done" gets fired and the page changes. How can I make the script wait until the entire loop is finished before it executes 'done'?
$('#selectAlbum').change(function() {
var thisAlbID = $(this).children(":selected").attr("id");
var thisAlbURL = $(this).val();
$('.medSelectHighlight').each(function() {
jQuery.ajax({
url:'system/move-media.php',
data:{photo_id:$(this).attr('id'),album_id:thisAlbID},
dataType: 'json',
type:'POST'
}).done(function() {
document.location.href='../media/'+thisAlbURL;
});
});
});
I should also add that I have tried async false
and it worked - however I have read that it should be avoided...