jQuery $ (document) .ready e UpdatePanels?

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

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

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

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

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

Quello che ho fatto per ovviare a questo problema è di ri-abbonarmi agli eventi di cui ho bisogno dopo ogni aggiornamento. Uso $(document).ready()per il caricamento iniziale, quindi uso Microsoft PageRequestManager(disponibile se hai un pannello di aggiornamento sulla tua pagina) per abbonare nuovamente 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
});

La PageRequestManagerè un oggetto JavaScript che è automaticamente disponibile se un pannello di aggiornamento è sulla pagina. Non dovresti dover fare altro che il codice sopra per usarlo fintanto che UpdatePanel è sulla pagina.

Se hai bisogno di un controllo più dettagliato, questo evento passa argomenti simili a come gli eventi .NET vengono passati a argomenti in (sender, eventArgs)modo da poter vedere cosa ha generato l'evento e ricollegarlo solo 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, è quella di utilizzare jQuery .on(). Questi metodi sono più efficienti della nuova iscrizione agli elementi DOM su ogni aggiornamento. Leggere tutta la documentazione prima di utilizzare questo approccio, poiché potrebbe soddisfare o meno le proprie esigenze. Esistono molti plug-in jQuery che potrebbero essere irragionevoli da utilizzare come refactor .delegate()o .on(), quindi, in questi casi, è meglio abbonarsi nuovamente.

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

Controllo utente con jQuery all'interno di 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 potesse trovarlo utile.

Stavo cercando di utilizzare un limitatore di textarea jQuery all'interno di un controllo utente. Ciò è stato complicato, poiché il controllo utente viene eseguito all'interno di un UpdatePanel e perde i collegamenti al callback.

Se questa fosse solo una pagina, le risposte qui sarebbero state applicate direttamente. Tuttavia, i controlli utente non hanno accesso diretto al tag head, né hanno avuto accesso diretto a UpdatePanel come alcune delle risposte presuppongono.

Ho finito per mettere questo blocco di script proprio nella parte superiore del markup del mio controllo utente. Per il bind iniziale, utilizza $ (document) .ready e 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 ... Ho pensato che qualcuno potesse piacere sapere che funziona.

Esegui l'upgrade a jQuery 1.3 e utilizza:

$(function() {

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

});

Nota: live funziona con la maggior parte degli eventi, ma non tutti. C'è un elenco completo nella documentazione .

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 ASP.NET che viene eseguito ogni volta che la pagina viene caricata sul lato client.

La mia risposta?

function pageLoad() {

  $(document).ready(function(){

eccetera.

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

Vorrei utilizzare uno dei seguenti approcci:

1. Incapsula il binding di eventi in una funzione ed eseguilo ogni volta che aggiorni la pagina. È sempre possibile contenere l'evento che si associa a elementi specifici in modo da non associare più eventi agli stessi elementi.

2. Usa il plug-in livequery , che praticamente esegue il metodo uno per te in modo automatico. Le tue preferenze possono variare a seconda della quantità di controllo che desideri avere sul binding dell'evento.

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

});

La funzione pageLoad () è molto pericolosa da utilizzare in questa situazione. È possibile che gli eventi vengano collegati più volte. Vorrei anche stare lontano da .live () in quanto si collega all'elemento del documento e deve attraversare l'intera pagina (lenta e scadente).

La migliore soluzione che ho visto finora è usare la funzione jQuery .delegate () su un wrapper esterno al pannello di aggiornamento e fare uso del gorgogliamento. Oltre a ciò, puoi sempre collegare i gestori utilizzando la libreria Ajax di Microsoft, progettata per funzionare con UpdatePanels.

Quando $(document).ready(function (){...})non funziona dopo il post della pagina, utilizza la funzione JavaScript pageLoad in Asp.page come segue:

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

Ho avuto un problema simile e ho scoperto che il modo migliore per farlo era affidarmi al gorgogliamento degli eventi e alla delega degli eventi per gestirlo. La cosa bella della delega di eventi è che una volta installato, non è necessario ricollegare gli eventi dopo un aggiornamento AJAX.

Quello che faccio nel mio codice è impostare un delegato sull'elemento padre del pannello di aggiornamento. Questo elemento padre non viene sostituito in un aggiornamento e pertanto l'associazione di eventi non viene interessata.

Esistono numerosi buoni articoli e plug-in per gestire la delega degli eventi in jQuery e la funzione verrà probabilmente inserita nella versione 1.3. L'articolo / plugin che uso come riferimento è:

http://www.danwebb.net/2008/2/8/event-delegation-made-easy-in-jquery

Una volta capito cosa sta succedendo, penso che troverai una soluzione molto più elegante che è più affidabile del ricordare di ricollegare gli eventi dopo ogni aggiornamento. Ciò ha anche l'ulteriore vantaggio di offrirti un evento per separarti quando la pagina viene scaricata.

FWIW, ho riscontrato un problema simile con i mootools. Ricollegare i miei eventi è stata la mossa corretta, ma doveva essere eseguita alla fine della richiesta

var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function() {... 

Solo qualcosa da tenere a mente se beginRequest ti fa ottenere eccezioni JS di riferimento null.

Saluti

Questo è un ottimo plugin da utilizzare con i pannelli di aggiornamento:

http://updatepanelplugin.codeplex.com/

pageLoad = function () {
    $('#div').unbind();
    //jquery here
}

La funzione pageLoad è perfetta per questo caso poiché viene eseguita sul caricamento della pagina iniziale e su ogni postback asincrono di updatepanel. Ho dovuto solo aggiungere il metodo unbind per far funzionare jquery sui postback di updatepanel.

http://encosia.com/document-ready-and-pageload-are-not-the-same/

La mia risposta si basa su tutti i commenti degli esperti sopra, ma sotto è il seguente codice che chiunque può usare per assicurarsi che su ogni postback e su ogni postback asincrono il codice JavaScript verrà comunque eseguito.

Nel mio caso, avevo un controllo utente all'interno di una pagina. Basta incollare il codice seguente nel controllo utente.

<script type="text/javascript"> 
        var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_endRequest(EndRequestHandler);
    function EndRequestHandler(sender, args) {
        if (args.get_error() == undefined) {
            UPDATEPANELFUNCTION();
        }                   
    }

    function UPDATEPANELFUNCTION() {
        jQuery(document).ready(function ($) {
            /* Insert all your jQuery events and function calls */
        });
    }

    UPDATEPANELFUNCTION(); 

</script>

Il pannello di aggiornamento sostituisce sempre Jquery con gli script di Scriptmanager integrati dopo ogni caricamento. È meglio se usi i metodi di istanza di pageRequestManager come questo ...

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(onEndRequest)
    function onEndRequest(sender, args) {
       // your jquery code here
      });

funzionerà benissimo ...

Usa lo script seguente e modifica il corpo dello script di conseguenza.

       <script>
        //Re-Create for on page postbacks
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        prm.add_endRequest(function () {
           //your codes here!
        });
    </script>

In risposta alla risposta di Brian MacKay:

Inietto JavaScript nella mia pagina tramite ScriptManager invece di inserirlo direttamente nel codice HTML di UserControl. Nel mio caso, devo scorrere fino a un modulo reso visibile dopo che UpdatePanel è terminato e restituito. Questo va nel codice dietro il file. Nel mio esempio, ho già creato la variabile prm nella pagina del contenuto principale.

private void ShowForm(bool pShowForm) {
    //other code here...
    if (pShowForm) {
        FocusOnControl(GetFocusOnFormScript(yourControl.ClientID), yourControl.ClientID);
    }
}

private void FocusOnControl(string pScript, string pControlId) {
    ScriptManager.RegisterStartupScript(this.Page, this.Page.GetType(), "focusControl_" + pControlId, pScript, true);
}

/// <summary>
/// Scrolls to the form that is made visible
/// </summary>
/// <param name="pControlId">The ClientID of the control to focus on after the form is made visible</param>
/// <returns></returns>
private string GetFocusOnFormScript(string pControlId) {
    string script = @"
    function FocusOnForm() {
        var scrollToForm = $('#" + pControlId + @"').offset().top;
        $('html, body').animate({ 
            scrollTop: scrollToForm}, 
            'slow'
        );
        /* This removes the event from the PageRequestManager immediately after the desired functionality is completed so that multiple events are not added */
        prm.remove_endRequest(ScrollFocusToFormCaller);
    }
    prm.add_endRequest(ScrollFocusToFormCaller);
    function ScrollFocusToFormCaller(sender, args) {
        if (args.get_error() == undefined) {
            FocusOnForm();
        }
    }";
    return script;
}

Sys.Application.add_load(LoadHandler); //This load handler solved update panel did not bind control after partial postback
function LoadHandler() {
        $(document).ready(function () {
        //rebind any events here for controls under update panel
        });
}