how to show the div on click of button while the processing in side the button click is going on. RSS

• • Reply
  rajemessage

  Member

  16 Points

  172 Posts

  how to show the div on click of button while the processing in side the button click is going on.

  Jul 23, 2020 09:25 AM|rajemessage|LINK

  i want to block the web page so that if i click save button, then while the save button is processing one should not be able to click on any other button and after the process of the click of save button is over then form should be available.
  
  Q1) how many ways this could be achieved.
  q2) following is the way i am using but it is not showing the div unless the processing of the loop finishes.

   <style>
  
          #popupblock {
              width: 100%;
              height: 100%;
              position: fixed;
              z-index: 9999;
              top: 0;
               background:url("~/Content/loader.gif") no-repeat center center rgba(0,0,0,0.25)
          }
  
      </style>
  
        <div  id="popupblock" style="display:none;">
          
      </div>
      <input id="Button1" type="button" value="button" 
  
  <script type="text/javascript">
          $(document).ready(function () {
            
              $("#Button1").click(function () {
                 
                  $('#popupblock').show();
  
  
  
                  let ii = 0;
                  let text = "";
                  while (ii < 19000000) {
                      text += "the number is " + ii;
                      var t = text;
                      ii++;
                  }
  
                  $('#popupblock').hide();
              });
   
          });
      </script>
  

• • Reply
  yij sun

  Contributor

  3730 Points

  1431 Posts

  Re: how to show the div on click of button while the processing in side the button click is going...

  Jul 24, 2020 03:01 AM|yij sun|LINK

  Hi rajemessage,

  Accroding to your description and codes,as far as I think,I suggest you could use setInterval function.The setInterval() method calls a function or evaluates an expression at specified intervals (in milliseconds).

  Besides,You couldn't use display:none in the div.Display:none means that the tag in question will not appear on the page at all (although you can still interact with it through the dom). There will be no space allocated for it between the other tags.

  More details,you could refer to below codes:

    <script src="Scripts/jquery-3.2.1.min.js"></script>
      <script>
          $(function () {
              $('#popupblock').hide();
              $("#Button1").click(function () {
                  setInterval(showdiv(),19000000);
                  function showdiv() {
                      $("#popupblock").show();          
                  }             
              })
          })
      </script>   
      <style>
  
          #popupblock {
              width: 100%;
              height: 100%;
              position: fixed;
              z-index: 9999;
              top: 0;
               background:url("image/apple.jpg") no-repeat center center rgba(0,0,0,0.25)
          }
  
      </style> 
  
  <div  id="popupblock"></div>
      <input id="Button1" type="button" value="button" />

  Best regards,

  Yijing Sun

  .NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.