locked
Run a javascript function after UpdatePanel.Update() RRS feed

  • Question

  • User45797585 posted

    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...

     

    Friday, February 9, 2007 12:51 PM

All replies

  • User1374904634 posted

    Hi,

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

    Friday, February 9, 2007 8:01 PM
  • User45797585 posted
    Damnit, I'm still running the pre-release version of the binaries.  Any other way?
    Monday, February 12, 2007 1:20 PM
  • User902366211 posted

    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.

    Monday, February 12, 2007 6:33 PM
  • User45797585 posted
    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 9:13 AM
  • User-330225209 posted
    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.
    Tuesday, February 13, 2007 6:21 PM
  • User-1446697752 posted

    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
     

    Monday, March 26, 2007 4:52 PM
  • User-1508720037 posted

    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, March 27, 2007 2:39 AM
  • User-1831818288 posted

    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 7:55 PM
  • Tuesday, June 12, 2007 11:26 PM
  • User-1831818288 posted

    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 10:49 AM
  • User555306248 posted

    If your issue is resolved, Please mark the answer

    It will help for others..

    Wednesday, June 13, 2007 11:29 PM
  • User-2111087549 posted

    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

    Thursday, October 4, 2007 9:34 PM
  • User-519644256 posted

    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 5:28 PM
  • User438584654 posted

    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, February 26, 2008 8:07 PM
  • User-616414632 posted

     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>

     

    Tuesday, January 20, 2009 5:22 AM
  • User-1579622760 posted
    Yes, moving the js to a true function and just calling that function worked for me too.
    Wednesday, April 1, 2009 8:04 PM
  • User-2122883553 posted

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

    Wednesday, August 25, 2010 3:01 PM
  • User-1464579522 posted

    Excellent post. Thanks 

    Monday, September 13, 2010 1:48 PM
  • User670644709 posted

    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"

    Wednesday, October 5, 2011 10:42 AM