Execute javascript from inside update panel on every refresh

Question

I have an aspx page which is made of 3 user controls (ascx). I have an update panel wrapping the 3 user controls like this:

<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 by separate, 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 "UpdatePanelWrapper" is refreshed.

I have tried this solution http://blog.dreamlabsolutions.com/post/2009/02/24/jQuery-document-ready-and-ASP-NET-Ajax-asynchronous-postback.aspx, by adding that javascript call inside the "UserControl1", though it's not working. I made it work only if I add that javascript call in the aspx page, but not inside the "UserControl1".

Any help would be appreciated, Thank you.

Answer 1

here is how can you do this....

 <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

like

<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. do be careful with the funciton names. otherwise it'll 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 is calling it's own function. assuming you can have multiple instances of the control. If not at least it prevents the confusion when calling wireevents for different controls