- Forums
- Javascipt
- Simple Ajax Javascript Redirect Timer With Countdown
do you want to load a page after the ajax call has been completed to load a page you want with a timer like how many seconds you want before it loads [840], Last Updated: Sat May 18, 2024
carlos
Wed Dec 14, 2011
0 Comments
1444 Visits
in my quest to find a way to use a redirect loader timer using javascript for my ajax, i have found the only way i have been able to use one is from the following example:
javascript redirect timer with countdown
http://www.quietaffiliate.com/countdown-timer-site-redirect-javascript-code-for-your-affiliate-links
this is the only function i have been able to implement when the ajax call completes then i trigger the function from the ajax content, so this will help in call javascript function after ajax call
so here is how i was able to accomplish this:
note: this was tested on firefox,internet explorer and chrome
first. lets create the HTML file: copy and paste this code for the
simple.htmlsimple.html<html>
<head>
<!-- PROVIDED BY WWW.WALLPAPERAMA.COM -->
<!-- SUPPORT: http://www.wallpaperama.com/forums/_wpxemr.html-->
<!-- THIS IS A SIMPLE AJAX EXAMPLE WHERE YOU CAN TRIGGER AN FUNCTION FROM THE AJAX CALL OUTPUT CONTENT -->
<script type="text/javascript">
function loadXMLDoc(){
if (window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}else{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
if(document.getElementById('MyRefUrl').value !='none'){
countdownRedirect(document.getElementById('MyRefUrl').value, document.getElementById('MyRefUrl').name,document.getElementById('MyRefUrl').alt);
}
}
}
xmlhttp.open("GET","simple.php",true);
xmlhttp.send();
}
function countdownRedirect(V3RefUrl, V3CounterMsg,CntTimer){
/* http://www.quietaffiliate.com/countdown-timer-site-redirect-javascript-code-for-your-affiliate-links */
var TARG_ID = "myDiv";
var DEF_MSG = "Redirecting...";
if( ! V3CounterMsg ){
V3CounterMsg = DEF_MSG;
}
if( ! V3RefUrl ){
V3RefUrl = 'http://www.wallpaperama.com';
}
var e = document.getElementById(TARG_ID);
if( ! e ){
throw new Error('"COUNTDOWN_REDIRECT" element id not found');
}
var cTicks = CntTimer;
var timer = setInterval(function(){
if( cTicks ){
e.innerHTML = V3CounterMsg + ' <br><br>'+ --cTicks +' ';
}else{
clearInterval(timer);
document.body.innerHTML = V3CounterMsg;
location = V3RefUrl;
}
}, 1000);
}
</script>
</head>
<body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onClick="loadXMLDoc()">Execute simple.php</button>
</body>
</html>
next, we need to create a second file called
simple.php so we can display the content from the php file:
simple.php<?php
############### COPYRIGHT WWWW.WALLPAPERAMA.COM ##############
$Timer = 30; //seconds
$RedirectUrl = 'http://www.wallpaperama.com';
$Message = 'Hi, This is the Ajax Results from simple.php file<br><br>Redirecting to: '.$RedirectUrl;
echo '<input type="hidden" id="MyRefUrl" value="'.$RedirectUrl.'" alt="'.$Timer.'" name="'.$Message.'">';
echo "this text is from simple.php";
?>
this took me about a year to figure out. i looked everywhere in the internet and googled it but always found some sort of comment to use eval() function in javascript. it was really hard to come to this point, but im sharing here just incase i can help someone
thanks to webune.com for their support and putting up with me