Reputation: 156
I am trying to check if a cookies exist every second, and change the display style for a image button. I have changed the display style to none through OnClientClick, and the click will trigger a ashx download to send back a test txt file with cookies "downloaded" to be true (I had make sure the cookie exist). However, the jQuery doesn't seem to be checking or looping, can someone check for me what's wrong with the code? Thanks!
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DataPull.aspx.cs" Inherits="DataPullForDemandPlanning.DataPull" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Data Pull For Demanding Planning</title>
<style>
.changeVisible{
display: inherit;
}
</style>
<script type="text/javascript" src="Scripts/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="Scripts/jquery.cookie.js"></script>
<script type="text/javascript">
function changeVisibility(stat) {
var element = document.getElementById('ibtnPullData');
if (stat == 'none')
element.style.display = 'none';
else
element.style.display = 'inherit';
}
</script>
</head>
<body>
<form id="form1" runat="server">
<table style="width: 100%">
<tr>
<td align="center" style="border-bottom-color: #990000; height: 30px; border-bottom-style: solid" valign="top">
<h2>Data Pull For Demand Planning</h2>
</td>
</tr>
<tr>
<td align="right">
Logged in as: <asp:Label ID="lblUser" runat="server" Visible="true"></asp:Label>
</td>
</tr>
</table>
<table style="width: 60%">
<tr>
<td style="width: 40px">
<asp:ImageButton ID="ibtnPullData" runat="server" CssClass="changeVisible" ImageUrl="~/Images/ExcelLogo.gif" OnClick="ibtnPullData_Click" OnClientClick="javascript:changeVisibility('none');" />
</td>
<td style="width: auto">
Click Here to start data pull. The process may take up to 1 minute.
</td>
</tr>
</table>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function () {
$.removeCookie('downloaded', { path: '/' });
jQuery.fn.timer = function () {
var value = $.cookie('downloaded');
if (value == 'true') {
changeVisibility('inherit');
$.removeCookie('downloaded', { path: '/' });
}
}
window.setInterval(function () {
$("changeVisible").timer();
}, 1000);
});
</script>
</body>
</html>
Upvotes: 0
Views: 1577
Reputation: 156
Updated answer to a fully working version.
Thanks to @Barmar, I was able to easily achieve my goal with JavaScript only. Here is my code.
function changeVisibility(stat) {
deleteCookie('downloaded');
var element = document.getElementById('ibtnPullData');
if (stat == 'none')
element.style.display = 'none';
else
element.style.display = 'inherit';
}
var tim = setInterval(chechCookie, 1000);
function chechCookie() {
var myCookie = getCookie("downloaded");
if (myCookie != null) {
changeVisibility('inherit');
}
}
function getCookie(name) {
var dc = document.cookie;
var prefix = name + "=";
var begin = dc.indexOf("; " + prefix);
if (begin == -1) {
begin = dc.indexOf(prefix);
if (begin != 0) return null;
}
else {
begin += 2;
var end = document.cookie.indexOf(";", begin);
if (end == -1) {
end = dc.length;
}
}
// because unescape has been deprecated, replaced with decodeURI
//return unescape(dc.substring(begin + prefix.length, end));
return decodeURI(dc.substring(begin + prefix.length, end));
}
function deleteCookie(name) {
document.cookie = name + '=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;';
}
Upvotes: 1