Ajax with Mootools: making a product rating(JS only)

[amrosama]

Ajax with Mootools
hi codecallers,
this tutorial will be about using the Mootools JS library with ajax, if you dont know a thing about ajax you will do just fine with mootools. but you need to have know some javascript to keep up.


when to use Mootools library with ajax?

-when you already have the mootools core library loaded in the page for other uses
-when you are tired of cross-browser errors and dont care about the size
-when you use it for more than once in a single page, for example you dont load 120kb of JS file just to move a picture around. make the best out of mootools when its already loaded with the page
-check this blog out

im using core builder to generate a mootools JS file, what classes will i need?
you will need these 2 classes for ajax:
1.Request
2.Request.HTML
theres "Request.JSON" but you will only need it if you want to use JSON instead of ajax.
when you select these 2 the other needed classes will be checked automatically
after you download the mootools-1.2.X-core.js, link it to the page you will use mootools in it like this:

<script type="text/javascript" src="mootools-1.2.3-core.js" /></script>

now you are ready to write some JS.

Request. how to?
theres nothing easier than using mootools to send request.
lets assume that we are using AJAX to let users rate a certain product without refreshing the whole page, for this purpose we will need a PHP (or any server-side language) page to accept the rating of a user and store it in database, and ofcourse a page that will send the AJAX request.
in this code we will write JS script to initialize a Request object and send the rating to the server-side page

var my_request=new Request({
url:'/rate.php',  //page URL
method:'get'   //Method (get or post)
});
my_request.send('rate=5&product_id=69');//data sent
//or you can give the send() function the parameters 
//as an object for better readability
my_request.send({
rate:5,
product_id:69
});

simple eh? you can spare some chars and do this instead:

new Request({
    url:'/rate.php', method:'get'
}).send({
           rate:5,
           product_id:69
    });

you can also specify the GET/POST parameters while initializing the Request object like this:

new Request({
    url:'/rate.php', method:'get'
    data:{
           rate:5,
           product_id:69
    }
}).send();

the code above will succeed in doing what its supposed to do, but that isnt enough for us we want to notify the user that the rating was done successfully or failed because of an error or because he already rated that product.
and thats why i like Mootools when you use regular you write at least 2 functions; sending a request, accepting the response. in mootools you can do all that while initializing the Request object by using these functions:
onSuccess : when the request is sent and received a successful response from the server. it has 2 parameters; responseText and responseXML
onFailure : when the server sends an unsuccessful response
onCancel : when you cancel the Request by sending a new one from the same Request object. or using the "cancel()" function
onException : happens when theres an exception during setting the headers of the request object (rare), in that case you will need to check your data parameter(or object)
onRequest : fires up when you use the "send()" function
onComplete : like onFailure and onSuccess.
now lets use them in our code:

var my_request=new Request({
url:'/rate.php',  
method:'get',
onSuccess   : function(serverResponse){
         //if this part of code was reached then everything is going fine :D
         if(serverResponse==1)alert('thank you for rating this product');
              else   if(serverResponse==0) alert('sorry you cant rate the same product twice');
},
onFailure : function(){
alert('sorry we have an internal error, try again later');
}
});
my_request.send({
rate:5,
product_id:69
});

pretty awesome and easy, right?
as you may have noticed the code above, the server side sends either a "1" or "0"; one for rating successful and 0 for an error and produces the appropriate "alert()" message, but what if we want to use the response text to update a DIV's(or other element) innerHTML, which is a very common thing to do with ajax. thats why we have the "Request.HTML" object

using the Request.HTML:
from its title you can tell that this object deals with HTML elements, it can be used to load the content of a certain HTML DIV from the server-side. for example fetching a part of the page that wasn't loaded initially.

how to use it
its same as the regular Request n its usage but theres 2 extra things:
1. update:
check this code:

new Request.HTML({
url:'/rate.php', method:'get',
update: $('confirmMessageDiv'),
onFailure : function(){
alert('sorry we have an internal error, try again later');
}
}).send({rate:5,product_id:69});

really simple, in the "update: $('confirmMessageDiv')" we used the DIV id that we will update it's content, in this one we assume that the server-side page processes the rate and sends back a confirmation message as text(or HTML)
be careful this doesn't support JS like any regular AJAX request
2."Element.load()":
you will love this:

$('confirmMessageDiv').load('/rate.php',data:{rate:5,product_id:69});

this replaces all the previous code in just a line

theres one last trick:

$('someFormId').send('url.php');

this one takes a form ID and sends it in ajax.

thats all, if you liked it +rep me
check Amrosama.Codecall.net - Power of the moo-stash! Mootools for mootools classes

[Jordan]

That is very cool and useful! Many websites are now using these interactive rating stars. Can we see an example on your website?

+rep

[amrosama]

you mean a full rating script with php?
sure ill write it here on CC and post it in PHP forum soon

[debtboy]

Awesome Tutorial + rep