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

javascript asp.net-ajax updatepanel callback
tsbnunes picture tsbnunes · Jul 20, 2009 · Viewed 67.7k times · Source

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?

Answer

Russ Cam picture Russ Cam · Jul 20, 2009

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

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

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

See this Overview of ASP.NET AJAX client lifecycle events

Related questions

TinyMCE with AJAX (Update Panel) never has a value

I wanted to use a Rich Text Editor for a text area inside an update panel. I found this post: http://www.queness.com/post/212/10-jquery-and-non-jquery-javascript-rich-text-editors via this question: Need ASP.Net/MVC Rich Text Editor Decided to go with …

Read More
ASP.NET Register Script After Partial Page Postback (UpdatePanel)

I have a simple form (textbox, submit button) which is wrapped in an update panel. <asp:UpdatePanel ID="ReplyUpdatePanel" UpdateMode="Conditional" runat="server"> <ContentTemplate> <asp:Textbox id="ReplyTextBox" runat="server"/> <asp:Button id="…

Read More
jQuery $(document).ready and UpdatePanels?

I'm using jQuery to wire up some mouseover effects on elements that are inside an UpdatePanel. The events are bound in $(document).ready . For example: $(function() { $('div._Foo').bind("mouseover", function(e) { // Do something exciting }); }); Of course, this works fine …

Read More