locked
Show processing on button click event RRS feed

  • Question

  • User-73514677 posted

    Hi ,

    How to display the processing image on button click event. The click event takes a longer time and hence I do not want the user to click on the button multiple times. How to show a processing image when the button is clicked and the when the processing is completed, show the results and hide the processing image

    I am using the below code:

            <form id="form1" runat="server" class="container">
            <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true" AsyncPostBackTimeout="360000">
            </asp:ScriptManager>
            <asp:UpdatePanel ID="upd1" runat="server" >
              <ContentTemplate>
       <div class="container">
         <div class="form-group" id="divDefBtn" runat="server" visible="false">
                <div class="col-sm-offset-4 col-sm-6">
                    <asp:Button ID="btnOne" runat="server" Text="Run Test" CssClass="btn btn-primary" OnClick="btnOne_Click"  />
                </div>
       </div>
           </ContentTemplate>
    
            </asp:UpdatePanel>
            </form>
        
       
    </body>
    </html>
    <script type="text/javascript">
        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function (sender, args) {
            if (args.get_error() && args.get_error().name === 'Sys.WebForms.PageRequestManagerTimeoutException') {
                args.set_errorHandled(true);
            }
        });
    </script>
    
    

    Thanks

    Monday, March 4, 2019 2:07 PM

Answers

  • User-943250815 posted

    Add an UpdateProgrees control, then make a div to cover all screen and inside it a div or more to show your message.
    On your button add OnClientClick to call Javascript function to adjust size on cover div

    <asp:UpdatePanel ID="upd1" runat="server">
        <ContentTemplate>
          <div class="container">
            <div class="form-group" id="divDefBtn" runat="server" visible="false">
              <div class="col-sm-offset-4 col-sm-6">
                <asp:Button ID="btnOne" runat="server" Text="Run Test" CssClass="btn btn-primary" OnClick="btnOne_Click" OnClientClick="Show();" />
              </div>
            </div>
          </div>
        </ContentTemplate>
      </asp:UpdatePanel>
      <asp:UpdateProgress ID="UpdateProgress2" runat="server" AssociatedUpdatePanelID="upd1" DisplayAfter="0">
        <ProgressTemplate>
          <div id="dialog">
            <div id="fundo">&nbsp;</div>
            <div id="alerta">Wait...</div>
          </div>
        </ProgressTemplate>
      </asp:UpdateProgress>

    Make a javascript to adjust width & height of cover div

    <script type="text/javascript">
        function zShow() {
          var zWindowWidth = document.documentElement.clientWidth;
          var zWindowHeight = document.documentElement.clientHeight;
          var zPopupWidth = $('#alerta').width();
          var zPopupHeight = $('#alerta').height();
          $('#alerta').css({
            'position': 'absolute',
            'top': (zWindowHeight - zPopupHeight) / 2,
            'left': (zWindowWidth - zPopupWidth) / 2
          });
          $('#dialog').show();
        }
      </script>

    For styles, attention to z-index

    <style type="text/css">
    #dialog {display:none; z-index: 100} #fundo {background-color: black; opacity: 0.6; filter: alpha(opacity=6); ; top:0px; left:0px; width: 100%; height: 100%; z-index:110;} #alerta{background-color: #E7E7FF; ; width: 300px; height: 50px; padding:20px; border: solid 3px #F7F7F7;text-align: center;z-index: 120;display: table;}
    </style>


    There is no need to hide elements on UpdateProgress, they back to default as soon UpdatePanel return

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, March 4, 2019 4:26 PM
  • User61956409 posted

    Hi venkatzeus,

    The click event takes a longer time and hence I do not want the user to click on the button multiple times. How to show a processing image when the button is clicked and the when the processing is completed, show the results and hide the processing image

    As jzero mentioned, to prevent user from clicking the button multiple times, you can make and display an overlay effect. 

    Besides, [this article](https://www.aspsnippets.com/Articles/Show-Loading-Progress-Indicator-using-GIF-Image-when-UpdatePanel-is-updating-in-ASPNet.aspx) explained with example how to show loading progress indicator using GIF Image when ASP.Net AJAX UpdatePanel is updating or when ASP.Net AJAX UpdatePanel is doing PostBack, please refer to it.

    Main code of overlay:

    <ProgressTemplate>
        <div class="modal">
            <div class="center">
                <img alt="" src="loader.gif" />
            </div>
        </div>
    </ProgressTemplate>
    .modal
    {
        ;
        z-index: 999;
        height: 100%;
        width: 100%;
        top: 0;
        background-color: Black;
        filter: alpha(opacity=60);
        opacity: 0.6;
        -moz-opacity: 0.8;
    }

    With Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, March 27, 2019 1:53 AM

All replies

  • User-943250815 posted

    Add an UpdateProgrees control, then make a div to cover all screen and inside it a div or more to show your message.
    On your button add OnClientClick to call Javascript function to adjust size on cover div

    <asp:UpdatePanel ID="upd1" runat="server">
        <ContentTemplate>
          <div class="container">
            <div class="form-group" id="divDefBtn" runat="server" visible="false">
              <div class="col-sm-offset-4 col-sm-6">
                <asp:Button ID="btnOne" runat="server" Text="Run Test" CssClass="btn btn-primary" OnClick="btnOne_Click" OnClientClick="Show();" />
              </div>
            </div>
          </div>
        </ContentTemplate>
      </asp:UpdatePanel>
      <asp:UpdateProgress ID="UpdateProgress2" runat="server" AssociatedUpdatePanelID="upd1" DisplayAfter="0">
        <ProgressTemplate>
          <div id="dialog">
            <div id="fundo">&nbsp;</div>
            <div id="alerta">Wait...</div>
          </div>
        </ProgressTemplate>
      </asp:UpdateProgress>

    Make a javascript to adjust width & height of cover div

    <script type="text/javascript">
        function zShow() {
          var zWindowWidth = document.documentElement.clientWidth;
          var zWindowHeight = document.documentElement.clientHeight;
          var zPopupWidth = $('#alerta').width();
          var zPopupHeight = $('#alerta').height();
          $('#alerta').css({
            'position': 'absolute',
            'top': (zWindowHeight - zPopupHeight) / 2,
            'left': (zWindowWidth - zPopupWidth) / 2
          });
          $('#dialog').show();
        }
      </script>

    For styles, attention to z-index

    <style type="text/css">
    #dialog {display:none; z-index: 100} #fundo {background-color: black; opacity: 0.6; filter: alpha(opacity=6); ; top:0px; left:0px; width: 100%; height: 100%; z-index:110;} #alerta{background-color: #E7E7FF; ; width: 300px; height: 50px; padding:20px; border: solid 3px #F7F7F7;text-align: center;z-index: 120;display: table;}
    </style>


    There is no need to hide elements on UpdateProgress, they back to default as soon UpdatePanel return

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, March 4, 2019 4:26 PM
  • User61956409 posted

    Hi venkatzeus,

    The click event takes a longer time and hence I do not want the user to click on the button multiple times. How to show a processing image when the button is clicked and the when the processing is completed, show the results and hide the processing image

    As jzero mentioned, to prevent user from clicking the button multiple times, you can make and display an overlay effect. 

    Besides, [this article](https://www.aspsnippets.com/Articles/Show-Loading-Progress-Indicator-using-GIF-Image-when-UpdatePanel-is-updating-in-ASPNet.aspx) explained with example how to show loading progress indicator using GIF Image when ASP.Net AJAX UpdatePanel is updating or when ASP.Net AJAX UpdatePanel is doing PostBack, please refer to it.

    Main code of overlay:

    <ProgressTemplate>
        <div class="modal">
            <div class="center">
                <img alt="" src="loader.gif" />
            </div>
        </div>
    </ProgressTemplate>
    .modal
    {
        ;
        z-index: 999;
        height: 100%;
        width: 100%;
        top: 0;
        background-color: Black;
        filter: alpha(opacity=60);
        opacity: 0.6;
        -moz-opacity: 0.8;
    }

    With Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, March 27, 2019 1:53 AM