Stop timer in client side using jQuery in ASP.Net

Last Reply one year ago By anvina

Posted one year ago

Can some tell me why the asp timer does not stop when I stop it in more than one place in my code..

Scenario.

1. I hav 2 dropdowns(changeDevice & changePassword) in my web form and when the user clicks on the dropdown to enter data/changePassword in the dropdown i do not want the timer to tick since that will refresh the page and slide up the dropdown .

 

2.Timer stops and works fine ifi am attaching the start and stop events of the timer only for one dropdown.

3.But when i attach the start and stop events for both drpdown the timer does no stop.

 

I have made a sample code please refer.I am stuck with this issue since quite sometime .Help!

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="TimerDemo.aspx.vb" Inherits="TimerProject.TimerDemo" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <title></title>
    <style type="text/css">
        #changeDevice-content {
            display: none;
            position: absolute;
            top: 20px;
            left: 0px;
            z-index: 999;
            background: #ffffff;
            font-family: segoe ui, Arial, sans-serif;
            border: 1px solid lightgrey;
            border-top: none;
            padding: 15px;
            width: 260px;
            -moz-box-shadow: 5px 5px 5px grey;
            -webkit-box-shadow: 5px 5px 5px grey;
            box-shadow: 5px 5px 5px grey;
            -moz-border-radius: 3px 0 3px 3px;
            -webkit-border-radius: 3px 0 3px 3px;
            border-radius: 3px 0 3px 3px;
        }
         #changePwd-content {
  display: none;
  position: absolute;
  top: 20px;
  left:8px;
  z-index: 999;   
  background: #ffffff;
  border:1px solid lightgrey;
  border-top:none;
  padding: 15px;
   width: 300px;  
  -moz-box-shadow:5px 5px  5px grey;
  -webkit-box-shadow: 5px   5px 5px grey;
  box-shadow: 5px 5px  5px grey;
  -moz-border-radius: 3px 0 3px 3px;
  -webkit-border-radius: 3px 0 3px 3px;
  border-radius: 3px 0 3px 3px;
}
    </style>
</head>
<body>
    <form id="form1" runat="server">
          <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
         <script type="text/javascript">  

 

 function stopTheTimer() {
             var timerValue = $find('<%= timerShowDirectory.ClientID %>');
            timerValue._stopTimer();

            var wait = timerValue.get_interval();
            
        }
        function startTheTimer() {
             var timerValue = $find('<%= timerShowDirectory.ClientID %>');
            timerValue._startTimer();
            var wait = timerValue.get_interval();
        }
             

   //start of  block for changePwd
          $(document).ready(function(){
              $('#changePwd-trigger').click(function () {
                    if ($(this).hasClass('active')) {
                        //start the timer since dropdown slides up
                        startTheTimer();               
                        $(this).next('#changePwd-content').slideUp("fast");
                        $(this).removeClass('active');                          
                    }
                    else {
                        //stop the timer since dropdown is shown and user will be keying in values
                        stopTheTimer();                               
                        $(this).next('#changePwd-content').slideDown("fast");   
                        $(this).addClass('active');             
                    }           
                });
          });

         $(document).on("click", function (event) {
            var $trigger = $("#changePwd");
            if ($trigger !== event.target && !$trigger.has(event.target).length) {
                startTheTimer();
                $("#changePwd-content").slideUp("fast");
                $("#changePwd-trigger").removeClass('active');                     
            }
             });
   //end of block for change password

   //start for 2nd block of code for dropdown change Device 
          $(document).ready(function(){
                    $('#changeDevice-trigger').click(function () {

                        if ($(this).hasClass('active')) {
                            $(this).next('#changeDevice-content').slideUp("fast");
                            $(this).removeClass('active');
                           startTheTimer();
                        }
                        else {         
                            $(this).next('#changeDevice-content').slideDown("fast");
                            $(this).addClass('active');
                            stopTheTimer();
                        }           
                    });
          });
        
         //below function to slide up drpdown if user click anywhere else in the document except the dropdown
         $(document).on("click", function (event) {
                         var $trigger = $("#changeDevice");
                         if ($trigger !== event.target && !$trigger.has(event.target).length) {
                             startTheTimer();
                        $("#changeDevice-content").slideUp("fast");
                        $("#changeDevice-trigger").removeClass('active');          
                    }
                     });
    //end of block change device
        </script>

 

  <div>
                                        <asp:Timer ID="timerShowDirectory" runat="server" Interval="6000" />
                                            <table>
                                                <tr>
                                                     <td>
                                                       <div id="changeDevice" style="position:relative;"><a id="changeDevice-trigger" href="#" >                                                         
                                                           <asp:Label ID="LabelExtension" runat="server" Font-Names="segoe ui"  Font-Underline="true" ForeColor="dimgray" Text="234"></asp:Label></a>
                                                        <div id="changeDevice-content">
                                                            <fieldset style="border:1px solid lightgrey;">
                                                             <div>    
                                                                <asp:Panel ID="panelOffice" runat="server" >
                                                                 <asp:RadioButton ID="RadioButtonOffice"  CssClass="devicelabels" runat="server" />
                                                                 <asp:Label ID="lblOffice" CssClass="devicelabels" runat="server" Text="256"></asp:Label><br /></asp:Panel>   
                                                                <asp:Panel ID="panelOffice2" runat="server" >            
                                                                  <asp:RadioButton ID="RadioButtonOffice2"   CssClass="devicelabels" runat="server" />
                                                                 <asp:Label ID="lblOffice2" CssClass="devicelabels" runat="server" Text="252"></asp:Label><br /></asp:Panel>
                                                                <asp:Panel ID="panelMobile" runat="server" >      
                                                                 <asp:RadioButton ID="RadioButtonMobile" CssClass="devicelabels" runat="server" />
                                                                 <asp:Label ID="lblMobile" CssClass="devicelabels" runat="server" Text="245"></asp:Label> <br /></asp:Panel>                                        
                                                                <asp:Panel ID="panelOther" runat="server" > 
                                                                 <asp:RadioButton ID="RadioButtonOther"  CssClass="devicelabels" runat="server" />
                                                                 <asp:TextBox ID="TextBoxOther" runat="server" Font-Names="segoe ui" CssClass="EPinput" Width="150"  ></asp:TextBox>   </asp:Panel>                                                                                                                                                                                                                     
                                                             </div> <div style="text-align:center;width:100%;padding:5px;">   
                                                                 <asp:Label ID="LabelError" Font-Size="15px" runat="server" ForeColor="Red" Font-Names="segoe ui"></asp:Label>                                                                         
                                                                <asp:Button ID="ButtonSwicthDevice" runat="server"  ></asp:Button></div>

                                                            </fieldset>                                  
                                                        </div>             
                                                    </div>
                                                 </td> 
             
                                               <td id="IconCol"  style="width:40%">   <ul  id="ulIconsList">
                                                    <li id="changePwd" style="position:relative;"><a id="changePwd-trigger" href="#" >
                                                         <asp:Label ID="Label1" runat="server" Font-Names="segoe ui"  Font-Underline="true" ForeColor="dimgray" Text="Change Password"></asp:Label>
                                                                                                  </a>
                                                        <div id="changePwd-content">
                                                            <fieldset style="border:1px solid lightgrey;">
                                                             <div id="inputs">                                         
                                                                  <asp:TextBox ID="txtPasswordProfile" runat="server" TextMode="Password"  placeholder="Enter current password" ></asp:TextBox>  
                                                                 <asp:HiddenField ID="hidPasswordProfile" runat="server" />                                        
                                                                <asp:TextBox ID="txtNewPassword" runat="server" TextMode="Password" placeholder="Enter new password"  ></asp:TextBox>  
                                                                                                                      
                                                                <asp:TextBox ID="txtNewPassword2" runat="server" TextMode="Password" placeholder="Re-type new Password" ></asp:TextBox>
                                                                 <table><tr><td ><asp:Label ID="lblPasswordNotification" runat="server" Text=""  ForeColor="Red" Font-Bold="False"></asp:Label></td></tr></table>
                                                         </div>
                                                         <div id="actions">                                                                                
                                                            <asp:Button ID="btnSafePassword" runat="server" Text="Change Password" CssClass="submit"  ></asp:Button>                                                                                                  
                                                         </div></fieldset>
                                                       </div>  
                                                                   
                                                    </li></ul> 
                                               </td> 
                                            </tr>
                                        </table>
                    </div>
            </form>
       </ body>
</html>

 

Posted one year ago
anvina says:
function stopTheTimer() {
            var timerValue = $find('<%= timerShowDirectory.ClientID %>');
           timerValue._stopTimer();
 
           var wait = timerValue.get_interval();
            
       }
       function startTheTimer() {
            var timerValue = $find('<%= timerShowDirectory.ClientID %>');
           timerValue._startTimer();
           var wait = timerValue.get_interval();
       }
             
 
  //start of  block for changePwd
         $(document).ready(function(){
             $('#changePwd-trigger').click(function () {
                   if ($(this).hasClass('active')) {
                       //start the timer since dropdown slides up
                       startTheTimer();              
                       $(this).next('#changePwd-content').slideUp("fast");
                       $(this).removeClass('active');                         
                   }
                   else {
                       //stop the timer since dropdown is shown and user will be keying in values
                       stopTheTimer();                              
                       $(this).next('#changePwd-content').slideDown("fast");  
                       $(this).addClass('active');            
                   }          
               });
         });
 
        $(document).on("click", function (event) {
           var $trigger = $("#changePwd");
           if ($trigger !== event.target && !$trigger.has(event.target).length) {
               startTheTimer();
               $("#changePwd-content").slideUp("fast");
               $("#changePwd-trigger").removeClass('active');                    
           }
            });
  //end of block for change password
 
  //start for 2nd block of code for dropdown change Device
         $(document).ready(function(){
                   $('#changeDevice-trigger').click(function () {
 
                       if ($(this).hasClass('active')) {
                           $(this).next('#changeDevice-content').slideUp("fast");
                           $(this).removeClass('active');
                          startTheTimer();
                       }
                       else {        
                           $(this).next('#changeDevice-content').slideDown("fast");
                           $(this).addClass('active');
                           stopTheTimer();
                       }          
                   });
         });
        
        //below function to slide up drpdown if user click anywhere else in the document except the dropdown
        $(document).on("click", function (event) {
                        var $trigger = $("#changeDevice");
                        if ($trigger !== event.target && !$trigger.has(event.target).length) {
                            startTheTimer();
                       $("#changeDevice-content").slideUp("fast");
                       $("#changeDevice-trigger").removeClass('active');         
                   }
                    });
   //end of block change device
       </script>

replace above with below code.

<script type="text/javascript">
    function stopTheTimer() {
        var timerValue = $find('<%= timerShowDirectory.ClientID %>');
        timerValue._stopTimer();

        var wait = timerValue.get_interval();

    }
    function startTheTimer() {
        var timerValue = $find('<%= timerShowDirectory.ClientID %>');
        timerValue._startTimer();
        var wait = timerValue.get_interval();
    }

    //start of  block for changePwd
    $(document).ready(function () {
        $('#changePwd-trigger').click(function () {
            if ($(this).hasClass('active')) {
                //start the timer since dropdown slides up
                startTheTimer();
                $(this).next('#changePwd-content').slideUp("fast");
                $(this).removeClass('active');
            }
            else {
                //stop the timer since dropdown is shown and user will be keying in values
                stopTheTimer();
                $(this).next('#changePwd-content').slideDown("fast");
                $(this).addClass('active');
            }
        });
    });

    $(document).on("click", function (event) {
        var $changePwdtrigger = $("#changePwd");
        var $changeDevicetrigger = $("#changeDevice");
        if (($changePwdtrigger !== event.target && !$changePwdtrigger.has(event.target).length) && ($changeDevicetrigger !== event.target && !$changeDevicetrigger.has(event.target).length)) {
            startTheTimer();
            $("#changePwd-content").slideUp("fast");
            $("#changePwd-trigger").removeClass('active');
            $("#changeDevice-content").slideUp("fast");
            $("#changeDevice-trigger").removeClass('active');
        }
    });
    //end of block for change password

    //start for 2nd block of code for dropdown change Device
    $(document).ready(function () {
        $('#changeDevice-trigger').click(function () {

            if ($(this).hasClass('active')) {
                $(this).next('#changeDevice-content').slideUp("fast");
                $(this).removeClass('active');
                startTheTimer();
            }
            else {
                $(this).next('#changeDevice-content').slideDown("fast");
                $(this).addClass('active');
                stopTheTimer();
            }
        });
    });
    //end of block change device           
</script>