如何在更新面板回发后执行javascriptcallback?
我使用jQuery提示插件来显示帮助提示,当用户hover页面的某些元素。
我需要使用cssselect器加载页面后注册插件事件。
问题是我正在使用ASP.NET更新面板和第一次回发后,提示停止工作,因为更新面板replace页面内容,但不重新绑定JavaScript事件。
我需要一种方法来执行一个JavaScriptcallback后更新面板刷新其内容,所以我可以重新绑定的JavaScript事件,使技巧再次工作。
有没有办法做到这一点?
不要把你的jQuery代码放在$(document).ready()
里面,而是放在里面
function pageLoad(sender, args) { ... }
pageLoad
在每次回发,同步或asynchronous之后执行。 pageLoad
是ASP.NET AJAX中用于此目的的保留函数名称。 另一方面, $(document).ready()
只在DOM最初准备好/加载时执行一次。
请参阅ASP.NET AJAX客户端生命周期事件概述
pageLoad不起作用。 我用这个来代替:
var prm = Sys.WebForms.PageRequestManager.getInstance(); prm.add_pageLoaded(pageLoaded); function pageLoaded() { }
这可能远不是最优雅的解决scheme,但它的一个解决scheme:
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?
如果你想在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树是矫枉过正的。
使用pageLoaded事件并检查callback或回发:
var prm = Sys.WebForms.PageRequestManager.getInstance(); prm.add_pageLoaded(function (sender, args) { if (args._panelsUpdated && args._panelsUpdated.length > 0) { //callback; } else { //postback; } });