dynamically load clock using ajax in qtip

[ramzyo5]

Hi Craig,

First off, thanks for the great plug-in!

I'm having trouble trying to display a clock in a qtip. Basically, I have a php page on my server that simply outputs the current time as a string. I found a previous thread where another user was trying to dynamically load content using AJAX each time a qtip was shown. I've implemented the code you wrote in response to that thread as such:

JS Code

api: {
      beforeShow: function update(){
         var url = this.options.content.url;
         var method = this.options.content.method;
         this.loadContent(url, method);
 
      }
     }

where url is a string that I defined earlier in the script. This works fine, and the content updates each time the qtip is shown, but what I'd really like to do is have the content in the qtip refresh every second while the qtip is being shown. In other words, so long as the qtip is visible, the content refreshes every second without the user having to move the mouse off the qtip and hover over it again. I thought I could try using the setTimeout function, but I haven't gotten very far with that. Do you have any suggestions?

Thanks in advance,

Ryan

[Craig]

That seems like an awfully wasteful process. Why don't you just generate the initial time on the server and use JS's native Date object to countdown?

[ramzyo5]

(8th February 23:37)Craig Wrote:  That seems like an awfully wasteful process. Why don't you just generate the initial time on the server and use JS's native Date object to countdown?

Agreed about the JS Date object...but it's actually not a clock that I'm trying to display (was saying that for simplicity, but the real application is a little different). The PHP file is actually being used to query a mySQL database that contains a field with the start time of a particular process. The PHP script calculates the difference between the current time and the process start time and outputs how long that process has been active along with some other stats.

[Craig]

Well if you return some UNIX timestamps in a JSON wrapper you can use the Date object to parse it.

JS Code

ajax: {
	url: 'date.php',
	dataType: 'json',
	success: function(dates) {
		var d1 = new Date(dates.until),
			d2 = new Date(dates.other);
 
		// do something
	}
}