Question jQuery $ (document) .ready et UpdatePanels?


J'utilise jQuery pour câbler certains effets mouseover sur les éléments qui se trouvent dans un UpdatePanel. Les événements sont liés dans $(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 UpdatePanel effectue une mise à jour partielle, elle n'est pas exécutée et les effets mouseover ne fonctionnent plus dans le UpdatePanel.

Quelle est l'approche recommandée pour le câblage dans jQuery non seulement lors du premier chargement de la page, mais chaque fois qu'un UpdatePanel déclenche une mise à jour partielle de la page? Devrais-je utiliser le cycle de vie ajax ASP.NET au lieu de $(document).ready?


453
2017-11-01 22:24


origine


Réponses:


Un UpdatePanel remplace complètement le contenu du panneau de mise à jour sur une mise à jour. Cela signifie que les événements auxquels vous vous êtes abonné ne sont plus souscrits car il y a de nouveaux éléments dans ce panneau de mise à jour.

Ce que j'ai fait pour contourner ce problème, c'est de me réabonner aux événements dont j'ai besoin après chaque mise à jour. j'utilise $(document).ready() pour le chargement initial, utilisez ensuite le PageRequestManager de Microsoft (disponible si vous avez un panneau de mise à jour sur votre page) pour vous réinscrire à 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
});

le PageRequestManager est un objet javascript qui est automatiquement disponible 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 pour l'utiliser tant que UpdatePanel est sur la page.

Si vous avez besoin d'un contrôle plus détaillé, cet événement transmet des arguments similaires à la manière dont les événements .NET sont transmis aux arguments. (sender, eventArgs) Vous pouvez donc voir ce qui a déclenché l'événement et ne le relier que 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, selon vos besoins, est d'utiliser jQuery .on(). Ces méthodes sont plus efficaces que la réinscription aux éléments DOM sur chaque mise à jour. Lisez toute la documentation avant d'utiliser cette approche, car elle peut ou non répondre à vos besoins. Il y a beaucoup de plugins jQuery qu'il serait déraisonnable de refactoriser .delegate() ou .on()Dans ces cas, il vaut mieux vous réinscrire.


522
2018-01-14 13:51



<script type="text/javascript">

        function BindEvents() {
            $(document).ready(function() {
                $(".tr-base").mouseover(function() {
                    $(this).toggleClass("trHover");
                }).mouseout(function() {
                    $(this).removeClass("trHover");
                });
         }
</script>

La zone qui va être mise à jour.

<asp:UpdatePanel...
<ContentTemplate
     <script type="text/javascript">
                    Sys.Application.add_load(BindEvents);
     </script>
 *// Staff*
</ContentTemplate>
    </asp:UpdatePanel>

158
2018-05-26 19:53



Contrôle utilisateur avec jQuery dans un UpdatePanel

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

J'essayais d'utiliser un limiteur de zone de texte jQuery à l'intérieur d'un contrôle utilisateur. C'était délicat car le contrôle utilisateur s'exécutait à l'intérieur d'un UpdatePanel et perdait ses liaisons lors d'un rappel.

S'il ne s'agissait que d'une page, les réponses seraient appliquées directement. Cependant, les contrôles utilisateur n’ont pas d’accès direct à la balise head; ils n’ont pas non plus d’accès direct à UpdatePanel comme le supposent certaines réponses.

J'ai fini par placer ce bloc de script directement en haut du balisage de mon User Control. Pour la liaison initiale, il utilise $ (document) .ready, puis 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 ... Je pensais juste que quelqu'un aimerait savoir que cela fonctionne.


61
2018-02-06 00:54



Mettez à niveau vers jQuery 1.3 et utilisez:

$(function() {

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

});

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


33
2017-12-31 10:51



Vous pouvez aussi essayer:

<asp:UpdatePanel runat="server" ID="myUpdatePanel">
    <ContentTemplate>

        <script type="text/javascript" language="javascript">
        function pageLoad() {
           $('div._Foo').bind("mouseover", function(e) {
               // Do something exciting
           });
        }
        </script>

    </ContentTemplate>
</asp:UpdatePanel>

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


20
2018-02-28 18:01



Ma réponse?

function pageLoad() {

  $(document).ready(function(){

etc.

Travaillé comme un charme, où un certain nombre d'autres solutions ont échoué lamentablement.


16
2017-11-01 22:39



J'utiliserais l'une des approches suivantes:

  1. Encapsuler la liaison d'événement dans une fonction et exécutez-le chaque fois que vous mettez à jour la page. Vous pouvez toujours contenir la liaison d'événements à des éléments spécifiques afin de ne pas lier plusieurs fois les événements aux mêmes éléments.

  2. Utilisez le livequery plug-in, qui effectue essentiellement la méthode un pour vous automatiquement. Votre préférence peut varier en fonction de la quantité de contrôle que vous souhaitez avoir sur la liaison d'événement.


7
2018-06-26 11:14



Cela a fonctionné pour moi:

$(document).ready(function() {

    // Do something exciting

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

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

});

7
2017-07-16 05:06



Quand $(document).ready(function (){...}) ne fonctionne pas après la publication de la page, puis utilisez la fonction JavaScript pageLoad dans Asp.page comme suit:

<script type="text/javascript" language="javascript">
function pageLoad() {
// Initialization code here, meant to run once. 
}
</script>

6
2018-06-17 15:17