Running javascript from inside the update panel on every update

Question

I have an aspx page consisting of 3 user controls (ascx). I have an update panel that includes three user controls:

<asp:UpdatePanel ID="UpdatePanelWrapper" runat="server"> <ContentTemplate> <uc1:UserControl1 ID="UserControl1" runat="server" /> <uc2:UserControl2 ID="UserControl2" runat="server"/> <uc2:UserControl3 ID="UserControl3" runat="server"/> </ContentTemplate> </asp:UpdatePanel> 

I show each user control separately, so when "UserControl1" is displayed, the other 2 user controls are hidden.

Inside "UserControl1" I have some asp controls and some javascript functions. My problem is that these javascript functions are never called when updating "UpdatePanelWrapper".

I tried this solution http://blog.dreamlabsolutions.com/post/2009/02/24/jQuery-document-ready-and-ASP-NET-Ajax-asynchronous-postback.aspx , adding this javascript call inside "UserControl1 "although it doesn’t work. I did this only if I add this javascript call to the aspx page, but not inside "UserControl1".

Any help would be appreciated, thanks.

Answer 1

here is how you can do it ....

  <script type="text/javascript"> Sys.Application.add_init(appl_init); function appl_init() { var pgRegMgr = Sys.WebForms.PageRequestManager.getInstance(); pgRegMgr.add_endRequest(EndHandler); } function EndHandler() { // This will be called whenever your updatepanel update // It will be trigger after the update updatepanel //add your javascript here } </script> 

Answer 2

you can use

Sys.Application.add_load (WireEvents); // fix wiring for .NET ajax updatepanel

as

 <script language="javascript" type="text/javascript"> // <![CDATA[ Sys.Application.add_load(WireEvents); // fix wiring for .NET ajax updatepanel $(WireEvents); // handle page load wiring using jquery. This will fire on page load function WireEvents() { //do stuff here }; // ]]> </script> 

oh and one more thing. be careful with funciton names. otherwise it will be a mess. try something like this

 <script language="javascript" type="text/javascript"> // <![CDATA[ Sys.Application.add_load(WireEvents_<%=this.ID%>); // fix wiring for .NET ajax updatepanel $(WireEvents_<%=this.ID%>); // handle page load wiring function WireEvents_<%=this.ID%>() { };// end WireEvents_ // ]]> </script> 

so basically adding _<%=this.ID%> to the funciton name ensures that each instance of the control calls its own function. assuming you can have multiple instances of the control. If not at least it prevents confusion when calling wireevents for different controls

Answer 3

The scripts returned by UpdatePanel are not evaluated. If I understood correctly, you would like to perform some script operations that are returned in the UpdatePanel view.

If yes, I answered this question here:

asp.net eval script in ajax html answer

Answer 4

Ideally, all of your JavaScript should be at the bottom of your page before the closing </body> .

If you are using jQuery, you will need to use live () or delegate () to make sure that these event handlers are painted over even when the page is being refreshed.