Thursday 26 January 2012

Disable / Freez the Page when Button Click

<asp:Button ID="btnSendEmailTest" TabIndex="7" runat="server" Width="150px" Text="Send Test Email" CommandArgument="SendTestEmail" ValidationGroup="vg1" OnClientClick="return CheckSendTestEmail(this);">

 <script type="text/javascript" >
    function CheckSendTestEmail(control)
    {
      var answer = confirm('Are you sure you want to send a test email to the From    address?');
         if (answer)
         {
           FreezePageWhenCalculateShipping(control);
           return true;
         }
         else
         {return false;}
     }

   
    function FreezePageWhenCalculateShipping(control)
    {
       document.getElementById("parentDiv").style.display = 'inline';
       ShowIndicator();
    }

   
   function ShowIndicator()
   {
      document.getElementById("waitIndicatorDiv").style.display = 'block';
   }
</script>
 

<div id="parentDiv"  style="position: absolute; background-color: Gray;
     width: 100%; height: 1500px; display: none; top: 0px; left: 0px; z-index: 5000;">

</div>

<div id="waitIndicatorDiv">
   <div style="width: 200px; margin: 0px auto;">
        <img src="../Images/busy.gif" alt="" />&nbsp;Sending, please wait…
   </div>
</div>

(OR)

<style type="text/css">

.transparent
{
filter: alpha(opacity=50);-moz-opacity: 0.5;opacity: 0.5;
}

.popup
{
position: absolute;width: 310px;height: 27px;margin: 0 auto;border: 5px solid #aaaaaa;background-color: #fff;font-weight: bold;font-size: 15px;padding-top: 10px;display: none;color: #000;margin-top: -40px;left: 225px;
}

.Indicator
{
font-family: Verdana;font-size: 25px;background: white url(..) no-repeat right;position: absolute;top: 300px;left: 500px;display: none;width: 591px;z-index: 99999;
}

</style>


<div id="parentDiv" class="transparent" style="position: absolute; background-color: Gray;
  width: 100%; height: 1500px; display: none; top: 0px; left: 0px; z-index: 5000;"></div>

<div id="waitIndicatorDiv" class="popup">
   <div style="width: 200px; margin: 0px auto;">
      <img src="../Images/busy.gif" alt="" />&nbsp;Sending, please wait…
   </div>
</div>

(OR)

Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(startRequest);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequest);

function startRequest(sender, e)
{
   //hide the update panel during the AJAX call
   //disable search button during the AJAX call
      if (document.getElementById('<%=ibtnSubmit.ClientID%>') != null)
      {
         document.getElementById('<%=ibtnSubmit.ClientID%>').disabled = true;
      }
      //imgbtnProceddToOrderSummery
      if (document.getElementById('<%=imgbtnProceddToOrderSummery.ClientID%>') != null)
      {
       document.getElementById('<%=imgbtnProceddToOrderSummery.ClientID%>').disabled = true;
      }
}
function endRequest(sender, e)
{
     //show the update panel once the AJAX call has completed
      //re-enable the search button once the AJAX call has completed
   if (document.getElementById('<%=ibtnSubmit.ClientID%>') != null)
   {
      document.getElementById('<%=ibtnSubmit.ClientID%>').disabled = false;
   }
   if (document.getElementById('<%=imgbtnProceddToOrderSummery.ClientID%>') != null)
   {
     document.getElementById('<%=imgbtnProceddToOrderSummery.ClientID%>').disabled = false;
   }
}

---
/*Below style to Block the Screen*/     
 #bgDiv
 {
        margin:0px;
        padding:0px;
        position:absolute;  
        width:100%;
        min-height :1000px;
        top:0;
        left:0;
        background-color:#cccccc;
        z-index:1000;
        filter: alpha(opacity=50);
        opacity: 0.5;
 }

<asp:UpdateProgress runat="server" id="PageUpdateProgress"  DisplayAfter="1"  DynamicLayout="True">
     <ProgressTemplate>
         <div id="bgDiv">
         </div>
     </ProgressTemplate>
</asp:UpdateProgress>

 

No comments:

Post a Comment