Domanda jQuery $ (documento) .ready e UpdatePanels?


Sto usando jQuery per collegare alcuni effetti mouseover su elementi che si trovano all'interno di un UpdatePanel. Gli eventi sono obbligatori $(document).ready . Per esempio:

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

Naturalmente, questo funziona bene la prima volta che viene caricata la pagina, ma quando UpdatePanel esegue un aggiornamento parziale della pagina, non viene eseguito e gli effetti mouseover non funzionano più all'interno di UpdatePanel.

Qual è l'approccio consigliato per il cablaggio di jQuery non solo sul caricamento della prima pagina, ma ogni volta che UpdatePanel attiva un aggiornamento parziale della pagina? Dovrei usare il ciclo di vita di ajax di ASP.NET invece di $(document).ready?


453
2017-11-01 22:24


origine


risposte:


Un UpdatePanel sostituisce completamente il contenuto del pannello di aggiornamento su un aggiornamento. Ciò significa che gli eventi a cui sei iscritto non sono più iscritti perché ci sono nuovi elementi in quel pannello di aggiornamento.

Quello che ho fatto per ovviare a questo è ri-iscriversi agli eventi di cui ho bisogno dopo ogni aggiornamento. Io uso $(document).ready() per il caricamento iniziale, quindi utilizzare PageRequestManager di Microsoft (disponibile se si dispone di un pannello di aggiornamento sulla pagina) per ri-sottoscrivere ogni aggiornamento.

$(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
});

Il PageRequestManager è un oggetto javascript che è automaticamente disponibile se nella pagina è presente un pannello di aggiornamento. Non dovresti aver bisogno di fare nient'altro che il codice sopra per poterlo utilizzare purché UpdatePanel sia nella pagina.

Se è necessario un controllo più dettagliato, questo evento passa argomenti simili a come vengono inoltrati gli eventi .NET (sender, eventArgs) così puoi vedere cosa ha sollevato l'evento e solo ri-legare se necessario.

Ecco l'ultima versione della documentazione di Microsoft: msdn.microsoft.com/.../bb383810.aspx


Un'opzione migliore che potresti avere, a seconda delle tue esigenze, è usare jQuery .on(). Questi metodi sono più efficienti della ri-sottoscrizione agli elementi DOM su ogni aggiornamento. Leggi tutta la documentazione prima di usare questo approccio, poiché potrebbe o meno soddisfare le tue esigenze. Ci sono un sacco di plugin jQuery che sarebbero irragionevoli per il refactoring da usare .delegate() o .on()quindi, in questi casi, è meglio iscriversi nuovamente.


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>

L'area che verrà aggiornata.

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

158
2018-05-26 19:53



Controllo utente con jQuery all'interno di un UpdatePanel

Questa non è una risposta diretta alla domanda, ma ho messo insieme questa soluzione leggendo le risposte che ho trovato qui, e ho pensato che qualcuno potrebbe trovare utile.

Stavo cercando di usare un limitatore di textarea jQuery all'interno di un controllo utente. Questo è stato complicato, perché il Controllo Utente viene eseguito all'interno di un UpdatePanel e stava perdendo i suoi binding durante la richiamata.

Se questa fosse solo una pagina, le risposte qui avrebbero applicato direttamente. Tuttavia, i controlli utente non hanno accesso diretto al tag head, né hanno accesso diretto a UpdatePanel come alcune delle risposte assumono.

Ho finito per mettere questo blocco di script direttamente nella parte superiore del markup del mio controllo utente. Per il bind iniziale, utilizza $ (document) .ready, quindi utilizza prm.add_endRequest da 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>

Quindi ... Pensavo che qualcuno potrebbe piacere sapere che questo funziona.


61
2018-02-06 00:54



Esegui l'upgrade a jQuery 1.3 e utilizza:

$(function() {

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

});

Nota: il live funziona con la maggior parte degli eventi, ma non tutti. C'è una lista completa in la documentazione.


33
2017-12-31 10:51



Puoi anche provare:

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

, poiché pageLoad () è un evento ajax di ASP.NET che viene eseguito ogni volta che la pagina viene caricata sul lato client.


20
2018-02-28 18:01



La mia risposta?

function pageLoad() {

  $(document).ready(function(){

eccetera.

Ha funzionato come un incantesimo, dove molte altre soluzioni hanno fallito miseramente.


16
2017-11-01 22:39



Vorrei utilizzare uno dei seguenti approcci:

  1. Incapsula l'associazione eventi in una funzione ed eseguila ogni volta che aggiorni la pagina. È sempre possibile contenere l'associazione degli eventi a elementi specifici in modo da non associare più volte gli eventi agli stessi elementi.

  2. Usa il livequery plug-in, che fondamentalmente esegue il metodo uno per te automaticamente magicamente. Le tue preferenze potrebbero variare in base alla quantità di controllo che desideri avere sul bind dell'evento.


7
2018-06-26 11:14



Questo ha funzionato per me:

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