Stop timer in client side using jQuery in ASP.Net

Question

anvina

SOLVED CLOSED ACTIVE ANSWERED
User: anvina
Posted: on Sep 20, 2017 11:16 PM
Forum: jQuery and jQuery Plugins
Answer: 1
Views: 5077

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>

Stop timer in client side using jQuery in ASP.Net

Company

Explore

Follow us

Contact Us