jquery script doesnt work after .load()

Question

Im just started yesterday with jquery/ajax. And im trying some things out, but I run into a wall.

I have an index file where I include my js script in this script I have two functions (see below)

In the index file I used include to include a php file that contains a table with some rows (rows from mysql). This included file I also use for the .load in my js script (mod/hoofdmenu.php).

One script is for changing the order of the rows by drag and drop, this works perfect. Other script is for changing 1 row when you click a image (publish/unpublish). This script works also perfect. BUT when I run this script the first script (drag and drop) doenst work anymore. The 'publish/unpublish' script still works.

I think its because the $('#showdata').load('mod/hoofdmenu.php'); All advise/help is very much appreciated.

the includes js file:



$(function() {
    $(".entry").live("click",function(event) {
    event.preventDefault();
    var id = $(this).attr("id");
    var dataString = 'id='+ id ;
    var parent = $(this).parent();
    $.ajax({
            url: "save.php",    
            type: "POST",       
            data: dataString,       
            cache: false,
            success: function (html) {  
                $('#showdata').load('mod/hoofdmenu.php');           
            }       
        });
    });
});
$(function() {
    $(".tbl_repeat tbody").tableDnD({
        onDrop: function(table, row) {
            var orders = $.tableDnD.serialize();
            $.post('mod/order.php', { orders : orders });
        }
    });

});

why do you have 2 $(function() { ?

Royi Namir
– Royi Namir

2011-10-20 18:12:35 +00:00
Commented Oct 20, 2011 at 18:12 — Royi Namir
– Royi Namir, Commented Oct 20, 2011 at 18:12

Gaz · Accepted Answer · 2011-10-20 18:45:15Z

1

The drag and drop event applied to a DOM element that has now been replaced with the new stuff loaded by the AJAX request. You need to put the tableDnD behaviour on to the new elements.

There may be some fancy livequery style way of doing this but this should work:

function initDnD(root) { 
    root.find(".tbl_repeat tbody").tableDnD({
        onDrop: function(table, row) {
            var orders = $.tableDnD.serialize();
            $.post('mod/order.php', { orders : orders });
        }
    });
};

$(function() {
    $(".entry").live("click",function(event) {
        event.preventDefault();
        var id = $(this).attr("id");
        var dataString = 'id='+ id ;
        var parent = $(this).parent();
        $.ajax({
            url: "save.php",    
            type: "POST",       
            data: dataString,       
            cache: false,
            success: function (html) {  
                $('#showdata').load('mod/hoofdmenu.php', function() {
                    initDnD($('#showdata'));
                });           
            }       
        });
    });
    initDnD($("body"));
});

edited Oct 20, 2011 at 18:45

answered Oct 20, 2011 at 18:21

Gaz

4,1443 gold badges34 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Jasper Over a year ago

Thank Gaz for your quick reply. I tried out your code, I just got one syntax error (one last line, });)

Jasper Over a year ago

Gaz, I'm found the syntax error and the script (drag and drop) works now after I call the 2nd script (the publish/unpublish). But when I refresh the index the drag and drop doenst work only when I click the publish/unpublish first.

Gaz Over a year ago

Sorry about the syntax error I've fixed it now. I also call initDnD on the body during the page load, which should fix your new problem.

Jasper Over a year ago

Solved it, I added initDnD($('#showdata')); to a $(document).ready(function() thank you very much Gaz!!

Jasper Over a year ago

ah yes, your option is much better then adding an extra ready(function(), tnx! Tried it and it works great!

Collectives™ on Stack Overflow

jquery script doesnt work after .load()

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related