Ereignisse in jQuery nach Ajax-Update neu binden (updatepanel)

Ich habe mehrere Eingabe- und Optionselemente auf meiner Seite, von denen jedes (naja fast) ein Ereignis angehängt hat, um einen Text auf der Seite zu aktualisieren, sobald sie sich ändern. Ich benutze jQuery, was wirklich sehr cool ist 🙂

Ich benutze auch Microsofts Ajax Framework unter Verwendung des UpdatePanel. Der Grund dafür ist, dass bestimmte Elemente auf der Seite basierend auf einer serverseitigen Logik erstellt werden. Ich möchte nicht wirklich erklären, warum ich das UpdatePanel verwende – auch wenn es (mit einigem Aufwand) umgeschrieben werden könnte, um es nur zu verwenden jQuery Ich möchte immer noch das UpdatePanel.

Sie haben es wahrscheinlich erraten – sobald ich ein Postback im UpdatePanel habe, funktionieren die jQuery-Ereignisse nicht mehr. Ich hatte das eigentlich erwartet, da das “Postback” nicht wirklich ein neues Postback ist, sodass mein Code in document.ready, der die Ereignisse bindet, nicht erneut ausgelöst wird. Ich habe meinen Verdacht auch bestätigt, indem ich in den jQuery-Hilfebibliotheken nachgelesen habe.

Wie auch immer, ich habe das Problem, meine Steuerelemente neu zu binden, nachdem das UpdatePanel die Aktualisierung abgeschlossen hat Dom. Ich brauche vorzugsweise eine Lösung, bei der der Seite keine weiteren .js-Dateien (jQuery-Plug-Ins) hinzugefügt werden müssen, sondern etwas so Einfaches wie die Möglichkeit, das „afterupdating“ des UpdatePanels abzufangen, wo ich einfach meine Methode aufrufen kann, um alle Formularelemente neu zu binden .

Da Sie ASP.NET AJAX verwenden, haben Sie Zugriff auf a pageLoad Ereignishandler, der jedes Mal aufgerufen wird, wenn die Seite zurückgesendet wird, sei es vollständig oder teilweise von einem UpdatePanel. Sie müssen nur die Funktion in Ihre Seite einfügen, es ist kein Anschluss erforderlich.

function pageLoad(sender, args)
{
   if (args.get_isPartialLoad())
   {
       //Specific code for partial postbacks can go in here.
   }
}

Oder Sie können die Live-Funktionalität der neuesten jQuery über die überprüfen on() Methode.

Sys.Application.add_load(initSomething);
function initSomething()
{
  // will execute on load plus on every UpdatePanel postback
}

Ab jQuery 1.7 ist die empfohlene Methode hierfür die Verwendung von jQuerys .on() Syntax.

Stellen Sie jedoch sicher, dass Sie das Ereignis auf dem einrichten dokumentieren Objekt, nicht das DOM-Objekt selbst. Beispielsweise, Dies wird nach dem UpdatePanel-Postback unterbrochen:

$(':input').on('change', function() {...});

… weil die ‘:inputs’ umgeschrieben wurden. Tun Sie dies stattdessen:

$(document).on('change', ':input', function() {...});

Solange das Dokument vorhanden ist, lösen alle Eingaben (einschließlich derjenigen von UpdatePanel-Aktualisierungen) den Änderungshandler aus.

Verwenden Sie folgenden Code

Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoaded);

function pageLoaded(sender, args) {
    var updatedPanels = args.get_panelsUpdated();
    // check if Main Panel was updated 
    for (idx = 0; idx < updatedPanels.length; idx++) {
        if (updatedPanels[idx].id == "<%=upMain.ID %>") {
            rebindEventsForMainPanel();
            break;
        }
    }
}

Sie könnten jQuery und Ereignisdelegierung verwenden. Verknüpfen Sie Ereignisse im Grunde eher mit Containern als mit jedem Element und fragen Sie das event.target ab und führen Sie ein darauf basierendes Skript aus.

Es hat mehrere Vorteile, da Sie das Coderauschen reduzieren (kein erneutes Binden erforderlich). Es ist auch einfacher für den Browserspeicher (weniger Ereignisse, die im DOM gebunden sind.)

Schnelles Beispiel Hier.

jQuery-Plugin für die einfache Delegierung von Ereignissen.

PS Ich bin mir zu 99 % sicher, dass die Delegierung in der nächsten Version im jQuery-Kern enthalten sein wird.

Verwenden Sie den folgenden Code, Sie müssen validieren, dass das Steuerelement den Datapicker verwendet:

    <script type="text/javascript" language="javascript">

         Sys.WebForms.PageRequestManager.getInstance().add_endRequest(addDataPicker); 
         function addDataPicker(sender, args)
         {
            var fchFacturacion = document.getElementById('<%= txtFechaFacturacion.ClientID %>');
            if (fchFacturacion != null) {
               $(fchFacturacion).datepicker({ onSelect: function () { }, changeMonth: true, changeYear: true, showOn: 'button', buttonImage: '../Imagenes/calendar.gif', buttonImageOnly: true});}
         } 

    </script>

     <asp:UpdatePanel ID="upEjem" runat="server" UpdateMode="Conditional">
       <ContentTemplate>
              <div id="div1" runat="server" visible="false">
                  <input type="text" id="txtFechaFacturacion" 
                      name="txtFechaFacturacion" visible="true"
                      readonly="readonly" runat="server" />
              </div>
       </ContentTemplate>
     </asp:UpdatePanel>