jquery executes too fast

Question

I've got a bit of a problem with some jquery. The code works fine, but it's running too quickly, even inside of the whole $.document(ready) thing.

Essentially, I have a layer of data loaded from a database - and then the .sortable is applied to it.

The .sortable stuff is being applied before the HTML finishes drawing. Any ideas?

The marked area below is where the problem is. /Clouds/List is an ActionResult in ASP.NET MVC that gets the listing and draws the partial view - but it takes longer to do that than the jQuery is executing.

<script type="text/javascript">
    $(function () {
     $("#floating").load("/Tags/List");
     **$("#listing").load("/Clouds/List");**

     $(".sortable").sortable({
      connectWith: '.connectable',
      dropOnEmpty: true,
      receive: function (event, ui) {
       var tag = $(ui.item).attr("id").replace(/t/, "");
       var parent_id = $(ui.item).parent().attr('id');
       $.post("/Clouds/Insert", { cloud: parent_id, tag: tag });
      },
      remove: function (event, ui) {
       var tag = $(ui.item).attr("id").replace(/t/, "");
       var parent_id = $(ui.item).parent().attr('id');
       $.post("/Clouds/Remove", { cloud: parent_id, tag: tag });
      }
     }).disableSelection();

    });
</script>

Answer 1

You can use the callback argument of $.load, to excute the sortable method after the HTML has been injected to the DOM:

   $("#listing").load("/Clouds/List", function () {
     $(".sortable").sortable({
            connectWith: '.connectable',
            dropOnEmpty: true,
            receive: function (event, ui) {
                    var tag = $(ui.item).attr("id").replace(/t/, "");
                    var parent_id = $(ui.item).parent().attr('id');
                    $.post("/Clouds/Insert", { cloud: parent_id, tag: tag });
            },
            remove: function (event, ui) {
                    var tag = $(ui.item).attr("id").replace(/t/, "");
                    var parent_id = $(ui.item).parent().attr('id');
                    $.post("/Clouds/Remove", { cloud: parent_id, tag: tag });
            }
      }).disableSelection();
   });

Answer 2

JQuery's load function accepts a callback that is called when the response is received. Effectively, you can make sure that sortable will not be called before the data is loaded.

<script type="text/javascript">
    $(document).ready( function () {
        $("#floating").load("/Tags/List");
        $("#listing").load("/Clouds/List", {}, function() {

            $(".sortable").sortable({
                    connectWith: '.connectable',
                    dropOnEmpty: true,
                    receive: function (event, ui) {
                            var tag = $(ui.item).attr("id").replace(/t/, "");
                            var parent_id = $(ui.item).parent().attr('id');
                            $.post("/Clouds/Insert", { cloud: parent_id, tag: tag });
                    },
                    remove: function (event, ui) {
                            var tag = $(ui.item).attr("id").replace(/t/, "");
                            var parent_id = $(ui.item).parent().attr('id');
                            $.post("/Clouds/Remove", { cloud: parent_id, tag: tag });
                    }
            }).disableSelection();
        });
    } );
</script>