JQuery PeriodicalUpdater (AJAX long polling/server polling)

Hi Robert,

(I’m the original plug in author :) )

Nice work on refactoring the plugin. It was originally developed to fill a need for us, and there are definitely bits that could be re-thought.

To be honest, this is probably something that should be added to the jQuery core, and I was surprised to learn that it wasn’t.

Anyway, nice work, and I’m glad you were able to build on my original plugin.

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

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

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 :)

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

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.

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))();
}

@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 :)

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

var boostPeriod = function() {
if(settings.multiplier > 1) {
before = timerInterval;
timerInterval = timerInterval * settings.multiplier;

if(timerInterval > settings.maxTimeout) {
timerInterval = settings.maxTimeout;
}
after = timerInterval;
pu_log('adjusting timer from '+ before +' to '+ after +'.');
reset_timer(timerInterval);
}
};

reset_timer() will only be called if settings.multiplier > 1 :(

Thanks for this plugin, it was really helpful. Of course, since i had a website where i needed to stop and start the request on a mouseover event, this seemed useful, it’s just a little modification to your original code, so in line 162:

var handle = {
stop: function() {
maxCalls = -1;
return;
},
start: function() {
maxCalls = 0;
reset_timer(settings.minTimeout);
return;
}
};

How can I determine when the PeriodicalUpdater has stopped?

I can’t seem to see any callbacks for when the updater has stopped in order to execute code such as a “Done updating!” message.

Hello,
I’m French, sorry ;-)

This is just my code…

//

// With : // http://paulirish.com/2009/jquery-idletimer-plugin // https://github.com/paulirish/jquery-idletimer/
// -> in the body (end page) :
//Stop flux – Run flux
//
//
// (function($){ //
// var timeout = 15000; // 15s inactivity
// $.idleTimer(timeout);
// })(jQuery);
//
//
// In jquery.periodocalupdater. js after line 91 (after var handle) :

$(‘a.stop’).livequery(“click”, function(e){
handle.stop();
$(‘.su’).empty(); // <-
$(‘.su’).append(‘OFF’);
});

$(‘a.run’).livequery(“click”, function(e){
handle.restart();
$(‘.su’).empty();
$(‘.su’).append(‘ON’);
});

$(document).bind(“idle.idleTimer”, function(){
handle.stop();
$(‘.su’).empty();
$(‘.su’).append(‘OFF’);
// launch(); // message alert…
});

$(document).bind(“active.idleTimer”, function(){
handle.restart();
$(‘.su’).empty();
$(‘.su’).append(‘ON’);
});
// end insert