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


72

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

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

问题是我使用的是ASP.NET更新面板,并且在第一次回发之后,提示不再起作用,因为更新面板会替换页面内容,但不会重新绑定javascript事件。

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

有什么办法吗?

Answers:


169

与其将jQuery代码放入其中$(document).ready(),不如将其放入

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

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

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


4
感谢您的回答。我不知道有一个客户端pageLoad事件,而这正是我所需要的。问题解决了。:)
tsbnunes

我也不知道,有用!请记住,我怀疑页面上的所有UP都会发生这种情况,您需要具体指定我的clientid过滤器
Andrew Bullock

+1 FTW!我也不知道这种情况的存在,而这正是我要解决的问题!大ups @ Russ Cam!
隆达

我的页面上有2个更新面板。有没有办法知道哪个Update Panel导致pageLoad内部的异步刷新?
emzero 2011年

1
谢谢伙伴,它解决了我的问题,因为我在Evey页面的JQuery上有更新面板。对我来说,它像魔术一样起作用。感谢一吨
Sumit Gupta

19

pageLoad无效。我改用这个:

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

function pageLoaded() {
}

2
如果由于调用脚本而未定义Sys ID,则在脚本管理器脚本加载之前。通常在<head>中,而scriptmanger的内容加载在<body>中-是的,我知道,对吧?只需将您的脚本移动到页面或控件的底部,它将在可接受的答案范围内正常工作。
Piotr Kula 2015年

12

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

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?


1
自定义更新面板用户控件对于我的问题来说是过高的,但是我不知道jquery.live方法,它可能可以解决我的问题!但是在这种情况下,我认为Russ Cam提出的解决方案更好,并且我已经尝试过并且效果很好。谢谢你的帮助。:)
tsbnunes

必须有一个更简单的方法..?
HasanG

0

如果要在加载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,这将非常方便。某些操作需要更多资源,因此在上处理整个DOM树可能会过大pageLoad


0

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

var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_pageLoaded(function (sender, args) {
    if (args._panelsUpdated && args._panelsUpdated.length > 0) {
        //callback;
    }
    else {
        //postback;
    }
});
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.