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

  • Question

  • User2102072086 posted

    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%;
                ;
                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>
    

    Thursday, July 23, 2020 9:25 AM

All replies

  • User1535942433 posted

    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%;
                ;
                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

    Friday, July 24, 2020 3:01 AM