I have a pretty standard implementation of a UL with LI items that are sortable. When I change the sort order, it works fine and sends the array without issue. However, if I remove one of the sortable elements and then call a refresh, and then serialize again to send the updated elements, the element that I removed is still included in the new serialized array I create.
This is driving me nutty… I cannot figure this one out.
$ ('.removeItem').click(function() {
var id = $ (this).attr('id');
var recordid = $ ('.indent ul').attr('data-id');
var item = $ (this).parent();
$ .ajax({
type: 'POST',
url: 'tasks.php',
data: 'action=delphoto&id='+id,
success: function(data) {
item.remove(); /*the thumbnail and its container are removed*/
$ ('.sortable ul').sortable('refresh'); /* supposed to now notice one less element?*/
/* Now I send off the serialized array of remaining elements after the remove and refresh*/
var reorder = $ ('.sortable ul').sortable("serialize") + '&action=sort&id='+recordid;
$ .post("tasks.php", reorder, function(result){
var output = data + result;
alert(output,type);
})
}
})
return false;
});
When I examine the posted array, I see the elements currently visible AND the one that I deleted prior to the refresh and serialize. So if I had 10 thumbnails and dragged them around, the serialized array is perfect. If I choose to delete one and use the the JQUERY .remove() method, the element disappears but it still included in the serialization. I have tried this in the .live(‘click’,function(){} and still get the extra element.
Any ideas?
Thanks!
