Question

I have a page index.php that uses a modal to upload files. After those have uploaded I use the following to update my database and load in the new images to a list.

$('#sortableImages').load('../includes/sortImages.php?edit=' + edit);

Executes:

<script type="text/javascript">
$(document).ready(function(){ 

    $(function() {
        $("#sortableImages ul").sortable({ 
            opacity: 0.6, cursor: 'move', update: function() {
                var order = $(this).sortable("serialize") + '&action=updateRecordsListings';
                $.post("../albumUploader/queries/sort.php", order);
            }
         });
    });

});
</script>
echo "<ul class='revisionList'>";

                while($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
                    $sortImageName = $row['OrgImageName']; 
                    $sortPath = "../data/gallery/" . $getGalleryID . "/images/album/" . $sortImageName;
                    echo "<li class='sortPhotos' id='recordsArray_{$row['id']}' >";
                    echo '<img src="'. $sortPath .'"/>';
                    echo "</li>";
                }

                echo "</ul>";

The images populate in a div #sortableImages on the index page. However it seems that I lose my method of sortable() from the js file that was originally loaded in the index.php or after the ajax request it’s not reading the js. What am I missing here?

Thanks a million.

Answer 1

When you load script from a remote page using ajax, it is important to realize that the ready event has already occured in page you are loading into.

This means that code wrapped in $(function(){}) will fire as soon as it is received. If that code preceeds the html it refers to, it will not find that html, as it doesn’t exist yet.

If you move the same code below the html it refers to, it will fire after the html exists and therefore will find it.

EDIT: My answer presumes that all the code shown after “Executes:” in OP is contained in remote page