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.

score 11 · Accepted Answer · edited May 23 '14 at 12:49

11

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>

edited May 23 '14 at 12:49

Turnip

35,836
15
89
111

answered May 17 '11 at 04:39

Muhammad Akhtar

51,913
37
138
191

Thanks, this is the way that worked for me. Since I am using several UC inside the same page, I just added that code in the .aspx file, so I can call any js method from the "EndHandler" method. – Fer Jul 21 '11 at 19:44
Great solution, Muhammad! The only improvement that I would suggest would be to instead have a custom event fire. This way, multiple handlers can be created and used without changing the "base" script, re-performing the same subscription as in the "base", or overwriting the `EndHandler`. – Zachary Kniebel Feb 10 '14 at 15:17

robert · Answer 2 · 2011-05-17T03:22:01.407

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

score 0 · Answer 3 · answered May 17 '11 at 00:08

0

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

If you are using jQuery, you would need to use live() or delegate() to make sure those event handlers bubble up, even when the page gets refreshed.

answered May 17 '11 at 00:08

Code Maverick

20,171
12
62
114

Execute javascript from inside update panel on every refresh

3 Answers3