I have a list of objects that I update through a dialog. When the user clicks the refresh button, he reloads the updated list and adds the same table to the list. However, when I reload the updated list, the drag and drop function for jQuery UI stops working. I tried to insert the string $ ('draggable'). Draggable inside the ajax success handler and after the ajax call did not work either. I also have a jquyer live event handler for draggable containers that did not work when the list was updated.
Below is my code to bootstrap the list, a live function for draggable containers and a function when the user clicks the refresh button. In my code below, I also tried adding the ui-draggable class to objects, and this did not work:
$.ajax({ async: false, type: 'POST', url: 'collection.php', success: function(data) { $("#collection").append(data); } }); $("#refresh_collection").click(function(){ $("#collection").html(""); $.ajax({ async: false, type: 'POST', url: 'collection.php', success: function(data) { $("#collection").append(data); $('.draggable_container:not(.ui-draggable)').live("mouseover", function(){ $(".draggable_container").addClass("ui-draggable"); }); } }); }); $('.draggable_container').live('mouseover',function(){ $(this).draggable({ cursor: "move", cursorAt: { top: -5, left: -5 }, stop: function(){} }) });
I managed to get the draggables to work with the on function and not live, but now I realized that they do not work after I open the jquery UI dialog box, close it and click the update button. If I just click the refresh button without first opening the dialog box, then everything will be fine. However, draggable is disabled if I open a dialog, close it, and then click the refresh button, but it works if I just open the dialog and close it without pressing the refresh button. Any ideas how to fix this? Will destroy the draggable and then reinitialize it when I close the dialog that looks like a solution?
Ultimately, I want the ajax call to happen when the dialog closes this way, but this code still doesn't work. Any help would be very receptive.
var $dialog = $("#upload_dialog").dialog({ autoOpen: false, height: 375, width: 500, modal: false, open: function() { $("body").draggable("destroy"); $tab_title_input.focus(); }, close: function() { $.ajax({ async: false, type: 'POST', url: 'collection.php', success: function(data) { $("#collection").html(data); $("body").on("mouseover", ".draggable_container", function(){ $(".object_container").draggable({ cursor: "move", cursorAt: { top: -5, left: -5 }, stop: function(){} }) }); } }); } });