jquery s'exécute trop vite

Question

J'ai un peu de problème avec certains jquery. Le code fonctionne bien, mais il s'exécute trop rapidement, même à l'intérieur de tout le fichier $ .document (ready). Essentiellement, j'ai une couche de données chargée à partir d'une base de données - et ensuite le .sortable lui est appliqué. Le contenu .sortable est appliqué avant la fin du dessin HTML. Des idées?

La zone marquée ci-dessous est où le problème est./Clouds/List est un ActionResult dans ASP.NET MVC qui récupère la liste et dessine la vue partielle, mais cela prend plus de temps que jQuery ne l'exécute.

<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

Vous pouvez utiliser l'argument de rappel de $.load, à excute la méthode sortableaprès le code HTML a été injecté dans les 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

fonction de la charge de JQuery accepte un rappel qui est appelée lorsque la réponse est reçue. Effectivement, vous pouvez vous assurer que sortable ne sera pas appelé avant le chargement des données.

<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>