Using JQuery UI's sortable('serialize') after loading data in via .load();

Question

I have a page (page1.php) where I am using a select box to load in another page (page2.php) into a DIV. Inside page2.php there is a UL that loads data from a database (via PHP) into LIs and the are sortable.

My problem is, when I load page2.php by itself, it serializes fine. However, when page2.php is loaded via .load() into page1.php, it doesn't serialize at all and I get undefined.

Here is the important code, again this works fine by itself, but not when this page is loaded in via the .load() function

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt; 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"&gt;&lt;/script&gt; 
<style> 
    #thelist { list-style-type: none; margin: 0; padding: 0; width:700px; }
    #thelist li { margin: 3px 3px 3px 0; padding: 1px; float: left; width: 200px; height: 150px; }
    </style> 
<ul id="thelist">
<li style="margin-bottom:5px;" name='listItem_1' id='listItem_1'>
    test1
</li>
<li style="margin-bottom:5px;" name='listItem_2' id='listItem_2'>
    test2
</li>
<script type="text/javascript"> 
    $(function() {
        $("#thelist").sortable({ 
            update : function () { 
              var order = $('#thelist').sortable('serialize'); 
              alert(order); // This alerts "undefined" when page2.php is loaded into page1.php via .load();
              $("#info").load("reorder_slides.php?"+order); 
        }});
    });
</script> 

This is the new code I am running, still to no avail.

<script>
    $('#edit_service_date').change(function() {
        // $(this).val()
        $('#editService').slideUp("slow",function(){
            $('#thelist').load('page2.php', {id: $('#edit_service_date').val()}, function(){
                $("#thelist").sortable({ 
                    update : function () { 
                      var order = $('#thelist').sortable('serialize'); 
                      alert(order); // This alerts "undefined" when page2.php is loaded into page1.php via .load();
                      $("#info").load("reorder_slides.php?"+order); 
                }});
                if($('#edit_service_date').val()!="none"){
                    $('#editService').slideDown("slow");
                }
            });
        });
    });
</script>

Answer 1

If everything you posted above is being brought into another page via .load(), then I see (at least) two problems:

1. You're loading jQuery and jQuery UI twice: once in the outer page, and once in the inner page loaded via ajax. There's no need.
2. You're expecting $(function(){}) to fire after being loaded into the "inner" page within the div. $(function(){}) is a synonym for $(document).ready( function(){} ), and in fact the ready event has already fired (when the outer page DOM became ready). It won't do anything here.

You should try triggering the .sortable() stuff inside the callback of the .load() you're using to bring the inner document into the div:

/* on page1.php */
$('#yourdiv').load( 'page2.php', function(){
    $('#thelist').sortable( /* arguments */ );
});