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>