Wie wird ein JavaScript-Callback nach einem Update-Panel-Postback ausgeführt?

Question

Ich benutze ein jQuery Tipp-Plugin, um Hilfe-Tipps anzuzeigen, wenn der Benutzer bestimmte Elemente der Seite bewegt.

Ich brauche die Plugin-Ereignisse zu registrieren, nachdem die Seite geladen CSS-Selektoren verwendet.

Das Problem ist, ich benutze ein ASP.NET Update Panel und nach dem ersten Postback, die Tipps aufhören zu arbeiten, weil das Update-Panel den Seiteninhalt ersetzt, aber nicht die JavaScript-Ereignisse neu.

Ich brauche einen Weg, um eine Javascript-Rückruf ausgeführt werden, nachdem das Update-Panel seinen Inhalt aktualisiert, so kann ich die Javascript-Ereignisse erneut binden die Tipps wieder zu arbeiten haben.

Gibt es eine Möglichkeit, dies zu tun? Diese

Answer 1

Statt setzen Ihre jQuery-Code innerhalb von $(document).ready(), legte es in

function pageLoad(sender, args) { 
    ... 
} 

pageLoad nach jedem Postbacks, synchron oder asynchron ausgeführt wird. pageLoad ist ein reservierter Funktionsname in ASP.NET AJAX, der für diesen Zweck verwendet wird. $(document).ready() wird dagegen nur einmal ausgeführt, wenn das DOM zu Beginn bereit/geladen ist.

Sehen Sie diese Overview of ASP.NET AJAX client lifecycle events

Answer 2

ist wahrscheinlich weit von der eleganteste Lösung, aber es ist eine Lösung dennoch:

public class UpdatePanel : System.Web.UI.UpdatePanel 
{ 
    /// <summary> 
    /// Javascript to be run when the updatepanel has completed updating 
    /// </summary> 
    [Description("Javascript to be run when the updatepanel has completed updating"), 
     Category("Values"), 
     DefaultValue(null), 
     Browsable(true)] 
    public string OnUpdateCompleteClientScript 
    { 
     get 
     { 
      return (string)ViewState["OnUpdateCompleteClientScript"]; 
     } 
     set 
     { 
      ViewState["OnUpdateCompleteClientScript"] = value; 
     } 
    } 

    protected override void OnPreRender(System.EventArgs e) 
    { 
     base.OnPreRender(e); 
     if(!string.IsNullOrEmpty(this.OnUpdateCompleteClientScript)) 
      Page.ClientScript.RegisterStartupScript(this.GetType(), this.ClientID, string.Concat("Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function(sender, args){for(var panelId in sender._updatePanelClientIDs){if(sender._updatePanelClientIDs[panelId] == '", this.ClientID, "'){", this.OnUpdateCompleteClientScript, "}}});"), true); 
    } 
} 

es wie folgt verwendet:

<uc:UpdatePanel OnUpdateCompleteClientScript="alert('update complete');"> 
    <!-- stuff in here --> 
</uc:UpdatePanel> 

Natürlich müssen Sie das benutzerdefinierte Steuerelement registrieren in youre webconfig oder Seite, um es so zu verwenden.

Edit: Außerdem haben Sie bei jquery.live? sah

Answer 3

Der pageload nicht funktionierte. Ich habe diese statt:

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

function pageLoaded() { 
} 

Answer 4

Wenn Sie bestimmte Operationen tun wollen vor und nach dem Update geladen ist, können Sie BeginPostbackRequest und EndPostbackRequest wie so überschrieben werden können:

var postbackControl = null; 
var updatePanels = null; 
var prm = Sys.WebForms.PageRequestManager.getInstance(); 
prm.add_beginRequest(BeginPostbackRequest); 
prm.add_endRequest(EndPostbackRequest); 

function BeginPostbackRequest(sender, args) { 
    prm._scrollPosition = null; 
    postbackControl = args.get_postBackElement(); 
    postbackControl.disabled = true; 
    updatePanels = args._updatePanelsToUpdate; 
    // do your stuff 
} 

function EndPostbackRequest(sender, args) { 
    // do your stuff 
    postbackControl.disabled = false; 
    postbackControl = null; 
    updatePanels = null; 
} 

Dies ist sehr praktisch, wenn Sie wollen um nur HTML zu verarbeiten, das vom Update-Panel geliefert wurde. Einige Operationen erfordern mehr Ressourcen und es wäre übertrieben, die gesamte DOM-Struktur unter pageLoad zu verarbeiten.

Answer 5

Verwenden pageloaded-Ereignis und prüfen, ob Rückruf oder Postbacks:

var prm = Sys.WebForms.PageRequestManager.getInstance(); 
prm.add_pageLoaded(function (sender, args) { 
    if (args._panelsUpdated && args._panelsUpdated.length > 0) { 
     //callback; 
    } 
    else { 
     //postback; 
    } 
});