パネルポストバックの更新後にjavascriptコールバックを実行するにはどうすればよいですか？

Question

jQueryのヒントプラグインを使用して、ユーザーがページの特定の要素を移動したときにヘルプヒントを表示しています。

CSSセレクタを使用してページを読み込んだ後で、プラグインイベントを登録する必要があります。

問題は、ASP.NETの更新パネルを使用していて、最初のポストバックの後に、更新パネルがページの内容を置き換えますが、JavaScriptイベントを再バインドしないため、ヒントが機能しなくなることです。

更新パネルでコンテンツが更新された後にjavascriptコールバックを実行する方法が必要なので、javascriptイベントを再バインドしてヒントを再現できます。

これを行う方法はありますか？

Answer 1

見てきましたが、同期または非同期、すべてのポストバック後に実行されます。 pageLoadは、この目的のためのASP.NET AJAXの予約済み関数名です。一方、$(document).ready()は、DOMが最初に準備完了/ロードされているときに1回だけ実行されます。

はpageLoadは動作しませんでした。このOverview of ASP.NET AJAX client lifecycle events

Answer 2

これは、それにもかかわらず、これまでで最もエレガントなソリューションから、おそらくですが、その解決策：カスタムコントロールを登録する必要があります。もちろん、

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

：

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

はこのようにそれを使用しますyoureのwebconfigやページでこれを使用してください。

編集：また、あなたは

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

pageLoad内に置く代わりに、$(document).ready()の内側にあなたのjQueryのコードを置くことjquery.live?

Answer 3

を参照してください。あなたはUpdatePanelのがロードされる前と後に特定の操作を実行したい場合は、あなたがBeginPostbackRequestとEndPostbackRequestなどを上書きすることができ

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

function pageLoaded() { 
} 

Answer 4

ので：私の代わりにこれを使用したい場合は

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

これは非常に便利です更新パネルによって配信されたHTMLのみを処理します。 DOMツリー全体をpageLoadで処理するには、より多くのリソースを必要とする操作や、過剰な処理が必要な操作があります。

Answer 5

使用pageLoadedイベントとコールバックやポストバックかどうかを確認します。

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