Run a javascript function after UpdatePanel.Update()

Question

_{Friday, February 9, 2007 12:51 PM}

I thought that adding the javascript within the ContentTemplate would cause it to run every time the UpdatePanel was updated.  For example, I would assume that for the following:

<atlas:UpdatePanel ID="UpdatePanel1" runat="server" Mode="Conditional" >
    <ContentTemplate>    
        Hello from inside the update panel!!!!
        <asp:Button ID="foo" runat="server" OnClick="foo_Click" Text="Click me to postback!" />
        <script type="text/javascript">alert('Javascript, baby!');</script>
    </ContentTemplate>
</atlas:UpdatePanel>

 would cause the function alert() to run every time the UpdatePanel returns from the button click.  This is not the case, however.

How do I do this?  My update panel contains a scrolling Div and I want to scroll to a particular node after the UpdatePanel updates, and this is the only way I can think of to do it...

All replies (19)

_{Friday, February 9, 2007 8:01 PM}

Hi,

you could use the RegisterStartupScript method of the ScriptManager to programmatically inject the script to load after a partial postback.

_{Monday, February 12, 2007 1:20 PM}

Damnit, I'm still running the pre-release version of the binaries.  Any other way?

_{Monday, February 12, 2007 6:33 PM}

Upgrade. :-)

Really, any particular reason you're still on a prerelease build?  I don't remember when those methods got introduced on the ScriptManager, but they might be in your build too.

_{Tuesday, February 13, 2007 9:13 AM}

Well, intellisense says no.  And upgrading is in the pipe; there are more pressing issues that need to be taken care of.  The build I'm using is stable enough to put upgrading on a back burner for the near term...

_{Tuesday, February 13, 2007 6:21 PM}

Like Steve Marx said, please upgrade to the RTM version. You will save a lot of time - do not assume the framework version you are working with is stable.

_{Monday, March 26, 2007 4:52 PM}

Hi,

here's my scenario:

A button inside an UpdatePanel is clicked, some server side code runs, and I want to run a JS function after the server side processing ends. The JS function to run is dependent on the server side processing and its result.
In the OnClick event handler of the button, as last line, I have:

ScriptManager.RegisterStartupScript(this, this.GetType(), "temp", "<script language='javascript'>alert('x');</script>", false);

However, no alert is displayed at client side. What am I missing?

Thanks.

PS: all this happens in an ascx control
 

_{Tuesday, March 27, 2007 2:39 AM}

Hi,

You should call the method in this way:

**    ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "temp", "<script type='text/javascript'>alert('x');</script>", false); **

The problem could be the fact that you are using this instead of this.Page. Also instead language='javascript' you can use type='text/javascript'.

 Hope it helps...
 

_{Tuesday, June 12, 2007 7:55 PM}

Hello,

 Did this fix your problem?  I'm having a similar issue where my script runs on page load, but subsequent partial renders do not fire the script.  Please let us know if this solution worked for you or if you had to tweak it more.

Thanks,

Brendan

_{Tuesday, June 12, 2007 11:26 PM}

See for more details...

http://ajax.asp.net/docs/mref/O_T_System_Web_UI_ScriptManager_RegisterStartupScript.aspx

_{Wednesday, June 13, 2007 10:49 AM}

Thanks, got it to work by moving my js into a true function (instead of just inline) and calling it all via:

ScriptManager.RegisterStartupScript(this, typeof(Sections), "Initialize", "initialize();", true);

_{Wednesday, June 13, 2007 11:29 PM}

If your issue is resolved, Please mark the answer

It will help for others..

_{Thursday, October 4, 2007 9:34 PM}

Yes

**    ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "temp", "<script type='text/javascript'>alert('x');</script>", false); **
 

If we want to execute JS function during ajax call

write your script  in page load

 ScriptManager.RegisterStartupScript(this.updatePaneLid, this.GetType(), "Show_Font", "showFont();", true);

Hope this helps

_{Tuesday, February 26, 2008 5:28 PM}

Thanks for this code, it works for me, except that the progress bar ("Updating...") is still showing while the alert box already says "Transactio Completed". How to make the progress bar go away?

Also, what does addScriptTags parameter indicates on ScriptManager.RegisterStartupScript(this.updatePaneLid, this.GetType(), "Show_Font", "showFont();", true);?

_{Tuesday, February 26, 2008 8:07 PM}

Hi mcgurk,

Try this:

<script type="text\javascript">
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(RunThisAfterEachAsyncPostback);
// runs each time postback is initiated by any update panel on the page
function RunThisAfterEachAsyncPostback()
{
 alert('Javascript, baby!');
}
</script>

this will work, in case you need to run code when ONLY a particular UpdatePanel is refreshed - let me know - You can differentiate this in handler - I will give that code as well .

Hope this helps

_{Tuesday, January 20, 2009 5:22 AM}

 i have another idea ..

u can use the UpdatePanelAnimationExtender control like this:

                <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                    <ContentTemplate>
                        <!-- ... code -->
                    </ContentTemplate>
                </asp:UpdatePanel>

                <AjaxToolkit:UpdatePanelAnimationExtender ID="UpdatePanelAnimationExtender1" runat="server"
                    TargetControlID="UpdatePanel1" Enabled="True">
                    <Animations>
                        <OnUpdated>
                            <Parallel duration="0">
                                <ScriptAction Script="javascript_function();" />  <!-- call to the javascript function after update -->
                            </Parallel>
                        </OnUpdated>
                    </Animations>
                </AjaxToolkit:UpdatePanelAnimationExtender>

_{Wednesday, April 1, 2009 8:04 PM}

Yes, moving the js to a true function and just calling that function worked for me too.

_{Wednesday, August 25, 2010 3:01 PM}

thanks kirchi, this works for me, that is the right answer!

_{Monday, September 13, 2010 1:48 PM}

Excellent post. Thanks 

_{Wednesday, October 5, 2011 10:42 AM}

Hi 

bhannemann 

COULD YOU TELL ME THAT WHAT IS typeof(Sections) IN YOUR SYNTAX, I GOT AN ERROR ON IT THAT "The type or namespace name 'Sections'  COULD NOT BE FOUND"