Using Javascript to click a button inside UpdatePanel

Last post 10-26-2007 10:35 AM by digitall. 8 replies.

Sort Posts:

  • Using Javascript to click a button inside UpdatePanel

    10-25-2007, 4:58 PM
    • Loading...
    • digitall
    • Joined on 02-01-2006, 4:48 PM
    • Posts 12

    I have been fighting this issue for the last few hours and can't come up with a viable solution. I have a grid on a content page (inside a master page) along with a hidden button, both inside an UpdatePanel. I have a button outside the UpdatePanel that triggers a SubModal window to pop up. When you have opened the SubModal, done the associated processing with it, it then calls window.top.__UpdateGrid() which is a function that is supposed to cause an Async PostBack to occur. I have tried using the following:

    document.getElementById('<%= cmUpdate.ClientID() %>').click();

    Page.ClientScript.GetPostBackEventReference(cmUpdate, "") [assigning the output of this directly to a JS function and having it write to a Literal as well]

    __doPostBack('ctl00_ContentPlaceHolder1_cmUpdate', null);

    window.setTimeout('__doPostBack(\'ctl00_ContentPlaceHolder1_cmUpdate\', null)', 0); [I occasionally would get a script timeout error in FF so I tried this option]

    It seems that no matter what I try, FireFox isn't going to allow me to update the grid asynchronously. All I need is to have the button be clicked without posting back and the rest of my code runs exactly as I want it to. Does anyone have any suggestions?

  • Re: Using Javascript to click a button inside UpdatePanel

    10-26-2007, 12:46 AM
    • Loading...
    • gt1329a
    • Joined on 06-24-2002, 12:53 AM
    • Atlanta
    • Posts 1,756
    If you move your GridView binding to the Load event of the UpdatePanel, you could use __doPostBack() to trigger the partial postback from JavaScript.
    Encosia - ASP.NET, AJAX, and more.

    Latest article: Using jQuery to enhance ASP.NET AJAX progress indication
  • Re: Using Javascript to click a button inside UpdatePanel

    10-26-2007, 8:55 AM
    • Loading...
    • digitall
    • Joined on 02-01-2006, 4:48 PM
    • Posts 12

    That works great until I add in the line hidePopWin() (or any of it's variants) with FireFox. IE is working exactly as I expected though. As soon as I remove the hidePopWin() line the AJAX refresh happens like I would expect - but the SubModal window stays put. Order of command execution doesn't seem to matter either - as soon as hidePopWin exists in either the SubModal viewer or on the main page, the AJAX refresh won't work - despite being called after the __doPostBack() command. If I leave it long enough I get the following error (again, FireFox only):

    Sys.WebForms.PageRequestManagerTimeoutException: The server request timed out.

    The line it fails on is (just throwing an exception is how I read it): this._endPostBack(this._createPageRequestManagerTimeoutError(), sender);

    I'm at a loss here. If it helps any, I am using this script (new window) for the SubModal. Minus this one little issue with FireFox only, everything is working really well.

  • Re: Using Javascript to click a button inside UpdatePanel

    10-26-2007, 9:04 AM
    • Loading...
    • cbross76
    • Joined on 10-25-2007, 8:17 PM
    • Posts 6

    Try this...

    var prm = Sys.WebForms.PageRequestManager.getInstance();

    prm._doPostBack('<<Name of Button to click>>','');

  • Re: Using Javascript to click a button inside UpdatePanel

    10-26-2007, 9:32 AM
    • Loading...
    • digitall
    • Joined on 02-01-2006, 4:48 PM
    • Posts 12

    Still no joy Sad

    Here is the code-behind of the page inside the Modal for what it will write back to the page when it is done executing:

                Dim sb As New System.Text.StringBuilder
                sb.Append("<script language=""javascript"" type=""text/javascript"">")
                'sb.Append("window.top.hidePopWin(false);")
                sb.Append("window.top." & Server.UrlDecode(Request("callback")) & ";")
                sb.Append("</script>")

                Response.Write(sb.ToString)

    The JS on the parent/host page is the following:

        <script language="javascript" type="text/javascript">
            function __UpdateGrid() {
                //alert('here');
               
                var prm = Sys.WebForms.PageRequestManager.getInstance();
                prm._doPostBack('<%= udpImages.ClientID() %>','');
               
                hidePopWin(false);
                //__doPostBack('<%= udpImages.ClientID() %>', '');           
            }
        </script>

    I wish I understand why FF is having so much trouble with this - it works exactly as I want it to in IE. I guess technically I don't have to have it cross-browser (the part of the site where this is used probably won't be hit by anyone with FF - it is an internal site). But it'll bug me knowing it doesn't work right all the way across.

    Also, for those of you familiar with the SubModal control, I have tried using it's callback feature and it still won't work right in FF. 

  • Re: Using Javascript to click a button inside UpdatePanel

    10-26-2007, 9:44 AM
    • Loading...
    • cbross76
    • Joined on 10-25-2007, 8:17 PM
    • Posts 6

    Did you try it without using the ClientID? I am not using the ClientID on the _doPostBack call even though my button is inside of a master page as well.

    Like This....

    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm._doPostBack('udpImages','');

  • Re: Using Javascript to click a button inside UpdatePanel

    10-26-2007, 10:07 AM
    • Loading...
    • digitall
    • Joined on 02-01-2006, 4:48 PM
    • Posts 12

    I hadn't, but I just did and still no luck in FF.

    If it helps any, when I refresh the page after manually closing the SubModal, the grid is updated like I would want (I use a combination of "temproary" session items and ViewState to manage the data the grid retrieves from). 

    If you need me to post any other code I gladly will. I'm not sure if I gave everything needed to resolve this issue (but I think I did). Just in case, here is my UpdatePanel:

        <asp:UpdatePanel runat="server" ID="udpImages">
            <ContentTemplate>
                <asp:GridView runat="server" ID="gvImages">
                    <Columns>
                        <asp:BoundField DataField="Id" Visible="False" />
                        <asp:ButtonField Text="Remove" />
                        <asp:BoundField DataField="Name" HeaderText="Name" />
                    </Columns>
                </asp:GridView>
            </ContentTemplate>
        </asp:UpdatePanel>

    Right now it is pretty ugly but I can make it pretty later - I just want it to work now.

  • Re: Using Javascript to click a button inside UpdatePanel

    10-26-2007, 10:13 AM
    • Loading...
    • cbross76
    • Joined on 10-25-2007, 8:17 PM
    • Posts 6

    Ah.. that does clear things up a bit. The code that I posted previously would simulate the clicking of a button within the UpdatePanel which would trigger the refresh. You are setting the postback call to the ID of your UpdatePanel which I dont think will work. What if you threw a "Refresh" button at the bottom of your GridView and then used the ID of that button for the postback? I'm thinking that might work.

  • Re: Using Javascript to click a button inside UpdatePanel

    10-26-2007, 10:35 AM
    • Loading...
    • digitall
    • Joined on 02-01-2006, 4:48 PM
    • Posts 12

    That was the approach I took almost all day yesterday. It worked great everytime in IE, but still no luck in FF. I even dropped it back to where if you hit the hidden button in the panel it would simply update a Literal control with the current date/time. If I unhid the button this would work all day long. If I hid it and used JS to click it, it would either postback or just not work at all with the TimeoutException being thrown. But it all still worked like I wanted in IE so I don't think the code was necessarily the issue.

    I am definitely perplexed - this doesn't seem like it would be a complicated issue, and others are bumping into it based on my hours of searching on Google, but a clear solution has yet to surface Sad.

    One thing I found a few months back when I was trying this was you had to use window.setTimeout() because FF had a bug which existed from back when the codebase was still used in Netscape that caused a StackOverlowException with doing an AJAX refresh like I am trying to do. Eventually I gave up on that code and just had it redirect the page instead. Unfortunately that isn't really an option with the system I am doing now. I could just have it do a full postback, but it is so much cleaner to have it just update the grid and not the entire page.

Page 1 of 1 (9 items)
Microsoft Communities
Page view counter