jQuery prêt événement à ne pas tiré sur partielle de chargement de la page

Voici la situ: Une page qui contient du html et l'utilisation de la bibliothèque jQuery et les onglets jQuery UI plugin charge une autre page lorsque certaines onglet est sélectionné. Le problème est que lorsque la page html est chargé/rendu (nous pouvons simplifier et dire que c'est juste de faire quelque chose comme $("#myDiv").load(url);), le prêt de l'événement n'est pas déclenché, parce que, naturellement, la "fenêtre" a déjà chargé et tiré à la charge de l'événement. Cela signifie qu'aucun des jQuery choses que je veux faire sur la charge (charge partielle) de la page sont exécutées. L'INTERFACE utilisateur.onglets plugin est conçu pour charger des pages dans d'autres onglets et on peut supposer que d'autres pages peuvent contenir leurs propres jQuery... donc il doit y avoir un moyen de contourner cela..

Je pense très horrible des façons de surmonter le problème, comme d'avoir un bloc de script en bas de la page en cours de rendu (chargé dans une div), qui fait toutes choses, je le ferais lorsque le prêt est déclenché (comme vous pouvez le supposer, le navigateur a rendu la page est déjà si le bloc de script est touché). Ceci, toutefois, est TRÈS mauvaise pratique. Des suggestions?

InformationsquelleAutor Mr AH | 2009-12-09
  1. 4

    Comment vous tirer de la requête AJAX vers le serveur? Si vous êtes en utilisant ASP.NET AJAX, puis Brian Hasden réponse est ce que vous cherchez. Si vous utilisez jQuery pour envoyer la demande, alors vous pouvez définir un rappel à l'aide de la fonction de charge.

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

    load() de la Documentation

    ou définir une ajaxComplete événement qui est déclenché à chaque fois qu'un appel ajax est terminée.

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

    ajaxComplete() Documentation

    InformationsquelleAutor Kyle Trauberman
  2. 2

    La méthode de chargement, offre une fonction de callback qui est exécuté après que le contenu a été chargé.

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

    Complet de la documentation et des exemples à jQuery.com: http://docs.jquery.com/Ajax/load

    InformationsquelleAutor mkedobbs
  3. 1

    Bien, je suis en utilisant ASP.NET MVC avec jQuery. Je ne suis PAS en utilisant vue partielle (ascx) pour cette partie de l'application, au lieu de cela je suis chanter plein de vues, mais de les charger dans de divs. Donc, j'ai un écran principal avec une tête avec une référence à un fichier js qui est le côté client de la logique pour ce "type" de vue. Lorsque vous cliquez sur certains onglet sur ce point de vue, nous utilisons les onglets jquery pour "charger" antoher vue dans certains div. La façon dont les onglets sont chargées à l'aide de ce plugin est tout simplement d'en donner une url (plutôt que d'utiliser de la charge de qui - comme l'a souligné -, je pourrais ajouter un appel de retour de la fonction plutôt que de compter sur les prêts).

    Cependant. Je ne veux pas, TOUS les clients de la logique dans certains parent vue, que tout devrait être en mesure de charger un autre point de vue par url (sous-points de vue d'inclure un lien vers leur fichier js qui contient toute la logique de format/type de branchement lors de la charge).

    Ce qui est VRAIMENT confus pour moi c'est maintenant que ça semble fonctionner dans certaines situations et pas dans d'autres; par exemple 1) lorsque la vue parent est ouvert dans un cadre sous IE, le sous vue readys ne sont jamais déclenché 2) lors de l'ouverture de la même url directement dans IE, les sous-vues readys SONT déclenchées 3) lors de l'ouverture de la même URL dans FFX2 le prêt tous ne sont PAS déclenchées 4) enfin.. mais lors de l'ouverture d'un sous, ce qui a des sous points de vue) de ce parent dans FFX2, l'enfant prêt événement est déclenché!.. déconcertant..

    Je'mm vais faire quelques tests n obtenir de revenir à toi, mais toutes les suggestions sur les raisons de ce comportement peut être différent serait bien apprécié

    Mise à JOUR: Ah ha!.. semble que même avec le ci-dessus les obstacles effacé, il y a un navigateur différence (bien évidemment de lire ci-dessus).. ci-dessous test très simple qui fonctionne très bien dans IE7, mais échoue dans FFX2. Le prêt de l'événement est déclenché dans IE mais pas FFX lors du chargement Test2.htm en Test1.htm. Par expérience, je sais que cela signifie que IE a un "caprice" et FFX est le travail que vous attendez basé sur le W3C. Donc, il semble que cette approche est un non non, sauf si 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>
    InformationsquelleAutor Mr AH
  4. 1

    OK.. si j'ai une réponse simple à ce problème maintenant, ce qui devrait réduire les changements de code. Plutôt que de les sous-vues (ce sont de vrais aspx vues qui n'ont pas de html, la tête ou le corps des balises) ayant un js à inclure (essentiellement du côté client, le comportement du modèle) qui répond à $(document).prêt, nous pouvons utiliser la suggestion de mkedobbs de fournir quelque chose de similaire. Tout simplement:

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

    Puis dans la sous-vue js inclure

    $(document).bind("PartialLoaded", function(){ .........});
    InformationsquelleAutor Mr AH
  5. -1

    Je crois que vous pouvez faire quelque chose comme ceci (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 s'accrocher dans l'extrémité de la demande de l'événement, qui comprend partielle page des mises à jour. Vous feriez bien évidemment de mise à jour de l'exemple ci-dessus pour appeler les JS de la fonction que vous souhaitez.

    • C'est pour MS Ajax, pas de jQuery, et à en juger par la PageRequestManager je suis assez sûr qu'il ne s'applique qu'à ASP.NET WebForms.
    • Compris, mais si vous regardez les réponses fournies par M. AH, il déclare qu'il est l'aide de ASP.NET. Je fournis d'une manière qui a comblé l'écart à partir d'un .NET partielle de chargement de la page pour la cuisson quelle que soit la fonction JS il voulait tiré (jQuery prêt événement ou autre).
    InformationsquelleAutor Brian Hasden