Mootools Ajax Example
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()">
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.
Leave a comment...
Connect
Latest Poll
Recent Posts