web-dev-qa-db-ja.com

更新パネルのポストバック後にjavascriptコールバックを実行する方法は？

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

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

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

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

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

javascriptasp.net-ajaxupdatepanelcallback
70
tsbnunes

JQueryコードを$(document).ready()内に配置する代わりに、内部に配置します

_function pageLoad(sender, args) { 
    ... 
}
_

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

こちらをご覧ください ASP.NETの概要AJAXクライアントライフサイクルイベント

163
Russ Cam

PageLoadは機能しませんでした。代わりにこれを使用しました：

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

function pageLoaded() {
}
19
rball

これはおそらく最もエレガントなソリューションとはほど遠いでしょうが、それでもそのソリューションは次のとおりです。

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

次のように使用します。

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

もちろん、このように使用するには、webconfigまたはページにカスタムコントロールを登録する必要があります。

編集：また、 jquery.live? を見ましたか？

12
Andrew Bullock

PageLoadedイベントを使用して、コールバックまたはポストバックを確認します。

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

UpdatePanelがロードされる前後に特定の操作を行いたい場合、次のようにBeginPostbackRequestとEndPostbackRequestをオーバーライドできます。

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のみを処理する場合に非常に便利です。一部の操作にはより多くのリソースが必要であり、pageLoadでDOMツリー全体を処理するのはやり過ぎです。

0
modiX