Periodical Ajax Requests Using MooTools 1.2

Written by David Walsh on Monday, August 25, 2008


This article may feature code that is no longer best practice in MooTools.
Click here to learn what has changed to make your code framework-compatible.

Every browser I have, both at work and at home, has its default homepage setting set to NetVibes. Why? Because NetVibes lets me decide what content I want on my homepage and it uses Ajax to update information, so I can keep the same window open in the background all day. NetVibes even refreshes page content periodically so a page refresh is never necessary. Using MooTools 1.2, you can achieve the same effect: periodical Ajax requests!

The MooTools 1.2 Code

var request = new Request({
	url: 'ajax-periodical.php?ajax=1',
	method: 'get',
	update: 'refresh-me',
	onComplete: function(response) {
		$('element-to-update').set('html',response);
	}
})

var doMany = function() {
	request.send();
};

doMany.periodical(5000);

The above code executes an Ajax request every 5 seconds, updating the element with the ID attribute of element-to-update.

Periodical may only be used on a function, so I place the Ajax request within a function. You may NOT call .send().periodical().

This functionality has many uses. I see WordPress do this many times while I write an article (auto-saving). What do you use this for?


Follow via RSS Epic Discussion

Commenter Avatar August 25 / #
Sylvain says:

Viva Netvibes !
Thanks for tip !

Commenter Avatar August 25 / #

Cool idea but what’s the point of using periodical() versus the standard JS setTimeout()?

I need to read up on 1.2 (wish Aaron would update his mootorial) so I don’t think I’ve seen this function before. Is it just a nice wrapper of setTimeout/clearTimeout ?

David Walsh August 25 / #
david says:

@Tim: Yes. Better than writing a bunch of Timeout stuff, in my opinion.

Commenter Avatar August 25 / #
Ahmed says:

Can this be used to retrieve data from a MySQL table?

David Walsh August 25 / #
david says:

@Ahmed: Absolutely. You can make the request go to a PHP script that does anything you want!

Commenter Avatar August 25 / #
Tony says:

This is such a clean way to do it. I think I am going to give mootool a try for my next project. I like the syntax structure. Thanks for the tip and it does save you a lot of timeout call.

Commenter Avatar August 25 / #
Janko says:

Great article, David! I used perisitant communication in some of my past asp.net projects, mostly for displaying changes in a database that occurre frequently. I tried several options, but this one seems to be much cleaner than those. Have to try it with jQuery as well.

Commenter Avatar August 26 / #
Catar4x says:

Very nice David !
But if you want generate an html content, please change :
$(‘element-to-update’).set(‘text’,response);
into :
$(‘element-to-update’).set(‘html’,response);

David Walsh August 26 / #
david says:

@Catar4x: Good call — I saw that last night but didn’t update it. Will now.

Commenter Avatar August 26 / #

@Tim regarding “I need to read up on 1.2 (wish Aaron would update his mootorial)”

The mootorial has been updated, but it also got moved, check out mootorial.com

@david regarding “Periodical may only be used on a function, so I place the Ajax request within a function.”

I hate to be nitpicky but you don’t need the extra function..

var request = new Request({
url: ‘ajax-periodical.php?ajax=1′,
method: ‘get’,
update: ‘refresh-me’,
onComplete: function(response) {
$(‘element-to-update’).set(‘html’,response);
}
}).send();

request.send.bind(request).periodical(5000);

will work just as well

Commenter Avatar August 26 / #

the snippet I posted also has the advantage of not creating a new request object every five seconds ;)

David Walsh August 26 / #
david says:

@Bryan: Good call with not creating a new request. I was looking at this again last night and noticed that as well.

Commenter Avatar September 17 / #
jensensen says:

@Bryan J Swift: your latest code loads nothing ??
@david: works well but there’s no refresh ¿¿

btw. how to load external sources?

Thank you!

Commenter Avatar September 23 / #
BenBois says:

hi all,

a variante with auto-submit form and mutli responses..

var request = new Request({
url: ‘ajax.php’,
method: ‘post’,
onComplete: function(fullresponse) {
var pdt_id = $(‘form_pdt_id’).get(‘value’);
var response= fullresponse.split(‘::’);
$(‘resultdi21′).set(‘html’,response[0]);
$(‘resultdiv1′).set(‘html’,response[1]);
}
})
var sendForm = function() {
request.send($(‘yourformid’));
}
sendForm.periodical(5000);

@Bryan J Swift
your “bind” method returns empty POST paramswith form

see you!

Commenter Avatar October 08 / #
mike says:

“Request is not defined” –> var request = new Request({

that’s what it’s giving me. Why is that??

David Walsh October 08 / #
david says:

@mike: You don’t have the “Request” plugin within your Moo build.

Commenter Avatar October 08 / #
mike says:

oh ok, how do i get that plugin for mootools 1.2 build? i can’t find it on their website.

also, when i use mootools 1.1 build, my fade in function:

var myFunction = function(){
var div = $(‘featureContent’).setStyles({
display:’block’,
opacity: 0
});
new Fx.Style(div, ‘opacity’, {duration: 1000} ).start(1);
};

that will work, but when i use Mootools 1.2 build it says FX.Style is not a constructor.

so my question is, how can i make the most recent build 1.2 work properly?

Commenter Avatar October 09 / #
mike says:

I added the request plugin using the core builder.. it still says the Request is not defined.

Commenter Avatar October 14 / #
mike says:

any help on that?

Commenter Avatar October 31 / #
Bughy says:

Great script, thanks a lot. But it works on IE? On my computer doesn’t work :(. Any solutions for that? Please help.

Commenter Avatar March 21 / #
Tommix says:

David, thanks for all your stuff it really helps to a lot of people out there who try to understand Moo.. Your examples very easy to understand. Thanks to commenters as well, cause without them we could’t create advanced features to David’s examples :)

Commenter Avatar April 16 / #
Jordi says:

I need similar script for complete a spy-event system (example:http://www.meneame.net/sneak.php) but don’t have idea how to return timestamp value for next send to the request on the next intervals.

please help!

Commenter Avatar May 03 / #
Rich says:

Hi, this worked good but I had some caching issues with IE, the cache bug fix where you append a time string to the URL was appending the same value as the event parameters were already prepared so instead I just changed the line:

request.send();

To:

request.send(‘r=’ + $time() + $random(0, 100));

This will generate a new unique timestring each time before its sent out. It seems to have cured my IE problems.

May be helpful for someone else who was looking for a solution.

Thanks for the help David on Periodical, it was very helpful.

Cheers.

Commenter Avatar June 29 / #
Leo says:

it seems doesn’t work in IE

Commenter Avatar July 28 / #
kodegeek says:

Wao, nice stuff!
I’m facing a problem, let i have to send 1000 ajax requests. if i place the Ajax request inside a loop, my browser got stuck :(
How can i make it in a way that, another request will make if one response returns?
Thanks

Commenter Avatar October 27 / #
Tommix says:

Rich – thank you very much for fix :)

Commenter Avatar January 28 / #
Davor says:

Hi David,

very good stuff. Do i can use this for a chat, because when i do a delay of 0.5 sec to get the new request, is that good? could i use for chat an other way or is this the only way to get requests in realtime?

Commenter Avatar February 07 / #
Ingalb says:

Hi David,

Thanks for this tip.

is possible to have this script compatible for Mootools 1.12 ??

Thanks

Be Heard!

I want to hear what you have to say! Share your comments and questions below.

Name*:
Email*:
Website:  


© David Walsh 2007-2010. Contact David Walsh. Powered by the remarkable MooTools javascript framework.