[javascript] jQuery $ (documento) .ready e UpdatePanels?



8 Answers

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

Sto usando jQuery per collegare alcuni effetti mouseover su elementi che si trovano all'interno di un UpdatePanel. Gli eventi sono associati a $(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 ?




FWIW, ho riscontrato un problema simile con mootools. Riattaccare i miei eventi era la mossa corretta, ma doveva essere fatta 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




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 nella documentazione .




Quando $(document).ready(function (){...}) non funziona dopo il post della pagina, usa 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>



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



Pannello di aggiornamento sostituisce sempre il tuo Jquery con gli script di Scriptmanager incorporati 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à bene ...




La mia risposta?

function pageLoad() {

  $(document).ready(function(){

eccetera.

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




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

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

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




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

});



Related