Jquery binding ajax functions

[HassanKazmi]

Hi everyone.
I am having an issue with jquery.

I have a drag and drop jquery plugin. It works fine when run standalone. but when this drag and drop is called via ajax and being loaded on to the main page it does not work. what could be the reason?

I am loading this drag and drop html from jquery function which is given below.

function showDD()
{
    $.ajax({
    type: "POST",
    url: 'dragndrop.php',
    success: function(msg){
        $('#dd_div').html(msg);
    },
    error: function(){ 
        alert('Error');
    }
    });
}
 

drag and drop html is loaded in <div id="dd_div"></div>.
but it does not work.
I have included all the required files for drag and drop plugin on the main page (same page on which the above function is written.)

files required for plugin are also included on top(jquery.js and drag and drop ui.js) along with the following code which is required for the drag and drop plugin.

$(document).ready(function(){ 
 
    $(function() {
        $("#contentLeft ul").sortable({ opacity: 0.6, cursor: 'move', update: function() {
            var order = $(this).sortable("serialize") + '&action=updateRecordsListings'; 
            $.post("saveLiPostions.php", order, function(theResponse){
                //do some stuff here
            });                                                              
        }                                  
        });
    });
 
});    
 
 

Is this because of the document.ready ???
what could be the solution.

Any help would be appreciated.

Kind Regards

[HassanKazmi]

can anyone help me with this???

[gits]

if you load a html-page with an XMLHttpRequest and that page does use javascript then you would need to call any initializing methods again ... the nodes are added after the previous code was already executed so any behaviour that was applied to the documents's nodes in an onload or whatever before is not applied to the nodes that are added later on ...