Update Panel trigger button

Question

_{Wednesday, December 8, 2010 11:52 AM}

Hi all,

i have 2 button inside my Update Panel

<asp:UpdatePanel ID="UpdatePanel1" runat="server">

           <ContentTemplate>

                    Button1...

                    Button2...

          </ContentTemplate>

          <Triggers>
                   <asp:AsyncPostBackTrigger ControlID="Button2" EventName="Click" />
          </Triggers>
</asp:UpdatePanel>

<asp:UpdateProgress ID="updProgress" AssociatedUpdatePanelID="UpdatePanel1" runat="server">

        <ProgressTemplate>

                  <img alt="progress" src="img/ajax-loader.gif" />
                            Please Wait...
        </ProgressTemplate>
</asp:UpdateProgress>

my question is how can i the Update Progress fire only when Button2 is click and not both?

Thanks

All replies (4)

_{Wednesday, December 8, 2010 2:10 PM ✅Answered}

Here's a working sample

<form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <script type="text/javascript" language="javascript">
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        prm.add_initializeRequest(InitializeRequest);
        prm.add_endRequest(EndRequest);
        var postBackElement;
        function InitializeRequest(sender, args) {
            if (prm.get_isInAsyncPostBack())
                args.set_cancel(true);
            postBackElement = args.get_postBackElement();

            if (postBackElement.id == 'Button1') {
                $get('UpdateProgress1').style.display = 'none';
                $get('UpdateProgress1').style.visibility = 'hidden';
            }
                
        }
        function EndRequest(sender, args) {
            if (postBackElement.id == 'Button1') {
                $get('UpdateProgress1').style.display = 'block';
                $get('UpdateProgress1').style.visibility = 'visible';
            }
        }
    </script>
    <div>
    <asp:UpdatePanel  ID="UpdatePanel1" UpdateMode="Conditional" runat="Server" >
    <ContentTemplate>
         <asp:Button ID="Button1" runat="server" Text="btn1" OnClientClick="" onclick="Button1_Click" />       
         <asp:Button ID="Button2" runat="server" Text="btn2" onclick="Button2_Click" /> 
    </ContentTemplate>
    </asp:UpdatePanel>
    <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
     <ProgressTemplate>
        <div id="div1" style="; top: 50%; text-align: center;">
            <asp:Image ID="imgLoading" runat="server" ImageUrl="simple.gif" Width="34px" Height="30px" />Please wait
        </div>
     </ProgressTemplate>
    </asp:UpdateProgress>
    </div>
    </form>

protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(2000);
    }
    protected void Button2_Click(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(2000);
    }

_{Friday, December 10, 2010 12:49 AM ✅Answered}

Hi,

Please refer to:http://msdn.microsoft.com/en-us/library/bb386454.aspx. 

_{Wednesday, December 8, 2010 12:29 PM}

You can try something like that:

1. <asp:UpdatePanel ID="UpdatePanel1" runat="server">
2.     <ContentTemplate>
3.           Button1...
4.  
5.         <asp:UpdatePanel ID="UpdatePanel2" runat="server">
6.             <ContentTemplate>
7.                     Button2...
8.             </ContentTemplate>
9.         </asp:UpdatePanel>
11.     </ContentTemplate>
12.     <Triggers>
13.         <asp:AsyncPostBackTrigger ControlID="Button2" EventName="Click" />
14.     </Triggers>
15. </asp:UpdatePanel>
16.  
17.  
18. <asp:UpdateProgress ID="updProgress" AssociatedUpdatePanelID="UpdatePanel2" runat="server">
19.          <ProgressTemplate>
20.                   <img alt="progress" src="img/ajax-loader.gif" />
21.                             Please Wait...
22.          </ProgressTemplate>
23. </asp:UpdateProgress>

I hope this helps.

_{Thursday, December 9, 2010 12:37 AM}

Please refer this

http://vincexu.blogspot.com/2008/10/how-to-display-progress-bar-when-first.html

http://disturbedbuddha.wordpress.com/2007/11/26/controlling-the-aspnet-timer-control-with-javascript/

http://blog.devarchive.net/2008/01/displaying-progress-bar-for-long.html

http://forums.asp.net/t/1487591.aspx

http://forums.asp.net/t/1139522.aspx