Ereignisse in jQuery nach dem Ajax-Update neu anfügen (updatepanel)

Ich habe mehrere input-und option-Elemente auf meiner Seite, jede (naja fast) haben ein Ereignis angehängt update text auf der Seite, sobald Sie sich ändern. Ich benutze in jQuery-das ist wirklich, wirklich cool 🙂

Ich benutze auch Microsofts Ajax Rahmen mit dem UpdatePanel. Der Grund, warum ich das Tue, ist, dass bestimmte Elemente auf der Seite erstellt, basierend auf einige server-seitige Logik. Ich weiß nicht wirklich wollen, um zu erklären, warum ich das UpdatePanel - auch wenn es könnte sein (es kann mit einigem Aufwand) werden neu geschrieben, um nur jQuery möchte ich noch, dass UpdatePanel.

Man ahnt es schon - sobald ich einen postback auf dem UpdatePanel-die jQuery-events nicht mehr funktioniert. Ich war eigentlich davon ausgegangen, dass es, seit dem "postback" ist nicht wirklich eine neue postback also mein code im Dokument.bereit, bindet die Ereignisse nicht erneut ausgelöst. Ich bestätigte auch meinen Verdacht, durch Lesen in der jQuery-Bibliotheken helfen.

Trotzdem bin ich Links mit dem problem der neubindung meine Kontrollen nach dem UpdatePanel-erfolgt die Aktualisierung der DOM. Ich vorzugsweise eine Lösung, die nicht erfordert das hinzufügen von mehr .js-Dateien (jQuery-plugins) auf die Seite, aber so etwas einfach als in der Lage zu fangen, das UpdatePanel "afterupdating" wo kann ich nur meine Methode rebind alle Formular-Elemente.

InformationsquelleAutor der Frage Per Hornshøj-Schierbeck | 2008-11-19

  1. 83

    Da Sie mit ASP.NET AJAX, haben Sie Zugang zu einem pageLoad event-handler, der aufgerufen wird, jedes mal, wenn die Seite Beiträge zurück, sei es vollständig oder teilweise aus einem UpdatePanel. Sie müssen nur die Funktion in Ihrer Seite, kein Einhaken erforderlich ist.

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

    InformationsquelleAutor der Antwort Phil Jenkins

  2. 23

    Oder Sie könnten überprüfen die neueste jQuery-live-Funktionalität über die () Methode.

    InformationsquelleAutor der Antwort George

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

    InformationsquelleAutor der Antwort Paulius

  4. 14

    Als von jQuery 1.7, ist der empfohlene Weg, dies zu tun ist zu verwenden jQuery .auf() syntax.

    Stellen Sie jedoch sicher, dass Sie die Veranstaltung auf der Dokument Objekt, nicht das DOM-Objekt selbst. Zum Beispiel diese brechen nach dem UpdatePanel-postback:

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

    ... weil die ':Eingänge' geschrieben haben. Tun Sie dies:

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

    Solange das Dokument ist rund, alle Eingänge (auch die UpdatePanel aktualisiert) auslösen der change-handler.

    InformationsquelleAutor der Antwort lambinator

  5. 9

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

    InformationsquelleAutor der Antwort shatl

  6. 8

    Könnte man unter Verwendung der jQuery-und event delegation. Im Grunde Haken, Veranstaltungen, Behälter, als für jedes element und das Ereignis abzufragen.Ziel und Skript ausführen.

    Es hat mehrere Vorteile, Sie verringern die Lärm-code (keine Notwendigkeit, Sie zu binden). Es ist
    auch leichter auf browser-Speicher (weniger Ereignisse gebunden in die DOM.)

    Kurzes Beispiel hier.

    jQuery-plugin für easy event delegation.

    P. S ich bin 99% sicher, dass delegation wird in der jQuery core an der nächsten Version.

    InformationsquelleAutor der Antwort redsquare

  7. 5

    Den folgenden code verwenden, müssen Sie überprüfen das Steuerelement datapicker:

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

    InformationsquelleAutor der Antwort rocke_amiga

  8. 4

             <script type="text/javascript">
             function pageLoad() {

                 if (Sys.WebForms.PageRequestManager.getInstance().get_isInAsyncPostBack()) {


       }

            </script>

        </ContentTemplate>
    </asp:UpdatePanel>

    in der "wenn" kann man den code, den Sie ausführen jedes mal, dass das updatepanel nicht AsyncPostBack.

    InformationsquelleAutor der Antwort civanm

  9. 2

    Binden Sie Ihre Ereignisse mit Hilfe von jQuery die neue 'live' - Methode. Es wird binden von Ereignissen für alle Ihre gegenwärtigen Elemente und alle zukünftigen auch. Cha-ching! 🙂

    InformationsquelleAutor der Antwort John Strickler

Schreibe einen Kommentar