javascript cshtml run - jQuery $ (documento) .ready e UpdatePanels?





9 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>
partial view section

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 ?




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 .




La mia risposta?

function pageLoad() {

  $(document).ready(function(){

eccetera.

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




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

});



function pageLoad () è molto pericoloso da usare in questa situazione. Potresti avere eventi collegati più volte. Vorrei anche stare lontano da .live () mentre si collega all'elemento del documento e deve attraversare l'intera pagina (lento e schifoso).

La soluzione migliore che ho visto finora è usare la funzione jQuery .delegate () su un wrapper al di fuori del pannello di aggiornamento e fare uso di bubbling. Altrimenti, è sempre possibile collegare i gestori usando la libreria Ajax di Microsoft, progettata per funzionare con UpdatePanel.




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




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/




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




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



Related