JQuery PeriodicalUpdater (AJAX long polling/server polling)

Just an FYI: a function call is pretty expensive in Javascript. Whether “expensive” is “more expensive than a conditional” is a different question though.

Greetings Robert,

A bit confused when I look at your example code in comparison to your README file. In the README file you describe the usage as “$.PeriodicalUpdater(‘/path/to/service’, {…”
In the example you have “$.PeriodicalUpdater({url:”queryMe.html”},”.
The first mangles any “sendData’ I include, and the second throws a fatal error. Trying to find out why that is, but have come to the decision that you’re in a much better position to discover it much more quickly than me. Appreciate your work, as well as John McCollumn’s!!

Kenneth Stein

Thanks for your quick response Robert.

SendData is one of the Settings for periodicalUpdater, namely an array of values to be passed – e.g. {name: “John”, greeting: “hello”}. SEE the README file.

The example you provide at Github doesn’t use the sendData setting, and it doesn’t seem to be passing the information into the ajax call.

John McCollum’s implementation passes the sendData setting infor without any problem. Something broke in the refactoring it seems.

It’s awesome that you really got after this code and tightened it up. Just hoping that in doing so you haven’t uncovered something more problematic. Will be looking for your response.

Bingo! Thanks again Robert. Awesome!!

pls ignore the code at the end.. some of it got filtered by this noticeboad :)

I guess you are not refering to a version of jquery since I got the same error loading the jquery from ajax.googleapis.com.

It can’t be the brower since I tried it on Firefox 3.5.1 and chrome 2.0 but I just get blank pages there too. I am using your code from below

http://github.com/RobertFischer/JQuery-PeriodicalUpdater/tree/master#

I am using periodical updater out of the box too. Using firebug I get this message when i step through

s.url.replace is not a function
var ret = s.url.replace(/(\?|&)_=.*?(&|$)/, “$1_=” + ts + “$2″);\n

This is the same line IE8 breaks on also. Others on this noticeboard don’t seem to have this problem report this so I am a little stumped.

I hardcoded the url in periodicUpdater and I got another error regarding the console so I commented out the console logging and it goes into the update loop but the page is always blank. The url doesn’t seem to be picked up. It might just be my environment but I am really not sure what. I’ll try it elsewhere. Any ideas what it could be?

Do you have a public test page with this code?

As you might be able to tell I am new to jquery and haven’t touched js in years.

Thanks in advance,
Cheers
Kris

Hi Robert,

Great contribution! It didn’t work out of the box for me though. I’ll put up a patch here:

http://sunset.usc.edu/~mattmann/patches/jquery.periodicupdater.ajax.102609.patch.txt

What it boiled down to is that my Web Service kept returning status == “notmodified” rather than status == “success”, and thus remoteData was never being set. From reading the jquery documentation, it seems that status == “notmodified” is a viable status return (when it’s a 302 or 3xx HTTP msg). So, my patch does an OR to check if status == “notmodified”, and it also checks ot make sure remoteData != null, and if it is, it uses the value of rawData as the current value (.success never gets called if status != “success”, so in that case, remoteData is never set).

Hope this helps someone else like me!

Cheers,
Chris

Thanks Bob. I think normally the answer to taking 302 to mean “not modified” would be yes, but I’m seeing in Apache Tomcat 6.0.16 a return status of 302 from a web service even when new content is being generated. Might be a web server issue, but still if we catch this here, it makes the code more robust.

Thanks a lot for applying the patch!

Cheers,
Chris

Thanks so much for your help. Looks like adding a function for data does some pretty messed up things and breaks the script. (A whole host of errors and didn’t seem to return the data at all – even if it was just a text string.)

I can get around some of this by changing the supporting services, but I was hoping to be able to do it in javascript.

Thanks again for your help!

Andrew

Just nearly amazing. Thanks!!

Looks like it is working pretty well. The only problem is that everytime the updater runs it appends the data to the data. I’m doing this:

data: function() { return ‘ltime=’+varLtime; },

so, the request is:

http://blahblah.com/blah.html?ltime=1234567

then the next request is:

http://blahblah.com/blah.html?ltime=1234567&ltime=1234569

then the next request is:

http://blahblah.com/blah.html?ltime=1234567&ltime=1234569&ltime=1234570

and son on.

Do you know of anyway to clear the data?

Thanks again for all your assistance.

Andrew

Hi Robert,

Thanks for your response. Yeah, it’s pretty strange. I use Firebug – which is how I saw the request going out with the appended and appended and appended data element.

When I look at the demo I don’t see the data being included in the GET request while mine appends the data to the URL. When I set mine up like your demo (with the return ctr++) it also doesn’t include the data in the request and thus doesn’t append it to the URL. When I change it to return a string and the value then it gets appended. So, I think if the demo returned a string then it would append it over and over on the URL.

Dose that make sense?

Again, your help is much appreciated.

Andrew

Hey.
I am having some issues with the json calls…

When I use .ajax, or the 360innovate version data.length returns the number of objects, but when I use your code it returns the char count and treats it as a string…

Any idea what is going wrong? I have been at this for hours!!!

Many thanks :)

the issue is that its returning as html content, and yes I did clear my cache and such.
Also I simply replaced your file for the one from 360innovate, (only changing where I state the url) and it worked… but obviously yours is better so I would rather use that.

*I also tried just using getjson() to test the data being returned by my php script and that worked without an issue…

I sure am…

Ok so after a few hours, I cant figure out why the returned data is not being treated as json… so I created this (very hackish mod to the file)… it works, but thats about all I can say for it… I hope to go back and truly fix this soon…

btw for the record, im using safari on mac.

http://mattapperson.com/stuff/jquery.periodicalupdater.js

I use the following code. I wanted something that you could run without a lot of parameters, yet still retain the ability to override them when I need to. I too switched from Prototype to jQuery and needed to I also wanted a way to start and stop the timeout. This code has not been throughly in any sort of production environment.
Hope this helps someone looking for a way to control the timeout. :)

jQuery.fn.extend({
	ajaxPeriodicUpdate: function(url, options, callback) {
		var prevResp = null;
		var events = {};
		var defaults = {
			url: url,
			data: {},
			type: 'post',
			cache: false,
			async: true,
			dataType: 'html',
			minFrequency: 2,
			maxFrequency: 10,
			multiplier: 2,
			timerID: null
		}
 
		// Determine if options exist
		if (options == null) {
			options = {};
		} else {
			if (jQuery.isFunction(options)) {
				// Assume that options is the callback
				callback = options;
				options = {};
			}
		}
 
		var self = this;
		var settings = jQuery.extend({}, defaults, options);  	
		var frequency = settings.minFrequency;
		var incrementFrequency = function() {return;};
		if(settings.multiplier > 1) {
			incrementFrequency = function() { 
				frequency *= settings.multiplier;
				if(frequency > settings.maxFrequency) {
					frequency = settings.maxFrequency;
				}
			};
		}
 
		if (settings.complete) {
			events.complete = settings.complete;
		}
		if (settings.error) {
			events.error = settings.error;
		}
 
		settings.complete = function(xhr, status) {
			if (status =='success' || status == 'notmodified') {
				var respText = xhr.responseText;
				if (respText == prevResp) {
					incrementFrequency();
				} else {
					prevResp = respText;
					frequency = settings.minFrequency;
					self.html(respText);
				}
			}
			if (events.complete) {
				events.complete(xhr, status);
			}
			if (callback) {
				self.each(callback, [jQuery.trim(xhr.responseText), status, xhr]);
			}
			settings.timerID = setTimeout(update, frequency * 1000);
  	};
 
		settings.error = function(xhr, status) {
			if(status == "notmodified") {
				incrementFrequency();
			} else {
				prevResp = null;
				frequency = settings.minFrequency;
			}
			if (options.error) {
				options.error(xhr, statustatus);
			}
		};
 
		function update() {
			console.log('Updating at frequency of ' + frequency);
			jQuery.ajax(settings);
		}
 
		jQuery.fn.ajaxPeriodicUpdate.stop = function() {
			clearTimeout(settings.timerID);
			settings.timerID = null;
			prevResp = null;
		};
 
		jQuery.fn.ajaxPeriodicUpdate.start = function() {
			if (settings.timerID == null) {
				jQuery(function() {update();});
			}
		};
 
		jQuery(function() {update();});
		return this;
	}
});

I got an error in your code, when using it for updating json-data. Error is only in IE (tested with v8). Firefox worked fine!

Error (IE says syntax error) comes in line 125 of the code:
if(ajaxSettings.dataType == ‘json’) remoteData = JSON.parse(remoteData);

I think IE somehow automatically parses the json text to an object before the JSON.parse, so that remoteData is allready an array and can not be parsed as json-string!

I ended up by changing this to
if(ajaxSettings.dataType == ‘json’) {
remoteData = JSON.parse(rawData);
}

This works fine for me in IE8 and Firefox.

Very useful script – thank you! I had been hunting for a jQuery equivalent to Prototype’s periodical executor for a while. Finally found a solution rather than unresolved questions in forums. I may have a bash at creating a .stop() as that would be useful.

Hi Robert I have some feedback.

I think this version of boostPeriod() is much clearer:

var boostPeriod = function() {
if (settings.multiplier > 1)
timerInterval = Math.max(timerInterval * settings.multiplier, settings.maxTimeout);
};

Constructing an optimized version of a function can be a useful technique, but here saving a property lookup and comparison once every 1 to 8 seconds is way overkill.

===

I’m curious, is it necessary to have success and error callbacks if you already have a complete callback registered? Complete should be called in either case, and is already checking the success status?

===

trimming each xhr and checking for ‘STOP_AJAX_CALLS’ seems quite app specific, it should at the minimum be a setting thats turned off by default, and documented.

Mike

Another issue I ran into with:

if(ajaxSettings.dataType == ‘json’) {
remoteData = JSON.parse(remoteData);
}

is that it fails in Firefox <3.1 as it assumes native JSON. I looked at the way jQuery handle this in their own ajax function, and implemented it the same way (albeit with unsafe evaling of the JSON in the browser). The resulting modification is below:

if(ajaxSettings.dataType == 'json') {
remoteData = window.JSON && window.JSON.parse ?
window.JSON.parse( remoteData ) : (new Function("return " + remoteData))();
}

anyone has find a way to stop the script depending of the result from the server? like in the other version with : clearTimeout(PeriodicalTimer);

@commit 5d9c017 / comment 37053
this breaks json parsing in IE 6

I have to workaround that by setting type to text and doing JSON.parse in the callback. Looks like it is parsed twice, the json2.js I use throws an error in JSON.parse. Feel free to contact me for details.

I’m trying to make PeriodicalUpdater stop once an error is received but nothing I try works.. Is there anything wrong with the way I’m doing this? Or does the stop() method not work with JSON data type?

$.PeriodicalUpdater('file.php', {
// options not included here, apart from the data type being JSON
}, function(data) {
  if (data.error) { data.stop(); }
}

Thanks :)

This is really useful — thanks for all your hard work.

One problem I’ve noticed in Firefox is that memory starts to leak quite substantially with low minTimeout values (e.g. 500 — with maxTimeout: 5000).

I’m using Firefox 3.6 on Windows XP SP3. Safari *seems* OK — Chrome likewise.

I hate to ask it again, but is there any chance that you might be taking off the console output:

Error message: notmodified (In ‘error’)
Status of call: notmodified (In ‘complete’)

While debugging your own application, it sometimes adds unneeded noise. I guess I can do this myself, but just thought it should be an option in the codebase.

Is it possible to modify the updater while it’s running? Specifically, I’d like to change the url based on the data returned. Could you advise how to do that?

Thanks for the great work – should be included in the jQuery core!

Hi,

Have a problem with latest version and jquery 1.4.2 which i’ve just started using, the ‘data’ option isn’t being processed correctly, i’m calling it with a URL (in my case ‘/events/offset/’) with method GET and using a integer mvariable.toString() for the data option argument. Now according to http://api.jquery.com/jQuery.ajax/ the URL should be appended with the ‘data’ argument but it’s not happening for me – i’m just seeing /events/offset called again and again even though the myvariable is changing.

I added console.log(ajaxSettings) on line 79 and can see that data has the correct value and appears to be a string but the ajax call is not modifying the url and appending this value… any clues, i’m new to both js and jquery so my knowledge of it’s datastructures and inheritance is a little poor :)

Thanks
Nick