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
?
javascript
jquery
asp.net
asp.net-ajax
jquery-events
Herb Caudill
quelle
quelle
Antworten:
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 MicrosoftPageRequestManager
(verfügbar, wenn Sie ein Update-Panel auf Ihrer Seite haben), um jedes Update erneut zu abonnieren.Das
PageRequestManager
ist 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.quelle
.delegate()
wurde von der.on()
.live(...)
die in 1.7 offiziell veraltet ist und in einer zukünftigen Version möglicherweise entfernt wird. Ich habe mich absichtlich dafür entschieden,.delegate()
da es seit einiger Zeit in jQuery unterstützt wird und wahrscheinlich nicht so bald entfernt wird. Ich werde jedoch meine Antwort aktualisieren, um sie.on()
auch für diejenigen zu erwähnen , die sie verwenden können.jQuery.delegate()
mehr zu verwenden. Es wurde ersetzt,jQuery.on()
welche API bevorzugt verwendet werden soll.delegate()
ist einfach ein Wrapper für eine bestimmte Verwendung vonon()
, und es ist möglich, dass es in Zukunft veraltet sein wird. Mein vorheriger Kommentardelegate()
wurde vor über einem Jahr geschrieben, als jQuery 1.7 (mit dem dieon()
API eingeführt wurde) neu veröffentlicht wurde. Da jQuery 1.9 bereitsdelegate()
verfügbar ist und 2.0 in der Beta für die Veröffentlichung vorbereitet ist, ist es eine gute Idee, die Verwendung in neuem Code zu vermeiden .Der Bereich, der aktualisiert werden soll.
quelle
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:
Also ... Ich dachte nur, jemand möchte vielleicht wissen, dass das funktioniert.
quelle
Aktualisieren Sie auf jQuery 1.3 und verwenden Sie:
Hinweis: Live funktioniert mit den meisten Ereignissen, aber nicht mit allen. Die Dokumentation enthält eine vollständige Liste .
quelle
live()
Ich habe gerade einen schwerwiegenden Fehler bei der Verwendung der Methode in IE7 gefunden (jQuery 1.5.1 / VS2010-Projekt). Bei der Verwendung vonlive()
in in einem Update v3.5 ASP.NET regelmäßigAutoPostback
von<asp:DropDownList />
Ursachen 2 partielle Postbacks in Bezug auf die erwarteten 1. Die zusätzlichen Postbacks durch den Browser ausgegeben Gegensatz fehlen den Inhalt (abgebrochen) verursachen diePage.IsPostBack
zu seinfalse
(welcher Zustand in meiner Schranke tötet Kontrollen). Ich fand den Täter live (). Mir ist klar, dass das erste Postback von UpdatePanel pro Spezifikation abgebrochen werden muss, aber nur, wenn es ein anderes in der Warteschlange gibt, das es nicht gibt.Sie könnten auch versuchen:
, da pageLoad () ein ASP.NET-Ajax-Ereignis ist, das jedes Mal ausgeführt wird, wenn die Seite auf der Clientseite geladen wird.
quelle
Meine Antwort?
usw.
Arbeitete wie ein Zauber, bei dem eine Reihe anderer Lösungen kläglich scheiterten.
quelle
Ich würde einen der folgenden Ansätze verwenden:
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.
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.
quelle
Das hat bei mir funktioniert:
quelle
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.
quelle
Wenn Sie
$(document).ready(function (){...})
nach dem Zurücksenden der Seite nicht arbeiten, verwenden Sie die JavaScript-Funktion pageLoad in Asp.page wie folgt:quelle
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.
quelle
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
Nur etwas, das Sie beachten sollten, wenn beginRequest dazu führt, dass Sie JS-Ausnahmen mit Nullreferenz erhalten.
Prost
quelle
Dies ist ein großartiges Plugin zur Verwendung mit Update-Panels:
http://updatepanelplugin.codeplex.com/
quelle
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/
quelle
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.
quelle
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 ...
es wird gut funktionieren ...
quelle
Verwenden Sie das folgende Skript und ändern Sie den Hauptteil des Skripts entsprechend.
quelle
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.
quelle
quelle