如何有一个更新面板回发后执行的JavaScript回调?(How to have a javascr

2019-06-17 11:51发布

我使用一个jQuery插件提示显示帮助提示,当用户将鼠标悬停在页面的某些元素。

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

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

我需要一种方法更新面板刷新其内容后执行JavaScript回调,这样我就可以重新绑定JavaScript事件有再次合作的提示。

有没有办法做到这一点?

Answer 1:

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

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

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

看到这个的ASP.NET AJAX客户端生命周期事件概述



Answer 2:

该页面加载没有工作。 我用这个来代替:

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

function pageLoaded() {
}


Answer 3:

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

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?



Answer 4:

如果你想要做前后的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



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


文章来源: How to have a javascript callback executed after an update panel postback?