如何在更新面板回发后执行 javascript 回调?

IT技术 javascript asp.net-ajax updatepanel callback
2021-02-15 05:17:59

当用户悬停页面的某些元素时,我正在使用 jQuery 提示插件来显示帮助提示。

我需要在使用 css 选择器加载页面后注册插件事件。

问题是我使用的是 ASP.NET 更新面板,在第一次回发后,提示停止工作,因为更新面板替换了页面内容但没有重新绑定 javascript 事件。

我需要一种在更新面板刷新其内容后执行 javascript 回调的方法,以便我可以重新绑定 javascript 事件以使提示再次工作。

有没有办法做到这一点?

5个回答

不要把你的 jQuery 代码放在 里面,而是$(document).ready()把它放在里面

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

pageLoad在每次回发后执行,同步或异步。pageLoad是 ASP.NET AJAX 中用于此目的的保留函数名称。$(document).ready()另一方面,当 DOM 最初准备好/加载时只执行一次。

请参阅此ASP.NET AJAX 客户端生命周期事件概述

感谢您的回答。我不知道有客户端 pageLoad 事件,而这正是我所需要的。问题解决了。:)
2021-04-19 05:17:59
我也不知道,有用!请记住,我怀疑页面上的所有 UP 都会发生这种情况,您需要特定的 clientid 过滤器
2021-04-24 05:17:59
我的页面中有 2 个更新面板。有没有办法知道哪个更新面板导致 pageLoad 内的异步刷新?
2021-05-05 05:17:59
+1 FTW!我也不知道这存在,这正是我正在寻找的解决我的问题的方法!大起大落@Russ Cam!
2021-05-08 05:17:59
谢谢伙计,它解决了我的问题,因为我在每个页面上都有 JQuery 更新面板。它对我来说就像一个魔术。万分感谢
2021-05-08 05:17:59

pageLoad 不起作用。我用这个代替:

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

function pageLoaded() {
}
如果未定义 Sys id 是因为您正在调用脚本,则在加载脚本管理器脚本之前。通常在 <head> 中,而脚本管理器的东西在 <body> 中加载 - 是的,我知道,对吧?!只需将您的脚本移动到页面底部或您的控件,它就会与接受的答案一起正常工作。
2021-04-22 05:17:59

这可能远不是最优雅的解决方案,但它仍然是一个解决方案:

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

自定义更新面板用户控件对我的问题来说太过分了,但我不知道 jquery.live 方法,它可能会工作并解决我的问题!但在这种情况下,我认为 Russ Cam 提出的解决方案更好,我已经尝试过并且效果很好。谢谢你的帮助。:)
2021-04-29 05:17:59
一定有更简单的方法..?
2021-05-11 05:17:59

如果你想在 UpdatePanel 加载之前和之后做特定的操作,你可以像这样覆盖BeginPostbackRequestEndPostbackRequest

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.

使用 pageLoaded 事件并检查是否回调或回发:

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