Solved

60 second time (AJAX (or) JQuery)

Posted on 2010-09-02
17
684 Views
Last Modified: 2012-05-10
Hello All;

I found the code below and modified it and added in a trigger function.
This works well, but what I need it to do is::

(I have it set at 5 seconds for testing, it will be set at 60 seconds in the real world application)

Once it counts down to 0
It triggers the event. (This part works)
Then resets itself and starts all over again (This part does not work)

Can someone take a look at this and see if they can get it to function like I need it to?

Also.
Will this be a good enough one that will run on a continious basis?
As in, for hours at a time?
Basically, it counts down from 60 - 0
Then Triggers
Then counts again
Then Triggers
Then does it over and over again until the user leaves the page?

If this will not handle that type of load, can someone please provide one that will?

Thank you
Carrzkiss
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset:utf-8"> 
<title>Countdown timer to trigger a refresh function</title> 

<script type="text/javascript"> 
function MyRefreshBox(){
var xmlHttpCor;
	try{	
		xmlHttpCor=new XMLHttpRequest();// Firefox, Opera 8.0+, Safari
	}
	catch (e){
		try{
			xmlHttpCor=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
		}
		catch (e){
		    try{
				xmlHttpCor=new ActiveXObject("Microsoft.XMLHTTP");
			}
			catch (e){
				alert("No AJAX!?");
				return false;
			}
		}
	}
xmlHttpCor.onreadystatechange=function(){
	/*if(xmlHttpCor.readyState==4){*/
		document.getElementById('tableContainer').innerHTML=xmlHttpCor.responseText;		
	/*}*/
}
xmlHttpCor.open("GET","http://192.168.2.9/site",true);
xmlHttpCor.send(null);
}



var Countdowntimer = function() { 
this.s = null; // The seconds left in the timer 
this.reset = null; // The seconds to reset the timer to 
this.el = null; // The element container used to draw the timer 
this.timerId = null; // The timerId as provided by setTimeout 
return { 
/** 
* Initialize the timer with the number of seconds and the element that 
* will be used to draw the timer. 
* @param {Integer} s The number of seconds in the timer 
* @param {String} el The id of the element whose contents will be replaced 
*/ 
init : function(s, el) { 
Countdowntimer.s = s; 
Countdowntimer.reset = s; 
Countdowntimer.el = document.getElementById(el); 
}, 
/** 
* Draw the timer and then start the countdown 
*/ 
start : function() { 
Countdowntimer.draw(); 
if (Countdowntimer.s > 0 &&!Countdowntimer.timerId) { 
Countdowntimer.timerId = setTimeout(Countdowntimer.step, 1000); 
} 
}, 
/** 
* If the timer has reached zero, notify the user. Otherwise, decrement 
* it, draw it, and call this method again in 1 second. 
*/ 
step : function() { 
if (Countdowntimer.s > 0) { 
Countdowntimer.s--; 
Countdowntimer.draw(); 
Countdowntimer.timerId = setTimeout(Countdowntimer.step, 1000); 
} 
else { 
MyRefreshBox() /*This is the line that needs to call the other function, then after it does that, resets and starts over again.*/


} 
}, 
/** 
* Draw the value of the timer in the container element. 
*/ 
draw : function() { 
Countdowntimer.el.innerHTML = Countdowntimer.s; 
} 
}; 
}(); 
window.onload = function() { 
Countdowntimer.init(5,'countdown'); 
Countdowntimer.start();
} 
</script> 
</head> 
<body> 
<div id="countdown"></div> 
<div id="tableContainer"></div> 
</body> 
</html>

Open in new window

0
Comment
Question by:Wayne Barron
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 9
  • 3
  • 3
  • +1
17 Comments
 
LVL 17

Expert Comment

by:ram_0218
ID: 33585968
all your trying to do is:

function MyRefreshBox() {
  startPol();
  //ajax call
}
function startPol() {
    setTimeout('MyRefreshBox',5000);
}
0
 
LVL 31

Author Comment

by:Wayne Barron
ID: 33586034
Maybe...
Could you show a demostration of this in a working code?

Thank you
Carrzkiss
0
 
LVL 17

Expert Comment

by:ram_0218
ID: 33586110
<script language='javascript'>
 function MyRefreshBox() {
      alert('Need to make an ajax call now');
      startPol();
 }

function startPol() {
    setTimeout('MyRefreshBox()',5000);
}
</script>
<body onload='javascript:startPol();'>
Test
</body>
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!

 
LVL 40

Assisted Solution

by:gurvinder372
gurvinder372 earned 200 total points
ID: 33586114
replace line number 29/30 by
Countdowntimer.init(5,'countdown');
Countdowntimer.start();
0
 
LVL 31

Author Comment

by:Wayne Barron
ID: 33586374
Just ran my test.

@ram
Your code is about right, but does not show the time counting down. This is a must...

@gurvinder
Yours makes it start over at the 5, but does not initialize the counter to start counting down.

BIG BUG!!!

Neither of the 2 options/codes will work in FireFox.
So.
This is a bust.

Any idea's on some functional codes that will work across browser platforms?

Carrzkiss
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 33586504
<<Yours makes it start over at the 5, but does not initialize the counter to start counting down.>>
what output is it giving?
0
 
LVL 31

Author Comment

by:Wayne Barron
ID: 33586606
Just shows the    5

But does not start counting down.

Unless this script will work with FF and other browsers, I will be unable to use it.
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 33586637
Please check your console for any errors.
Just wondering why even "Countdowntimer.start();" is not starting the count down, while it works in the window.onload method
0
 
LVL 31

Author Comment

by:Wayne Barron
ID: 33586881
>>Please check your console for any errors.
I do not run a Java console, unless you are referring to the built in ones in FF.

This is the code as it stands, with your added snipets.
When it and you will see that it will open Google, and show [5]
But will not doing anything else.

In FF, it will countdown, then reset itself to [5]
But will not display the page within the <div>
So, I am stuck on FFdoing what it is suppose to do.

I even added back in the
           if(xmlHttpCor.readyState==4)
But still a no go with FF displaying the <div>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset:utf-8"> 
<title>Countdown timer to trigger a refresh function</title> 

<script type="text/javascript"> 
function MyRefreshBox(){
var xmlHttpCor;
	try{	
		xmlHttpCor=new XMLHttpRequest();// Firefox, Opera 8.0+, Safari
	}
	catch (e){
		try{
			xmlHttpCor=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
		}
		catch (e){
		    try{
				xmlHttpCor=new ActiveXObject("Microsoft.XMLHTTP");
			}
			catch (e){
				alert("No AJAX!?");
				return false;
			}
		}
	}
xmlHttpCor.onreadystatechange=function(){
	/*if(xmlHttpCor.readyState==4){*/
	/*This line gives an error after the refresh*/
	document.getElementById('tableContainer').innerHTML=xmlHttpCor.responseText;
	/*This line start the counter over at 5*/
Countdowntimer.init(5,'countdown'); 
/*This lines does nothing, will not initialize*/
Countdowntimer.start();				

}
xmlHttpCor.open("GET","http://www.google.com",true);
xmlHttpCor.send(null);
}



var Countdowntimer = function() { 
this.s = null; // The seconds left in the timer 
this.reset = null; // The seconds to reset the timer to 
this.el = null; // The element container used to draw the timer 
this.timerId = null; // The timerId as provided by setTimeout 
return { 
/** 
* Initialize the timer with the number of seconds and the element that 
* will be used to draw the timer. 
* @param {Integer} s The number of seconds in the timer 
* @param {String} el The id of the element whose contents will be replaced 
*/ 
init : function(s, el) { 
Countdowntimer.s = s; 
Countdowntimer.reset = s; 
Countdowntimer.el = document.getElementById(el); 
}, 
/** 
* Draw the timer and then start the countdown 
*/ 
start : function() { 
Countdowntimer.draw(); 
if (Countdowntimer.s > 0 &&!Countdowntimer.timerId) { 
Countdowntimer.timerId = setTimeout(Countdowntimer.step, 1000); 
} 
}, 
/** 
* If the timer has reached zero, notify the user. Otherwise, decrement 
* it, draw it, and call this method again in 1 second. 
*/ 
step : function() { 
if (Countdowntimer.s > 0) { 
Countdowntimer.s--; 
Countdowntimer.draw(); 
Countdowntimer.timerId = setTimeout(Countdowntimer.step, 1000); 
} 
else { 
MyRefreshBox() /*This is the line that needs to call the other function, then after it does that, resets and starts over again.*/


} 
}, 
/** 
* Draw the value of the timer in the container element. 
*/ 
draw : function() { 
Countdowntimer.el.innerHTML = Countdowntimer.s; 
} 
}; 
}(); 
window.onload = function() { 
Countdowntimer.init(5,'countdown'); 
Countdowntimer.start();
} 
</script> 
</head> 
<body> 
<div id="countdown"></div> 
<div id="tableContainer" style="height:500px; width:500px;"></div> 
</body> 
</html>

Open in new window

0
 
LVL 22

Accepted Solution

by:
kadaba earned 300 total points
ID: 33588134
Guys,
Did you try to reset the values?

the step function should be

step : function() {
if (Countdowntimer.s > 0)
{
    Countdowntimer.s--;
    Countdowntimer.draw();
    Countdowntimer.timerId = setTimeout(Countdowntimer.step, 1000);
}
else
{
    Countdowntimer.s = Countdowntimer.reset;    Countdowntimer.timerId = null;
    MyRefreshBox() /*This is the line that needs to call the other function, then after it does that, resets and starts over again.*/
}
}

in the ready state

xmlHttpCor.onreadystatechange=function(){
    /*if(xmlHttpCor.readyState==4){*/
    /*This line gives an error after the refresh*/
   
    //if (xmlHttpCor.readyState==4 && xmlHttpCor.status==200)
    if (xmlHttpCor.readyState==4)
    {
        document.getElementById('tableContainer').innerHTML=xmlHttpCor.responseText;
        /*This line start the counter over at 5*/
        //Countdowntimer.init(5,'countdown');
        /*This lines does nothing, will not initialize*/
       Countdowntimer.start();                
    }
}

The reason why the start is not triggering is because of the conditions mentioned:
if (Countdowntimer.s > 0 &&!Countdowntimer.timerId) {

you should be able to see the timer reset and start


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset:utf-8"> 
<title>Countdown timer to trigger a refresh function</title> 

<script type="text/javascript"> 
function MyRefreshBox(){
var xmlHttpCor;
	try{	
		xmlHttpCor=new XMLHttpRequest();// Firefox, Opera 8.0+, Safari
	}
	catch (e){
		try{
			xmlHttpCor=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
		}
		catch (e){
		    try{
				xmlHttpCor=new ActiveXObject("Microsoft.XMLHTTP");
			}
			catch (e){
				alert("No AJAX!?");
				return false;
			}
		}
	}
xmlHttpCor.onreadystatechange=function(){
	/*if(xmlHttpCor.readyState==4){*/
	/*This line gives an error after the refresh*/
	
	//if (xmlHttpCor.readyState==4 && xmlHttpCor.status==200)
	if (xmlHttpCor.readyState==4)
    {
		document.getElementById('tableContainer').innerHTML=xmlHttpCor.responseText;
		/*This line start the counter over at 5*/
		//Countdowntimer.init(5,'countdown'); 
		/*This lines does nothing, will not initialize*/
		Countdowntimer.start();				
	}
}
xmlHttpCor.open("GET","http://www.google.com",true);
xmlHttpCor.send(null);
}



var Countdowntimer = function() { 
this.s = null; // The seconds left in the timer 
this.reset = null; // The seconds to reset the timer to 
this.el = null; // The element container used to draw the timer 
this.timerId = null; // The timerId as provided by setTimeout 
return { 
/** 
* Initialize the timer with the number of seconds and the element that 
* will be used to draw the timer. 
* @param {Integer} s The number of seconds in the timer 
* @param {String} el The id of the element whose contents will be replaced 
*/ 
init : function(s, el) { 
Countdowntimer.s = s; 
Countdowntimer.reset = s; 
Countdowntimer.el = document.getElementById(el); 
}, 
/** 
* Draw the timer and then start the countdown 
*/ 
start : function() { 
Countdowntimer.draw(); 
if (Countdowntimer.s > 0 &&!Countdowntimer.timerId) { 
Countdowntimer.timerId = setTimeout(Countdowntimer.step, 1000); 
} 
}, 
/** 
* If the timer has reached zero, notify the user. Otherwise, decrement 
* it, draw it, and call this method again in 1 second. 
*/ 
step : function() { 
if (Countdowntimer.s > 0) 
{ 
	Countdowntimer.s--; 
	Countdowntimer.draw(); 
	Countdowntimer.timerId = setTimeout(Countdowntimer.step, 1000); 
} 
else 
{ 
	Countdowntimer.s = Countdowntimer.reset;
	Countdowntimer.timerId = null;
	MyRefreshBox() /*This is the line that needs to call the other function, then after it does that, resets and starts over again.*/
} 
}, 
/** 
* Draw the value of the timer in the container element. 
*/ 
draw : function() { 
Countdowntimer.el.innerHTML = Countdowntimer.s; 
} 
}; 
}(); 
window.onload = function() { 
Countdowntimer.init(5,'countdown'); 
Countdowntimer.start();
} 
</script> 
</head> 
<body> 
<div id="countdown"></div> 
<div id="tableContainer" style="height:500px; width:500px;"></div> 
</body> 
</html>

Open in new window

0
 
LVL 31

Author Comment

by:Wayne Barron
ID: 33588285
That rocks.
Thanks for that kadaba
BUT
The issue still remains.
It does not refresh the <div> in FF

And In IE, after it does the refresh, and starts the time again.
I get an error on

===========================
Message: 'google' is undefined
Line: 6
Char: 1
Code: 0
URI: file:///G:/InetPub/wwwroot/Testing/Javascript/timer3.html
===========================

This is pointing to the URL of: www.google.com
Why? Strang.
 
0
 
LVL 31

Author Comment

by:Wayne Barron
ID: 33588354
FF seems to be working.
Just does not like to load google into the page.
BUT, I am doing a regular text file and it is updating it.
As i am adding in information and it seems to be doing alright.

Not sure about the IE error, as right now IE has crashed on running my inhouse site.
And I have to reboot to complete my testing....
0
 
LVL 22

Expert Comment

by:kadaba
ID: 33588402
Not sure about the IE error, as right now IE has crashed on running my inhouse site.
And I have to reboot to complete my testing....


Oh I am really sorry, I don't know why IE has the error, I had a look at FF I don't see any response coming.

If you have a link to test I will have a look at it in IE.
0
 
LVL 31

Author Comment

by:Wayne Barron
ID: 33588491
IE only has the error when I load google.com
(Go figure...???)
I am still confused on that one.

BUT.
It is working on FF and IE and without any errors on the test links for my actual site.
I would test Google Chrome but that crappy browser has a problem with doing inhouse live updated/refresh on pages.
 (Google says it is the best browser, but I am not impressed with all the blasted issues)

I beleive this is wrapped up.
Thank you all for your time on this one.
This code will hopefully do what I need and without issue.
The real test is when I actually add it to the live test site later on today.

Once again.
Thank you.
Carrzkiss
0
 
LVL 31

Author Closing Comment

by:Wayne Barron
ID: 33588527
Thanks guys.

1 more question though.
I will be having multiple refreshing going on.
Do I only need to have:

Countdowntimer.start();

In only 1 Ajax function?
I am thinking that will be enough, as just one needs to trigger it.

Once again.
Thanks guys, and have a great day.

Carrzkiss
0
 
LVL 22

Expert Comment

by:kadaba
ID: 33588623
IE only has the error when I load google.com
(Go figure...???)
I am still confused on that one.


Since they might have custom scripts running, I guess it might be an issue while loading.

(Google says it is the best browser, but I am not impressed with all the blasted issues)
You know, IE 9 and FF 4 have adhered to HTML 5 standards and seems have high speed in js execution. Seems IE 9 fared better to FF 4 and guess what Chrome fared better than them :), Will be nice to see how they will be.


I will be having multiple refreshing going on.
you can do it either way. controlling all the refreshing with one object or have many to do so.
You could even reuse the XMLHttprequest object.

Thanks for the points and good luck with the project.
- $kadaba
0
 
LVL 31

Author Comment

by:Wayne Barron
ID: 33588731
If Chrome fared better then that would be great IF
They fix that one annoying aggrivating bug that:
Fresh Local Pages.

Thank you one again.
Take Care and have a great day.

Carrzkiss

0

Featured Post

Industry Leaders: 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!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Worldmap 1 28
ModalPopup  question 22 38
arrays and buttons with user input 2 32
How to pass values to HTML-5 attribute dynamically? 24 44
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

740 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question