Moo.Ajax

Moo.ajax Tutorial
Download Source Preview Example
Hi all, I know how everyone wants a moo.ajax tutorial and since I just finished redoing an old ajax website to use the moo libraries, I figure I can type it up really quick.

First of all, Ajax.
As you’ve heard a million times, ajax is simply the ability to communicate with your webserver without your user being required to wait for the response or be redirected (you can have dynamic page updates).

Moo.fx recently released a new library for making ajax calls very simply. The problem is that the documentation is lacking.

Since I was redoing an older ajax website, I went through the moo.ajax library code (it’s very small, took about 5 minutes) and discovered how they were making the calls.

This tutorial should simply explain how to use moo.ajax with php and also use it in correlation with the other moo.fx libraries for some pretty cool transitions for your ajax applications.

Starting off…
Let’s start with a simple application that will allow the user to replace a div with server information (much like the scoreboard example done over at deckerD).

(let me first off appologize for the images instead of code, blogger won't allow me to post code with tags like "head". You can download the complete source here).

HTML:

Let’s take some time to see what’s going on here.

First off, the moo.fx libraries are added (including moo.ajax).

Next, a simple function is made for executing the moo.ajax.
it’s first parameter is the server side script (fileFinder.php).

Next comes the options, as with all the moo libraries.

• postBody: the default method for moo.ajax is post, so postBody allows you to send arguments to your serverside script (we’ll see how to extract them later).
• update: sends the server’s response to a specified div
• onComplete: allows you to execute a function after the response has been received.

This snippet of code handles the transition after the ajax command is received. The first action is that the current div’s contents are copied over to the “switch” div (luckily this script is run before the update argument!).
Next, two instances of effects are created for switch (one with a time value of “0” for instant changing) and an instance is also created for the content div.
The content is initialized collapsed “myResize.hide();” and toggled to expand after 20milliseconds.

The switch div is first hidden, then toggled, both instantly (this is done to clear any previous state the div was in before, also to reset the size since the content copied over may be larger than the previous data). Then the switch is collapsed after 15milliseconds (hopefully along with the content layer for a neat transition).

In the body there are the two divs and a link inside “content” that runs the moo.ajax script on interaction.

PHP (fileFinder.php):

This php file just processes the arguments sent to it ($_REQUEST[‘action’]) and goes through the switch loading the other php files (identical to the scoreboard example).

TIP: If, though you want(or need) to send multiple arguments, separate them with some character and “explode” them into an array (example below).

PHP (info1.php):

This php file just prints out some html text, and also adds a link for going to the next file.

NOTE: In all honesty, the link doesn't have to be written in php. I did that so that I could easily break it apart for adding dynamic links (aka: I could use the multi-argument example above to make the link go somewhere else from the first command (control the post-flow of content).

See it all in action
Now that all the code is out on the table, let’s see it working!
Click Here

Some other tricks:
A new problem I’ve encountered since I started working in ajax is that I am beginning to miss my “onload” commands I knew and loved so much. You can only place an “onload” in three situations,

1. iframes
2. Body
3. Images

I found a quick (and dirty) way of getting my onloads back for ajax. Simply place an image in your code with a height and width of “0px”. While this looks really nasty in the code, it is unseen by the users and allows you to execute functions that would take time to program around (simply good for people who are upgrading their websites to ajax).
Note: if you know any other way to do this that isn’t as dirty, please comment!, lol.

Well, I hope that helps yall.
~follower