Scroll to top
Here’s a quick example of an ajax request with Mootools. the code below is from sandmoose.com. However I have modified it to get the data using the twitter search api.
So the script contains 4 functions, the first function ‘initializeContainer’ makes a new ajax request to our file, in this case ‘twitter.php’. The next function initialises the fade out effect, and tells the function that onComplete to trigger the function ‘updateContainer’. This function puts the data from our file ‘twitter.php’ into the div with and id of contain, once this is done it triggers the function ‘fadeinContainer’ which fades the contents of the div back in.
You need to include the mootools framework, here’s the Google hosted link:
<script src="http://ajax.googleapis.com/ajax/libs/mootools/1.11/mootools-yui-compressed.js" type="text/javascript"><!--mce:0--></script>
The Code:
function initializeContainer() {
new Ajax('twitter.php', {update:'contain'}).request();
}
function ajaxRequest() {
$('contain').effect('opacity',{duration:1000, fps:50, onComplete:updateContainer}).start(1,0);
};
function updateContainer() {
new Ajax('twitter.php', {update:'contain', onComplete:fadeInContainer}).request();
}
function fadeInContainer() {
$('contain').effect('opacity',{duration:1000, fps:50}).start(0,1);
}
We need to initialise the function onload.
<body onLoad="initializeContainer()">
Daniel says: Ashley, the link that your provided is not working. Do you have a sample code pertaining to marcus suggestion
marcus says: This is great! Is there a way to keep the search results on the page, shifting everything down and fading in the new data (simultaneously dropping the older results)? I’m trying to create a more realtime feed. Thanks!
@marcus yeah im sure it can be done. have a look at this script: http://tweet.me.it/xrgqbb it may help.
Designer and web developer, Co-founder and Technical Director at Harkable.com London. Previously I worked at InMobi, Spotify and MySpace. Interests include photography and making short videos. Also an avid F1 fan.
Follow us on Twitter and get in-stream updates.
Subscribe to all the Papermashup tutorials and articles straight to your RSS reader.
Sign up and get all the Papermashup tutorials straight to your inbox.
3 discussions around Mootools Ajax Example