L'événement jQuery ready n'est pas déclenché lors du chargement partiel de la page

Question

Voici la situation: Une page contenant du code HTML et utilisant le plugin jQuery libray et des onglets jQuery UI charge une autre page lorsqu'un onglet est cliqué. Le problème est que lorsque la page/html est chargée/rendue (simplifions cela et disons qu'elle fait juste quelque chose comme $ ("# myDiv"). Load (url);), l'événement ready n'est pas déclenché car bien sûr " window "a déjà chargé et déclenché l'événement load. Cela signifie qu'aucune des choses jQuery que je veux faire en charge (chargement partiel) de la page n'est exécutée. Le plugin UI.tabs est conçu pour charger des pages dans d'autres onglets et nous pouvons supposer que d'autres pages peuvent contenir leur propre jQuery ... donc il devrait y avoir un moyen de contourner cela ..

Je peux penser à des façons très horribles de surmonter le problème, comme avoir un bloc de script au fond de la page en cours de rendu (chargé dans un div) qui fait tout ce que je ferais quand il est prêt (comme vous pouvez le supposer le navigateur a déjà rendu la page si le script le bloc est frappé). Ceci est cependant une très mauvaise pratique. Aucune suggestion?

Answer 1

Je crois que vous pouvez faire quelque chose comme ça (dérivé de ASP.NET):

<script type=”text/javascript”> 
    <!-- 
    Sys.WebForms.PageRequestManager.getInstance().add_EndRequest(Request_End); 
    function Request_End(sender, args) 
    { 
      // Insert code you want to occur after partial page load here 
    } 
    // --> 
</script> 

qui devrait accrocher dans l'événement de demande de fin qui comprend des mises à jour de page partielle. Vous devez évidemment mettre à jour l'exemple ci-dessus pour appeler la fonction JS appropriée que vous souhaitez.

Answer 2

La méthode de chargement offre un rappel qui est exécuté après le chargement du contenu.

$("#myDiv").load(url, null, function() { 
    //do your stuff here 
}); 

documentation complète et des exemples à jQuery.com: http://docs.jquery.com/Ajax/load

Answer 3

Comment allez-vous tirer de la requête AJAX au serveur? Si vous utilisez ASP.NET AJAX, la réponse de Brian Hasden est ce que vous cherchez. Si vous utilisez jQuery pour envoyer la requête, vous pouvez définir un rappel à l'aide de la fonction de chargement.

$(".ajaxLink").load(url, null, function() { 
    // code here 
}); 

load() Documentation

ou définir un événement mondial de ajaxComplete qui est déclenché chaque fois qu'un appel ajax est terminé.

$(document).ajaxComplete(function() { 
    // code here 
}); 

ajaxComplete() Documentation

Answer 4

bien - je suis en utilisant ASP.NET MVC avec jQuery. Je n'utilise pas de vue partielle (ascx) pour cette partie de l'application, mais je chante des vues complètes, mais je les charge en divs. J'ai donc une vue principale avec une tête avec une référence à un fichier js qui est la logique côté client pour ce "type" de vue. Lorsque vous cliquez sur un onglet de cette vue, nous utilisons les onglets jquery pour "charger" une autre vue dans certains div. La façon dont les onglets sont chargés en utilisant ce plugin est simplement de donner une URL (plutôt que d'utiliser la charge à laquelle - comme indiqué - je pourrais ajouter une fonction de rappel plutôt que de compter sur ready).

Cependant. Je ne veux pas que TOUTE la logique client soit dans une vue parente, car toute vue devrait pouvoir charger une autre vue par url (les sous-vues incluent un lien vers leur fichier js qui contient toute la logique de formatage/connexion).

Ce qui est vraiment confus pour moi maintenant, c'est qu'il semble fonctionner dans certaines situations et pas dans d'autres; par exemple 1) lorsque la vue parent est ouverte dans un cadre dans IE, les sous-vues readys ne sont jamais déclenchées 2) lors de l'ouverture du même URL directement dans IE, les sous vues readys sont déclenchées 3) lors de l'ouverture du même URL dans FFX2 le prêt tous ne sont pas déclenchés 4) enfin ..mais lors de l'ouverture d'une sous-vue (qui a sous-vues) de ce parent dans FFX2, l'événement prêt pour l'enfant est déclenché! .. déroutant ..

Je vais faire quelques tests n revenir à vous, mais tout Mises à jour: Ah ha! .. semble même avec les obstacles ci-dessus effacés, il y a une différence de navigateur (évidemment à lire ci-dessus) .. le test ci-dessous simple fonctionne bien dans IE7, mais échoue dans FFX2. L'événement ready est déclenché dans IE mais pas FFX lors du chargement de Test2.htm dans Test1.htm. Par expérience, je sais que cela signifie que IE a une "bizarrerie" et FFX fonctionne comme vous le feriez sur la base du W3C. Il semble donc que cette approche est un non non, à moins que quelqu'un a des suggestions ?:

Test1.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org  /TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
    <title></title> 
    <script type="text/javascript" language="javascript" src="Scripts/jquery-1.3.2.js"> </script> 
    <script type="text/javascript" language="javascript"> 
    <!-- 
     $(document).ready(function() { 
      alert("Test1.htm"); 
      $("#Test1").load("Test2.htm"); 
     }); 
    //--> 
    </script> 
</head> 
<body> 
    <h3>SOME TEST</h3> 
    <div id="Test1">EMPTY</div> 
</body> 
</html> 

Test2.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org  /TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
    <title></title> 
    <script type="text/javascript" language="javascript" src="Scripts/jquery-1.3.2.js"> </script> 
    <script type="text/javascript" language="javascript"> 
    <!-- 
     $(document).ready(function() { 
      alert("Test2.htm"); 
      //$("#Test1").load("Test3.htm"); // load more 
     }); 
    //--> 
    </script> 
</head> 
<body> 
    <h3>SOME TEST</h3> 
    <div id="Test2">EMPTY</div> 
</body> 
</html> 

Answer 5

OK .. donc j'ai simple répondre à ce problème maintenant, ce qui devrait signifier des changements de code minimes. Plutôt que les vues secondaires (ce sont de vraies vues aspx qui n'ont pas de balises html, head ou body) ayant un js include (essentiellement le modèle de comportement côté client) qui répond à $ (document) .ready, nous pouvons utiliser la suggestion de mkedobbs pour fournir quelque chose de similaire. Tout simplement:

$("#MyDiv").load("page.htm", null, function(){ $(document).trigger("PartialLoaded"); }); 

Puis dans la sous vue js comprennent

$(document).bind("PartialLoaded", function(){ .........});