jQuery $(document) .ready et UpdatePanel ?

Question

J'utilise jQuery pour câble de certains effets de mouseover sur des éléments qui sont à l'intérieur d'un UpdatePanel. Les événements sont liés en $(document).ready . Par exemple:

$(function() {    
    $('div._Foo').bind("mouseover", function(e) {
        // Do something exciting
    });    
});

Bien sûr, cela fonctionne bien la première fois que la page est chargée, mais lorsque l'UpdatePanel n'partielle de la page de mise à jour, il n'est pas exécuté et le mouseover effets ne fonctionnent plus du tout à l'intérieur de l'UpdatePanel.

Quelle est l'approche recommandée pour le câblage des trucs dans jQuery non seulement sur la première page de la charge, mais à chaque fois qu'un UpdatePanel feux partielle de la page de mise à jour? Dois-je utiliser l'ASP.NET ajax cycle de vie au lieu de $(document).ready?

Answer 1

Un UpdatePanel remplace complètement le contenu du panneau de mise à jour sur une mise à jour. Cela signifie que ces événements vous avez souscrit à l'êtes plus abonné parce qu'il y a de nouveaux éléments dans ce panneau de mise à jour.

Ce que j'ai fait de contourner cela est de ré-abonnez-vous pour les événements dont j'ai besoin après chaque mise à jour. J'utilise $(document).ready() de la charge initiale, puis utilisez Microsoft PageRequestManager (disponible si vous avez un panneau de mise à jour sur votre page) pour vous inscrire de nouveau à chaque mise à jour.

$(document).ready(function() {
    // bind your jQuery events here initially
});

var prm = Sys.WebForms.PageRequestManager.getInstance();

prm.add_endRequest(function() {
    // re-bind your jQuery events here
});

L' PageRequestManager est un objet javascript qui est automatiquement disponible que si un panneau de mise à jour est sur la page. Vous ne devriez pas avoir besoin de faire autre chose que le code ci-dessus afin de l'utiliser aussi longtemps que l'UpdatePanel est sur la page.

Si vous avez besoin d'un contrôle plus détaillé, cet événement passe les arguments de la même façon .NET événements sont des arguments passés (sender, eventArgs) de sorte que vous pouvez voir ce qui a déclenché l'événement et seulement re-lier si nécessaire.

Voici la dernière version de la documentation de Microsoft: msdn.microsoft.com/.../bb383810.aspx

---

Une meilleure option que vous pourriez avoir, en fonction de vos besoins, est d'utiliser du jQuery .on(). Ces méthodes sont plus efficaces que les re-souscrire à des éléments du DOM à chaque mise à jour. Lire toute la documentation avant d'utiliser cette approche, cependant, car il peut ou ne peut pas répondre à vos besoins. Il y a beaucoup de plugins jQuery qui serait déraisonnable de refactoriser le code à utiliser .delegate() ou .on(), donc dans ce cas, vous êtes mieux de ré-abonnement.

Answer 2

<pre><code></code><p>La zone qui va être mis à jour.</p><pre><code></code></pre></pre>

Answer 3

De Contrôle de l'utilisateur avec jQuery à l'Intérieur d'un UpdatePanel

Ce n'est pas une réponse directe à la question, mais je n'ai mis cette solution en lisant les réponses que j'ai trouvé ici, et j'ai pensé que quelqu'un pourrait trouver utile.

J'ai essayé d'utiliser jQuery textarea limiteur à l'intérieur d'un Contrôle Utilisateur. C'était difficile, parce que le Contrôle de l'Utilisateur s'exécute à l'intérieur d'un UpdatePanel, et c'était de perdre ses liaisons sur de rappel.

Si c'était juste une page, la réponse ici serait de l'appliquer directement. Cependant, les Contrôles de l'Utilisateur n'ont pas un accès direct à la balise head, et ils n'ont pas d'accès direct à la UpdatePanel que certaines des réponses supposent.

J'ai fini par mettre ce bloc de script à droite dans le haut de mon Contrôle de l'Utilisateur du balisage. Pour l'affectation initiale, il utilise $(document).prêt, et ensuite, il utilise prm.add_endRequest à partir de là:

<script type="text/javascript">
    function BindControlEvents() {
        //jQuery is wrapped in BindEvents function so it can be re-bound after each callback.
        //Your code would replace the following line:
            $('#<%= TextProtocolDrugInstructions.ClientID %>').limit('100', '#charsLeft_Instructions');            
    }

    //Initial bind
    $(document).ready(function () {
        BindControlEvents();
    });

    //Re-bind for callbacks
    var prm = Sys.WebForms.PageRequestManager.getInstance(); 

    prm.add_endRequest(function() { 
        BindControlEvents();
    }); 

</script>

Alors... Juste pensé que quelqu'un pourrait savoir que cela fonctionne.

Answer 4

Mise à niveau vers jQuery 1.3 et utiliser :

Remarque : en direct fonctionne avec la plupart des événements, mais pas tous. Il y a une liste complète dans la documentation.

Answer 5

Vous pouvez également essayer :

, étant donné que pageLoad() est un événement ASP.NET ajax qui est exécuté chaque fois que la page est chargée du côté client.