Develop Reference

countdown function keeps on looping after 12 seconds - please assist

I have a PHP page that consists of many data and functions of it, so whenever I click to go to this specific page it loads around 12 seconds. So to notify the user, I have included the below code but it refreshes again and again by decreasing <=0 but the data is already there after 12 seconds completed. Please assist on which line of code I need to change below. Thank you.
<p align="center">You will be redirected in <span id='counter'>12</span> second(s).</p>
<script type='text/javascript'>
function countdown() {
var i = document.getElementById('counter');
if (parseInt(i.innerHTML)<=0) {
location.href = 'studentPredict.php';
}
i.innerHTML = parseInt(i.innerHTML)-1;
}
setInterval(function(){ countdown(); },1000);
</script>'";

Like I said in the comments.
I think you can better load the content with an ajax call instead of a redirect. And show the user a message that the content is loading if you whant you can add a timmer to it so the visitor know how long it will probelly take.
More info about ajax: https://www.w3schools.com/js/js_ajax_intro.asp
If the data doent change that much, cache the data for a specific time so the next request will load much faster. You can cache it in a file or in your system ram with apcu, redis, memcache... Some server dont allow ram cache you need an external server(wich i don't recommend) or cache it in files

Periodically reload a page in Rails 4 using Turbolinks

I have a page that displays some status information. This page runs on a PC without any user input and needs to refresh each few minutes.
I can get it to refresh with the meta tag but this seems crude. It forces the refresh of all the assets and causes that ugly flicker. Turbolinks does a nice job everywhere else with smarter page loading. Can I get this to work with an automatic refresh?
I'd appreciate any advice on how I can make this work better.

Here is what I recently used under Turbolinks 5. Had to add some variables to stop it from reloading once the user browsed away from the page, etc.
<script>
if(!window.reloadTimer) {
var SECONDS = 30;
window.reloadTimer=setTimeout(function(){
console.log("Reload!");
window.reloadTimer=undefined;
Turbolinks.visit(location.toString(),{action: "replace"});
}, SECONDS * 1000);
document.addEventListener("turbolinks:visit",function() {clearTimeout(window.reloadTimer);window.reloadTimer=undefined;});
}
</script>

Try this:
$(document).on('ready page:load', function() {
var SECONDS = 5;
setTimeout(function(){
Turbolinks.enableTransitionCache(true);
Turbolinks.visit(location.toString());
Turbolinks.enableTransitionCache(false);
}, SECONDS * 5);
});

Trying to remove this code without the need to put it in a seperate page

My index.html page has a fancy animation to begin with it is essentially this code below...
$(document).ready(function() {
setTimeout(function() {
$("#loader-wrapper .loader-section, #textbit, #logo, #wrapper").hide("slow");
$("#wrapper").unwrap();
}, 11000);
});
..... so once this code has run its 11 seconds it all gets unwrapped and thats great... Problem is I have an a tag to get back to the index page at any time and I don't want people to have to wait for the intro animation to run before getting to the homepage every time....
I will not accept any answer that says .."do the animation on a seperate page" - the code has to be on the index page itself.
I was hoping there was some sort of jquery that will remove the code until the browser page has been refreshed, something like that.. Really appreciate any help here.
EDIT -- Getting some initial feedback that this is unclear ... in step for ...
User goes to index.html
the above code begins and lasts for 11 seconds.
then it gets unwrapped and disappears.
Seperatly while the user is enjoying the site they click on the "home" logo.
this takes people back to the index.html page
Unfortunately they have an 11 seconds wait every time and i want this to stop unless they refresh the browser or something.

You could use something like localStorage or cookies on your server side to manage this.
Here's the local storage example:
$(document).ready(function() {
if( !window.localStorage || !window.localStorage.getItem('hpAnim') ) {
setTimeout(function() {
$("#loader-wrapper .loader-section, #textbit, #logo, #wrapper").hide("slow");
$("#wrapper").unwrap();
}, 11000);
if( window.localStorage ) {
window.localStorage.setItem('hpAnim', true)
}
}
} );
So now (in IE8+) the second and future pageloads will not run the animation.
On the other hand if you've got a single page JavaScript app and you want it to re-run only after page refresh (as per comments on question), then you can skip local storage and simply set a global variable on window:
window.hasSeenAnimation = true
And then check that condition before running the animation again. After a page refresh that variable will be gone.

Set a cookie the 1st time that the users waits 11 secs
Can use https://github.com/carhartl/jquery-cookie or with native javascript code.
As well you can use a localstore var or url query
$(document).ready(function() {
if ($.cookie("index_viewed") == 1) {
return;
} else {
setTimeout(function() {
$("#loader-wrapper .loader-section, #textbit, #logo, #wrapper").hide("slow");
$("#wrapper").unwrap();
$.cookie("index_viewed", 1);
}, 11000);
}
});

You can set a $_GET variable and then check for this. If it's there, it must be an internal link so don't load the animation:
Home
<?php
if (!isset($_GET['noAnim']))
{
?>
<script>
// your animation script goes here....
</script>
<?php
}
?>

Assuming that you only want that animation to run at "startup" (when directly pointed) you could check the tab history count:
history.length
This will return a value higher than 1 only if any navigation took place on the tab (going to index from any other page).
This is not a perfect solution though:
Cross browser issues (some return 0, others 1)
Every navigation on this tab will produce history, hence, if you navigate to your website after checking any other page, history will return a value higher than the initial. (you can also check the document.referrer to ease this issue)
If you can't afford to skip the animation on those conditions you must persist the fact that the animation had already ran, and you should aim for Local Storage, for example (as mentioned earlier) http://www.w3schools.com/html/html5_webstorage.asp

Refresh Page for interval using js

How can i refresh a page for every one minute using javascript.
Note: I don't have control/option to edit HTML body tag (where we usually call onload function).

Just insert this code anywhere in the page:
<script type="text/javascript">
setTimeout(function(){
location = ''
},60000)
</script>

<script type="text/javascript">
setTimeout(function () {
location.reload();
}, 60 * 1000);
</script>
setTimeout will reload the page after a specified number of milliseconds, hence 60 * 1000 = 1m. Also, since the page is being refreshed, the timeout will always be set on page load.

You do not need to have the code in the body tag. Just add this snippet below and it should work no matter where it is in the page.
<script type="text/javascript">
setInterval('window.location.reload()', 60000);
</script>
As long as you can access the HTML some where and your editor doesn't filter out tags you should be fine. If your editor has a separate area for JavaScript code then just enter setInterval line. :)

Here's the thing mate!
(Point 4 is for this particular question)
1). If you want to reload the same windows over and over again then just execute
window.location.reload()
2). If you want to hard reload from the server then execute
window.location.reload(true)
(basically, just pass true as a boolean arg to the same line of code)
3). If you want to do the same job as point 1 and 2 with a time out. i.e. execute the reload after some time JUST ONCE, then execute
setTimeout("window.location.reload()",10000);
(this should execute on the window after 10 sec. JUST ONCE)
4). If you want to keep reloading the window with a certain timeout then execute
setInterval("window.location.reload()",10000);
(this should execute on the window after 10 sec. with 10 sec. for the interval)
Surely,there're many ways to pass a callback..
setInterval(function(){window.location.reload();},10000);
or
<code>
function call1(){
location.reload(true);
}
setInterval(call1,10000);
</code>
Note:
-Have a look at MDN Guides for [setTimeout][1] and [setInterval][2] functions.
-Using the window object is optional but good to be used. (window is a global object and already available to your current window.)

If you don't want to edit the page, here's the trick. Open the console and write the below-mentioned snippet.
INTERVAL = 5 // seconds
STOP_AFTER = 15 // seconds
// Open the same link in the new tab
win1 = window.open(location.href);
// At every 5 seconds, reload the page
timer1 = setInterval(() => {
win1.location.reload();
console.log("Refreshed");
},INTERVAL*1000)
// Stop reloading after 15 seconds
setTimeout(() => clearInterval(timer1), STOP_AFTER*1000)
Since you want to reload it, you can not simply write location.reload() since the console will be cleared once it is reloaded.
Therefore, it will open a new tab with the same link. It will be easily able to control the 2nd tab using the console of the 1st tab.

When your URL has parameters, it seems that using location = '' doesn't work in IE8. The page reloads without any parameters.
The following code works for me :
<script type="text/javascript">
setTimeout(function(){
window.location.href = window.location.href;
},10000)
</script>

Javascript delayed loading blanks page

On a website I'm working on, I need to load a tracking script 10 seconds after the page loads. I found a snippet to do so, but I've hit a snag. After waiting 10 seconds, the page goes white. The URL doesn't seem to change, but the page is no longer visible and the throbber starts spinning.
Here's what I'm using to load the script:
function $import(src){
var scriptElem = document.createElement('script');
scriptElem.setAttribute('src',src);
scriptElem.setAttribute('type','text/javascript');
document.getElementsByTagName('head')[0].appendChild(scriptElem);
}
// import with a random query parameter to avoid caching
function $importNoCache(src){
var ms = new Date().getTime().toString();
var seed = "?" + ms;
$import(src + seed);
}
//
// Tracker options go here...
//
setTimeout(function(){
$importNoCache("http://tracking.code/url");
}, 10 * 1000);
Is there a better way to do this?
EDIT: I stepped through the code in Firebug, and the scripts works like it should. With Firebug's debugger off, it blanks the page as I described above.

This would happen if the script calls document.write.
Can you show us the script that you're loading?

The code looks fine, so the problem is probably in the tracking code. If it contains a document.write() call, it will work fine when included normally, but wipe out the page when included after the page has finished loading.
Edit:
Yep, the tracking script does d=document, then calls d.write() later on... you won't be able to include this script after the page has finished loading.