CODEWITHSUNDEEP
jquery-uijquerydynamicjquery-ui-draggable
jgille07
jgille07

Reputation: 229

jQuery draggable does not work on elements added via ajax call

I have a list of objects that I am up updating through a dialog. When the user clicks the refresh button it reloads the updated list and appends the same table with the list. However, when I reload the updated list, the draggable function for jQuery UI stops working. I have tried inserting a the $('draggable').draggable line inside the ajax success handler and after the ajax call occurs, and neither worked. I also have a jquyer live event handler for the draggable containers that did not work for when the list was refreshed.

Below is my code for initially loading the list, the live function for draggable containers and the function for when the user clicks the refresh button. In my code below I also tried to add the ui-draggable class to the objects and that 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 was able to get the draggables to work using the on function rather than live, but now I realized that they do not work after I open a jquery UI dialog, close it and then click the refresh button. If I just click the refresh button without opening the dialog first, then everything works fine. However, the draggable turns off if I open the dialog, close it and then click the refresh button, but it does work if I just open the dialog and close it without pressing the refresh button. Any ideas on how to fix this? Will destroying the draggable and then reinitializing it when I close the dialog sound like the solution?

I ultimately want to have the ajax call happen when the dialog closes like this, but this code still was not working. Any help would be greatly appreaciated.

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(){}
                })
            });
        }
    });
}
});

Upvotes: 4

Views: 1443

Answers (1)

mccannf
mccannf

Reputation: 16659

Remove the first .live call and change the second .live call to the following:

 $('body').on('mouseover', '.draggable_container',
    function(){ 
        $(this).draggable({ cursor: "move", cursorAt: { top: -5, left: -5 }, stop: function(){} }); 
});

Upvotes: 5

Related Questions