jQuery $ (document) .ready und UpdatePanels?

Ich verwende jQuery, um einige Mouseover-Effekte für Elemente in einem UpdatePanel zu verkabeln. Die Ereignisse sind eingebunden $(document).ready. Zum Beispiel:

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

Dies funktioniert natürlich beim ersten Laden der Seite einwandfrei, aber wenn das UpdatePanel eine teilweise Seitenaktualisierung durchführt, wird es nicht ausgeführt und die Mouseover-Effekte funktionieren im UpdatePanel nicht mehr.

Was ist der empfohlene Ansatz, um Dinge in jQuery nicht nur beim Laden der ersten Seite zu verkabeln, sondern jedes Mal, wenn ein UpdatePanel eine teilweise Seitenaktualisierung auslöst? Sollte ich stattdessen den ASP.NET Ajax-Lebenszyklus verwenden $(document).ready?

Ein UpdatePanel ersetzt den Inhalt des Update-Panels bei einem Update vollständig. Dies bedeutet, dass die von Ihnen abonnierten Ereignisse nicht mehr abonniert werden, da das Update-Fenster neue Elemente enthält.

Um dies zu umgehen, habe ich die Ereignisse, die ich nach jedem Update benötige, erneut abonniert. Ich verwende es $(document).ready()für das anfängliche Laden und verwende dann Microsoft PageRequestManager(verfügbar, wenn Sie ein Update-Panel auf Ihrer Seite haben), um jedes Update erneut zu abonnieren.

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

Das PageRequestManagerist ein JavaScript - Objekt , das automatisch zur Verfügung, wenn ein Update - Panel auf der Seite. Sie sollten nichts anderes als den obigen Code tun müssen, um ihn zu verwenden, solange sich das UpdatePanel auf der Seite befindet.

Wenn Sie eine detailliertere Steuerung benötigen, übergibt dieses Ereignis Argumente, die der Übergabe von .NET-Ereignissen ähneln, (sender, eventArgs)sodass Sie sehen können, was das Ereignis ausgelöst hat, und nur bei Bedarf erneut binden können.

Hier ist die neueste Version der Dokumentation von Microsoft: msdn.microsoft.com/.../bb383810.aspx

Eine bessere Option, die Sie je nach Ihren Anforderungen haben können, ist die Verwendung von jQuery's .on(). Diese Methoden sind effizienter als das erneute Abonnieren von DOM-Elementen bei jedem Update. Lesen Sie jedoch die gesamte Dokumentation, bevor Sie diesen Ansatz verwenden, da er möglicherweise Ihren Anforderungen entspricht oder nicht. Es gibt eine Menge von jQuery - Plugins , die auf refactor zu verwenden unangemessen wären , .delegate()oder .on()in den Fällen, so, du ist besser dran Wiederzeichn.

<script type="text/javascript">

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

Der Bereich, der aktualisiert werden soll.

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

Benutzersteuerung mit jQuery In einem UpdatePanel

Dies ist keine direkte Antwort auf die Frage, aber ich habe diese Lösung zusammengestellt, indem ich die Antworten gelesen habe, die ich hier gefunden habe, und ich dachte, jemand könnte sie nützlich finden.

Ich habe versucht, einen jQuery-Textbereichsbegrenzer in einem Benutzersteuerelement zu verwenden. Dies war schwierig, da das Benutzersteuerelement in einem UpdatePanel ausgeführt wird und beim Rückruf seine Bindungen verloren hat.

Wenn dies nur eine Seite wäre, wären die Antworten hier direkt zutreffend gewesen. Benutzersteuerelemente hatten jedoch weder direkten Zugriff auf das Head-Tag noch direkten Zugriff auf das UpdatePanel, wie einige der Antworten annehmen.

Am Ende habe ich diesen Skriptblock ganz oben im Markup meines Benutzersteuerelements platziert. Für die anfängliche Bindung wird $ (document) .ready verwendet, und dann wird prm.add_endRequest von dort verwendet:

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

Also ... Ich dachte nur, jemand möchte vielleicht wissen, dass das funktioniert.

Aktualisieren Sie auf jQuery 1.3 und verwenden Sie:

$(function() {

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

});

Hinweis: Live funktioniert mit den meisten Ereignissen, aber nicht mit allen. Die Dokumentation enthält eine vollständige Liste .

Sie könnten auch versuchen:

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

, da pageLoad () ein ASP.NET-Ajax-Ereignis ist, das jedes Mal ausgeführt wird, wenn die Seite auf der Clientseite geladen wird.

Meine Antwort?

function pageLoad() {

  $(document).ready(function(){

usw.

Arbeitete wie ein Zauber, bei dem eine Reihe anderer Lösungen kläglich scheiterten.

Ich würde einen der folgenden Ansätze verwenden:

1. Kapseln Sie die Ereignisbindung in eine Funktion und führen Sie sie jedes Mal aus, wenn Sie die Seite aktualisieren. Sie können die Ereignisbindung immer an bestimmte Elemente enthalten, um Ereignisse nicht mehrmals an dieselben Elemente zu binden.

2. Verwenden Sie das Livequery- Plug-In, das die erste Methode für Sie automatisch ausführt. Ihre Präferenz kann abhängig von der Kontrolle variieren, die Sie über die Ereignisbindung haben möchten.

Das hat bei mir funktioniert:

$(document).ready(function() {

    // Do something exciting

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

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

});

Die Funktion pageLoad () ist in dieser Situation sehr gefährlich. Es kann vorkommen, dass Ereignisse mehrmals verkabelt werden. Ich würde mich auch von .live () fernhalten, da es an das Dokumentelement angehängt wird und die gesamte Seite durchlaufen muss (langsam und beschissen).

Die beste Lösung, die ich bisher gesehen habe, ist die Verwendung der Funktion jQuery .delegate () auf einem Wrapper außerhalb des Update-Panels und die Verwendung von Bubbling. Abgesehen davon können Sie die Handler jederzeit mithilfe der Ajax-Bibliothek von Microsoft verkabeln, die für die Verwendung mit UpdatePanels entwickelt wurde.

Wenn Sie $(document).ready(function (){...})nach dem Zurücksenden der Seite nicht arbeiten, verwenden Sie die JavaScript-Funktion pageLoad in Asp.page wie folgt:

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

Ich hatte ein ähnliches Problem und fand, dass es am besten funktionierte, sich auf Event Bubbling und Event Delegation zu verlassen, um es zu lösen. Das Schöne an der Ereignisdelegierung ist, dass Sie nach dem Einrichten keine Ereignisse nach einem AJAX-Update erneut binden müssen.

In meinem Code richte ich einen Delegaten für das übergeordnete Element des Aktualisierungsfensters ein. Dieses übergeordnete Element wird bei einer Aktualisierung nicht ersetzt, und daher ist die Ereignisbindung nicht betroffen.

Es gibt eine Reihe guter Artikel und Plugins für die Ereignisdelegierung in jQuery, und die Funktion wird wahrscheinlich in die Version 1.3 integriert. Der Artikel / das Plugin, das ich als Referenz verwende, ist:

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

Wenn Sie erst einmal verstanden haben, was passiert, werden Sie feststellen, dass dies eine viel elegantere Lösung ist, die zuverlässiger ist, als daran zu denken, Ereignisse nach jedem Update erneut zu binden. Dies hat auch den zusätzlichen Vorteil, dass Sie ein Ereignis zum Aufheben der Bindung erhalten, wenn die Seite entladen wird.

FWIW, ich hatte ein ähnliches Problem mit Mootools. Das erneute Anhängen meiner Ereignisse war der richtige Schritt, musste jedoch am Ende der Anfrage erfolgen

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

Nur etwas, das Sie beachten sollten, wenn beginRequest dazu führt, dass Sie JS-Ausnahmen mit Nullreferenz erhalten.

Prost

Dies ist ein großartiges Plugin zur Verwendung mit Update-Panels:

http://updatepanelplugin.codeplex.com/

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

Die pageLoad-Funktion ist in diesem Fall perfekt, da sie beim ersten Laden der Seite und bei jedem asynchronen Postback des Updatepanels ausgeführt wird. Ich musste nur die Unbind-Methode hinzufügen, damit die Abfrage bei Updatepanel-Postbacks funktioniert.

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

Meine Antwort basiert auf allen Expertenkommentaren oben, aber unten ist der folgende Code, mit dem jeder sicherstellen kann, dass bei jedem Postback und bei jedem asynchronen Postback der JavaScript-Code weiterhin ausgeführt wird.

In meinem Fall hatte ich ein Benutzersteuerelement innerhalb einer Seite. Fügen Sie einfach den folgenden Code in Ihr Benutzersteuerelement ein.

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

Das Update Panel ersetzt Ihre JQuery nach jedem Laden durch die Skripte des eingebauten Scriptmanagers. Es ist besser, wenn Sie die Instanzmethoden von pageRequestManager wie diese verwenden ...

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

es wird gut funktionieren ...

Verwenden Sie das folgende Skript und ändern Sie den Hauptteil des Skripts entsprechend.

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

Als Antwort auf Brian MacKays Antwort:

Ich füge das JavaScript über den ScriptManager in meine Seite ein, anstatt es direkt in den HTML-Code des UserControl einzufügen. In meinem Fall muss ich zu einem Formular scrollen, das sichtbar wird, nachdem das UpdatePanel abgeschlossen und zurückgegeben wurde. Dies geht in den Code hinter der Datei. In meinem Beispiel habe ich die PRM- Variable bereits auf der Hauptinhaltsseite erstellt.

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