blocks|key|1499992|text|这可能远不是最优雅的解决方案，但它仍然是一个解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1499993|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);
++++}
}|code-block|syntax|javascript|1499994|像这样使用它：|1499995|<uc:UpdatePanel+OnUpdateCompleteClientScript="alert('update+complete');">
++++
</uc:UpdatePanel>|1499996|当然，您需要在您的use配置或页面中注册自定义控件才能像这样使用它。|1499997|编辑:还有，你看过jquery.live?吗？|offset|length|1499998|entityMap|0|LINK|mutability|MUTABLE|url|http://docs.jquery.com/Events/live^0|0|0|0|0|0|9|C|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|10|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|12|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|13|8|@]|9|@$O|14|P|15|1|16]]|A|$]]|$1|Q|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

This is probably far from the most elegant solution, but its a solution nonetheless:

<pre><code>public class UpdatePanel : System.Web.UI.UpdatePanel
{
 /// &lt;summary&gt;
 /// Javascript to be run when the updatepanel has completed updating
 /// &lt;/summary&gt;
 [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);
 }
}
</code></pre>

Use it like this:

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

Of course you'll need to register the custom control in youre webconfig or page to use it like this.

Edit: also, have you looked at <a href="http://docs.jquery.com/Events/live" rel="noreferrer">jquery.live?</a>

blocks|key|1500092|text|与其将jQuery代码放在$(document).ready()中，不如把它放在里面|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1500093|function+pageLoad(sender,+args)+{+
++++...+
}|code-block|syntax|javascript|1500094|pageLoad在每次回发后执行，无论是同步的还是异步的。pageLoad是ASP.NET+AJAX中用于此目的的保留函数名称。另一方面，$(document).ready()只在DOM初始就绪/加载时执行一次。|1500095|查看此Overview+of++ASP.NET+AJAX+client+lifecycle+events|1500096|entityMap|0|LINK|mutability|MUTABLE|url|http://msdn.microsoft.com/en-us/library/bb386417.aspx^0|D|J|0|0|0|8|T|8|1X|J|0|3|1D|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|Z|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|10|8|@$9|11|A|12|B|C]|$9|13|A|14|B|C]|$9|15|A|16|B|C]]|D|@]|E|$]]|$1|M|3|N|5|6|7|17|8|@]|D|@$9|18|A|19|1|1A]]|E|$]]|$1|O|3|-4|5|6|7|1B|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]]]

Instead of putting your jQuery code inside of <code>$(document).ready()</code>, put it inside 

<pre><code>function pageLoad(sender, args) { 
 ... 
}
</code></pre>

<code>pageLoad</code> is executed after every postback, synchronous or asynchronous. <code>pageLoad</code> is a reserved function name in ASP.NET AJAX that is for this purpose. <code>$(document).ready()</code> on the other hand, is executed only once, when the DOM is initially ready/loaded.

See this <a href="http://msdn.microsoft.com/en-us/library/bb386417.aspx" rel="noreferrer">Overview of ASP.NET AJAX client lifecycle events</a>

blocks|key|1285232|text|pageLoad不工作。我使用了下面的代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1285233|var+prm+=+Sys.WebForms.PageRequestManager.getInstance();
prm.add_pageLoaded(pageLoaded);

function+pageLoaded()+{
}|code-block|syntax|javascript|1285234|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

The pageLoad didn't work. I used this instead:

<pre><code>var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_pageLoaded(pageLoaded);

function pageLoaded() {
}
</code></pre>

blocks|key|1500155|text|如果您想在加载UpdatePanel之前和之后执行特定操作，您可以覆盖BeginPostbackRequest和EndPostbackRequest，如下所示：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1500156|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;
}|code-block|syntax|javascript|1500157|如果您只想处理由更新面板提供的HTML，这是非常方便的。有些操作需要更多的资源，在pageLoad上处理整个DOM树太过分了。|1500158|entityMap^0|Z|K|1K|I|0|0|15|8|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|M|3|-4|5|6|7|X|8|@]|D|@]|E|$]]]|N|$]]

If you want to do specific operations before and after the UpdatePanel has loaded, you can override <code>BeginPostbackRequest</code> and <code>EndPostbackRequest</code> like so: 

<pre><code>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;
}
</code></pre>

This is very handy if you want to process only HTML that was delivered by the update panel. Some operations require more resources and it would be overkill to process the whole DOM tree on <code>pageLoad</code>.

blocks|key|1285327|text|使用pageLoaded事件，检查是回调还是回发：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1285328|var+prm+=+Sys.WebForms.PageRequestManager.getInstance();
prm.add_pageLoaded(function+(sender,+args)+{
++++if+(args._panelsUpdated+&&+args._panelsUpdated.length+>+0)+{
++++++++//callback;
++++}
++++else+{
++++++++//postback;
++++}
});|code-block|syntax|javascript|1285329|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Use pageLoaded event and check whether callback or postback:

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

I'm using a jQuery tip plugin to show help tips when the user hovers certain elements of the page.

I need to register the plugin events after the page is loaded using css selectors.

The problem is I'm using an ASP.NET Update Panel and after the first postback, the tips stop working because the update panel replaces the page content but doesn't rebind the javascript events.

I need a way to execute a javascript callback after the Update Panel refreshes its content, so I can rebind the javascript events to have the tips working again.

Is there any way to do this?

How to have a javascript callback executed after an update panel postback?

jQuery

当用户悬停页面的某些元素时，我使用一个jQuery提示插件来显示帮助提示。我需要注册插件事件后，页面加载使用css选择器。问题是我正在使用ASP.NET更新面板，在第一次回发之后，提示停止工作，因为更新面板会替换页面内容，但不会重新绑定javascript事件。我需要一种在更新面板刷新其内容后执行javascript回...

问如何在更新面板回发后执行javascript回调？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在更新面板回发后执行javascript回调？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在更新面板回发后执行javascript回调？
EN