Papermashup

Subscribe


Tweets


"Is there ever a time that @DFS doesn't have a sale on?"

@ashleyford 3 days ago

"RT @lalpra: Galaxy Note 7 Unboxing https://t.co/FM8gZmqpBK"

@ashleyford 5 days ago

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Mootools Ajax Example

AshleyAshley

mootools-ajax

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:

  

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.



demodemo

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Comments 3
  • Daniel
    Posted on

    Daniel Daniel

    Reply Author

    Ashley, the link that your provided is not working. Do you have a sample code pertaining to marcus suggestion


  • marcus
    Posted on

    marcus marcus

    Reply Author

    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!