[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 329
  • Last Modified:

Revisiting - Modify auto refresh javascript to allow user to select refresh interval

Hi -

Got a great fix for some existing javascript from Zvonko which does exactly what I needed in terms of letting the user select the refresh interval for an auto refresh page function -

However - I just noticed that it needs a slight "fix" - in that when the page reloads the interval "reverts" to the fixed p_interval value -

Is there any way that once a user has selected the refresh interval they want we can carry over that value when the page refreshes - would rather not use cookies as some folks react adversely to them or have them shut off in their browser -

thanks in advance -

Richard

Here's the code -

html>
<head>
<title>Zvonko &#42;</title>
<script>

var p_limit=60;

function beginRefresh(){

   if (!document.images) {
      return
   }

   var is_hdr_checked = window.document.form_hdr_cbx.cbx_refresh;
   var is_hdr_checked2 = window.document.form_hdr_cbx2.cbx_refresh2;

   if (is_hdr_checked.checked == false) {
       window.status="Page refresh suspended"
      return
   }

      if (is_hdr_checked2.checked == false) {
       window.status="Page refresh suspended"
      return
   }

   if (p_limit==1) {
      window.location.reload(true)
   } else {
      p_limit-=1
      c_min=Math.floor(p_limit/60)
      c_sec=p_limit%60
      if (c_min!=0) {
         c_time=c_min+" minutes and "+c_sec+" seconds left until page refresh"
      } else {
         c_time=c_sec+" seconds left until page refresh"
      }
      window.status=c_time
      setTimeout("beginRefresh()",1000)
   }
}

window.onload=beginRefresh

//
</script>
</head>
<body>
<form name="form_hdr_cbx">
<select name="limit" onChange="p_limit=this.value">
<option value="30">00:30
<option value="60" selected>01:00
<option value="90">01:30
</select>
<hr>
<input type=checkbox name="cbx_refresh" checked> Suspend1
</form>
<form name="form_hdr_cbx2">
<input type=checkbox name="cbx_refresh2" checked> Suspend2<br>
</form>
</body>
</html>

0
rwinnick
Asked:
rwinnick
  • 6
  • 5
  • 3
  • +1
2 Solutions
 
ZvonkoSystems architectCommented:
Here a "cookieless" version:

<html>
<head>
<title>Zvonko &#42;</title>
<script>

var p_limit=60;

function beginRefresh(){

   if (!document.images) {
      return
   }

   var is_hdr_checked = window.document.form_hdr_cbx.cbx_refresh;
   var is_hdr_checked2 = window.document.form_hdr_cbx2.cbx_refresh2;

   if (is_hdr_checked.checked == false) {
       window.status="Page refresh suspended"
      return
   }

      if (is_hdr_checked2.checked == false) {
       window.status="Page refresh suspended"
      return
   }

   if (p_limit==1) {
      var url = window.location.href.split("#")[0];
      url = url.replace(/[?&]time=\d+/g,"");
      url = ((url.split("?").length>1)?"&":"?")+"time="+(new Date()).getTime();
      url += "#"+document.form_hdr_cbx.limit.value;
      window.location=url;
   } else {
      p_limit-=1
      c_min=Math.floor(p_limit/60)
      c_sec=p_limit%60
      if (c_min!=0) {
         c_time=c_min+" minutes and "+c_sec+" seconds left until page refresh"
      } else {
         c_time=c_sec+" seconds left until page refresh"
      }
      window.status=c_time
      setTimeout("beginRefresh()",1000)
   }
}

window.onload=function(){
  if(window.location.hash){
    p_limit=location.hash.substr(1);
    document.form_hdr_cbx.limit.value=p_limit;
  }
  beginRefresh();
}

//
</script>
</head>
<body>
<form name="form_hdr_cbx">
<select name="limit" onChange="p_limit=this.value">
<option value="05">00:05
<option value="30">00:30
<option value="60" selected>01:00
<option value="90">01:30
</select>
<hr>
<input type=checkbox name="cbx_refresh" checked> Suspend1
</form>
<form name="form_hdr_cbx2">
<input type=checkbox name="cbx_refresh2" checked> Suspend2<br>
</form>
</body>
</html>

0
 
Cem TürkSenior Software EngineerCommented:
<html>
<head>
<title>Zvonko &#42;</title>
<script>
//alert(window.location.search);

//alert(document.URL);
if(window.location.search!="") {
var p_limit=parseInt(window.location.search.replace('?int=',''));
} else {
var p_limit=2;
}
function beginRefresh(){

   if (!document.images) {
      return
   }

   var is_hdr_checked = window.document.form_hdr_cbx.cbx_refresh;
   var is_hdr_checked2 = window.document.form_hdr_cbx2.cbx_refresh2;

   if (is_hdr_checked.checked == false) {
       window.status="Page refresh suspended"
      return
   }

      if (is_hdr_checked2.checked == false) {
       window.status="Page refresh suspended"
      return
   }

   if (p_limit==1) {
if(window.location.search!="") {

      window.location=document.URL + "?int=" + document.form_hdr_cbx.limit.options[document.form_hdr_cbx.limit.selectedIndex].value;
}
            else { window.location=window.location +"?int=" + document.form_hdr_cbx.limit.options[document.form_hdr_cbx.limit.selectedIndex].value;}
   } else {
      p_limit-=1
      c_min=Math.floor(p_limit/60)
      c_sec=p_limit%60
      if (c_min!=0) {
         c_time=c_min+" minutes and "+c_sec+" seconds left until page refresh"
      } else {
         c_time=c_sec+" seconds left until page refresh"
      }
      window.status=c_time
      setTimeout("beginRefresh()",1000)
   }
}

window.onload=beginRefresh

//
</script>
</head>
<body>
<form name="form_hdr_cbx">
<select id="limit" name="limit" onChange="p_limit=this.value">
<option value="30">00:30
<option value="60" selected>01:00
<option value="90">01:30
</select>
<hr>
<input type=checkbox name="cbx_refresh" checked> Suspend1
</form>
<form name="form_hdr_cbx2">
<input type=checkbox name="cbx_refresh2" checked> Suspend2<br>
</form>
</body>
</html>
0
 
Cem TürkSenior Software EngineerCommented:
sorry Zvonko, didnt see your post.
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
ZvonkoSystems architectCommented:
Not tested well cemal ;-)
0
 
Cem TürkSenior Software EngineerCommented:
var p_limit=2;

should be var p_limit=60;

in my post ;) i have tested it on IE and it works fine with it, now i realised that document.URL returns the url WITH query string :) that's why it doesnt work right on FF :]
0
 
ZvonkoSystems architectCommented:
You did not notice this effects:
1.) It runs down the selected time and reloads the page with the corrected selected value from the list, let say: ?int=90
2.) It counts down the seconds, but it does NOT set the select to the countdown value. The default 60 stay selected.
3.) After count of 90 it loads with the default value of 60 and not with the user selected value of 90

0
 
Cem TürkSenior Software EngineerCommented:
if(window.location.search!="") {
var p_limit=parseInt(window.location.search.replace('?int=',''));
document.form_hdr_cbx.limit.value=parseInt(window.location.search.replace('?int=',''));
} else {
var p_limit=60;
}

will do it, but how can i get the url without the query string?

document.URL blabla/test.htm in IE
and blabla/test.htm?int=60

window.location.replace(window.location.search,'') doesnt return anything as well
0
 
Cem TürkSenior Software EngineerCommented:
blabla/test.htm?int=60 in FireFox
0
 
Cem TürkSenior Software EngineerCommented:
well i worked a little more and here is a modified version of my script (inspired from Zvonko) and it works fine on IE and FF

<html>
<head>
<title>Zvonko &#42;</title>
<script>
var p_limit=60;
function beginRefresh(){
   if (!document.images) {
      return
   }

   var is_hdr_checked = window.document.form_hdr_cbx.cbx_refresh;
   var is_hdr_checked2 = window.document.form_hdr_cbx2.cbx_refresh2;

   if (is_hdr_checked.checked == false) {
       window.status="Page refresh suspended"
      return
   }

      if (is_hdr_checked2.checked == false) {
       window.status="Page refresh suspended"
      return
   }

   if (p_limit==1) {
if(window.location.search!="") {
x=String(window.location);
x=x.replace(window.location.search,'');

      window.location=x + "?int=" + document.form_hdr_cbx.limit.options[document.form_hdr_cbx.limit.selectedIndex].value;
}
            else { window.location=window.location +"?int=" + document.form_hdr_cbx.limit.options[document.form_hdr_cbx.limit.selectedIndex].value;}
   } else {
      p_limit-=1
      c_min=Math.floor(p_limit/60)
      c_sec=p_limit%60
      if (c_min!=0) {
         c_time=c_min+" minutes and "+c_sec+" seconds left until page refresh"
      } else {
         c_time=c_sec+" seconds left until page refresh"
      }
      window.status=c_time
      setTimeout("beginRefresh()",1000)
   }
}

window.onload=function(){
 if(window.location.search!="") {
p_limit=parseInt(window.location.search.replace('?int=',''));
document.form_hdr_cbx.limit.value=parseInt(window.location.search.replace('?int=',''));
}


  beginRefresh();
}

//
</script>
</head>
<body>
<form name="form_hdr_cbx">
<select id="limit" name="limit" onChange="p_limit=this.value">
<option value="5">00:05
<option value="30">00:30
<option value="60" selected>01:00
<option value="90">01:30
</select>
<hr>
<input type=checkbox name="cbx_refresh" checked> Suspend1
</form>
<form name="form_hdr_cbx2">
<input type=checkbox name="cbx_refresh2" checked> Suspend2<br>
</form>
</body>
</html>
0
 
rwinnickAuthor Commented:
Hi Guys -

Tried Zvonko's code and it works fine for awhile -

But every now and then when the page reloads it loses the full URL with the page and it returns the URL with only &time=1147220422140

for example www.foo.com/mypage.html turns into www.foo.com/&time=1147220422140

so the page doesn'treload and you get a file not found error -

ideas ????

thanks -

Richard
0
 
xlt77Commented:
A slight "fix" for  Zvonko's code.

Replace the line
url = ((url.split("?").length>1)?"&":"?")+"time="+(new Date()).getTime();
To
url += ((url.split("?").length>1)?"&":"?")+"time="+(new Date()).getTime();

Here's the code
----------------------------------------------------------------------------------------

<html>
<head>
<title>Zvonko &#42;</title>
<script>

var p_limit=60;

function beginRefresh(){

   if (!document.images) {
      return
   }

   var is_hdr_checked = window.document.form_hdr_cbx.cbx_refresh;
   var is_hdr_checked2 = window.document.form_hdr_cbx2.cbx_refresh2;

   if (is_hdr_checked.checked == false) {
       window.status="Page refresh suspended"
      return
   }

      if (is_hdr_checked2.checked == false) {
       window.status="Page refresh suspended"
      return
   }

   if (p_limit==1) {
      var url = window.location.href.split("#")[0];
      url = url.replace(/[?&]time=\d+/g,"");
      url += ((url.split("?").length>1)?"&":"?")+"time="+(new Date()).getTime();
      url += "#"+document.form_hdr_cbx.limit.value;
      window.location=url;
   } else {
      p_limit-=1
      c_min=Math.floor(p_limit/60)
      c_sec=p_limit%60
      if (c_min!=0) {
         c_time=c_min+" minutes and "+c_sec+" seconds left until page refresh"
      } else {
         c_time=c_sec+" seconds left until page refresh"
      }
      window.status=c_time
      setTimeout("beginRefresh()",1000)
   }
}

window.onload=function(){
  if(window.location.hash){
    p_limit=location.hash.substr(1);
    document.form_hdr_cbx.limit.value=p_limit;
  }
  beginRefresh();
}

//
</script>
</head>
<body>
<form name="form_hdr_cbx">
<select name="limit" onChange="p_limit=this.value">
<option value="05">00:05
<option value="30">00:30
<option value="60" selected>01:00
<option value="90">01:30
</select>
<hr>
<input type=checkbox name="cbx_refresh" checked> Suspend1
</form>
<form name="form_hdr_cbx2">
<input type=checkbox name="cbx_refresh2" checked> Suspend2<br>
</form>
</body>
</html>
0
 
ZvonkoSystems architectCommented:
Thanks xlt77, I was absolutely sure I have written +=  
Now I wonder why my tests did not fail???

Richard, does it work now with the plus character added by xlt77?
0
 
xlt77Commented:
Zvonko:
  Mybe your tests were on local file.
  For local file, your code runs well.
0
 
ZvonkoSystems architectCommented:
Yes, I tested it on local file in browser only without web server.
0
 
xlt77Commented:
I think the reason is :

'window.location = url' should combine website directory to generate the new navigated url.

for local file, IE get directory just same as the local file, but for web site, IE get directory erasing the page file name.
0
 
rwinnickAuthor Commented:
Hi Guys -

Code seems to run OK - but still get 404 file not found now and then -
Will accept xlt77 and split with Zvonko
and open new question regarding 404 error with additional points-
thanks for the help and please look for new question -
Richard
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 6
  • 5
  • 3
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now