Solved

60 second time (AJAX (or) JQuery)

Posted on 2010-09-02
17
665 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
  • 9
  • 3
  • 3
  • +1
17 Comments
 
LVL 17

Expert Comment

by:ram_0218
Comment Utility
all your trying to do is:

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

Author Comment

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

Thank you
Carrzkiss
0
 
LVL 17

Expert Comment

by:ram_0218
Comment Utility
<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
 
LVL 40

Assisted Solution

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

Author Comment

by:Wayne Barron
Comment Utility
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
Comment Utility
<<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 30

Author Comment

by:Wayne Barron
Comment Utility
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
Comment Utility
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
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 
LVL 30

Author Comment

by:Wayne Barron
Comment Utility
>>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
Comment Utility
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 30

Author Comment

by:Wayne Barron
Comment Utility
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 30

Author Comment

by:Wayne Barron
Comment Utility
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
Comment Utility
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 30

Author Comment

by:Wayne Barron
Comment Utility
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 30

Author Closing Comment

by:Wayne Barron
Comment Utility
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
Comment Utility
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 30

Author Comment

by:Wayne Barron
Comment Utility
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

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

The Confluence of Individual Knowledge and the Collective Intelligence At this writing (summer 2013) the term API (http://dictionary.reference.com/browse/API?s=t) has made its way into the popular lexicon of the English language.  A few years ago, …
OverviewThis article demonstrates a simple search form using AJAX. The purpose of the article is to demonstrate how to use the same code to render a page and javascript (JQuery) and AJAX to make subsequent calls to refine the results. The princip…
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…

763 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

Need Help in Real-Time?

Connect with top rated Experts

5 Experts available now in Live!

Get 1:1 Help Now