stii.za.net » moo.ajax

mootools example!

Nov 22

mootools is the next version in the Mad4Milk.com library set. The guys took the moo.ajax, moo.fx and the prototype.lite library and re-worked it to exclude the prototype part of the library and combine all the moo libraries in one library. When you go download the scripts, you can decide which add-ons and plug-ins you would like to include.

Note: the moo.ajax library is deprecated and you will need to replace it with the mootools library.

If you looked at my moo.ajax example, you will note that there is only one difference in the implementation of the ajax library.

moo.ajax:

new ajax(’stii.php’, {postBody: ‘name=’ + name + ‘&msg=’ + mesg, update: $(’myelementid’), onComplete: myFunction});

mootools:

new ajax(’stii.php’, {postBody: ‘name=’ + name + ‘&msg=’ + mesg, update: $(’myelementid’), onComplete: myFunction}).request();

As you can see, the only difference is the request() at the end.

In the mootools example, I combined the ajax call with an effect to change the <div> element style.

There are many, many options in the mootools library. Here I have used the Fx.Style class to manipulate the <div> element height, width and opacity.

function myFunction(){

var myEffects = new fx.Styles(’myelementid’, {duration: 500, transition: fx.Transitions.linear});

myEffects.custom({

‘height’: [40, 100],

‘width’: [400, 300],

‘opacity’: [1,0.3]

});

}

In this example, the font color changes from white to red.

function myFunction(){

var myEffects = new fx.Color(’myelementid’, ‘color’, {duration: 500});

myEffects.toColor(’f00′);

}

TIP: The effect ALWAYS looks better in Firefox. Don’t believe me? Try it in IE then in Firefox or Flock and see the difference

Blogged with Flock

Sharing is caring:These icons link to social bookmarking sites where readers can share and discover new web pages.

Filed in: ajax, javascript, moo.ajax, mootools by: Stii

6 comments

mootools!

Nov 17

Even working for yourself sometimes means that you cannot always do as you wish… I’ve been planning to look into Netbeans for quite some time now, but to date it stil have not realised… But hey, soon!

In the meantime, the guys from Mad4Milk.com brought out their own Javascript library, called mootools. The libraries I’ve reviewed earlier was all basd on the prototype library. mootools is their own developed library! And still, as in moo.ajax and moo.fx fashion, the footprints is still small.

Since I’m probably going to use the libs in my projects, I thought lets first have a look at the mootools library, then we’ll continue out netbeansdreams!

Coming up within the next few days: mootools example!

Blogged with Flock

Sharing is caring:These icons link to social bookmarking sites where readers can share and discover new web pages.

Filed in: ajax, javascript, moo.ajax, mootools by: Stii

No comments yet

moo.ajax

Sep 22

If you are new to ajax, or you are looking for a sleek, sexy and small ajax library, then get moo.ajax @ http://www.mad4milk.com It is EXTREMELY easy to use. It is EXTREMELY small. It is EXTREMELY handy for doing quick and dirty ajax calls. Although, there are bigger and much more functional and way more advanced packages like prototype , moo is quick to learn and very quick to implement, which is ideal if you are new to this ajax stuff or on a tight deadline. By the way, moo implements a Lite version of prototype
For the first round on our bizzhub project, we will use the moo libs and will be implementing the moo.fx library for those funky visual effects that you always see when you hit an ajax script, but more on moo.fx later…

So next time kids, we’ll give some simple examples on how to implement ol’ moo.ajax.

Sharing is caring:These icons link to social bookmarking sites where readers can share and discover new web pages.

Filed in: ajax, javascript, moo.ajax by: Stii

No comments yet

A quick example of moo.ajax

Sep 22

Okay, now we’ve cleared the air around AJAX, let’s look at a quick example. This is almost like the example on the mad4milk website, but just a wee different…

Right, the first thing you need to be sure of, is that you’ve got the 2 much needed Javascripts; moo.ajax.js and prototype.lite.js Funny, but without those it simply doesn’t work… :O

Link those 2 files between your head tags of your html document.

Right, next step is to write a bit of Javascript to actually use those two libraries you’ve made. I simply wrote a function that creates a new ajax instance and pass the parameters to a second php file.

<script type=”text/javascript”>
function myFunction(request){
alert (request.responseText);
}
function aStiiFunction(){
var name = $(’yourname’).value;
var mesg = $(’yourmsg’).value;
new ajax(’stii.php’, {postBody: ‘name=’ + name + ‘&msg=’ + mesg, update: $(’myelementid’), onComplete: myFunction});
}
</script>

So what happens in the script:

You fill in your name and your message in the fields, right?
Then you click the appropriate button.
The button you’ve clicked calls the function named aStiiFunction()
aStiiFunction looks at the 2 input text html elements named “yourname” and “yourmsg” and assign it to 2 Javascript variables.
I must just quickly mention: The $(’elementName’) thingy there is a shortcut supplied to us by the lovely people developing prototype, that looks for an html element with a id name of that which you told it to. VERY nifty, hey?!
aStiiFunction then creates a new ajax instance and you pass two paramaters to it. The first is the URI to the file/script you want to call, the second are some instructions that must go to the file/script and what to do afterwards.

So lets look at the second parameter as the first one is, uhm, obvious… The second parameter has { and } around it. That is basically only to group all the stuff in the second parameter together.

The first item “postBody:” actually pass some parameters to your script on the “other side” (the stii.php script). To add more and more parameters, all you do is you add &varname=varvalue to the string already there.
The second thingy there is “update:”. That gives the ajax lib the instruction “Update the HTML element with the id thats equal to ‘myElement’ with whatever it is that the script called by ajax returns…”
The third one “onComplete:” says to ajax, “once you have received the result back, call this other Javascript function called myFunction”.

There now. THAT was not too difficult?! Ajax is simply sweet (pun intended) thanx to the okes at mad4milk!

Oh and before I rush off… Below is all the code and you can click here for a test drive, and here to download the example!

Below is the source for test.html

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=iso-8859-1″ />
<meta name=”author” content=”mad4milk” />
<meta name=”robots” content=”all” />
<title>moo.ajax</title>
<script type=”text/javascript” xsrc=”prototype.lite.js” mce_src=”prototype.lite.js”></script>
<script type=”text/javascript” xsrc=”moo.ajax.js” mce_src=”moo.ajax.js”></script>

<script type=”text/javascript”>
function myFunction(request){
alert (request.responseText);
}
function aStiiFunction(){
var name = $(’yourname’).value;
var mesg = $(’yourmsg’).value;
new ajax(’stii.php’, {postBody: ‘name=’ + name + ‘&msg=’ + mesg, update: $(’myelementid’), onComplete: myFunction});
}
</script>
</head>
<body>
<h1>moo.ajax, 1.3kb for all your asyncronous needs.</h1>

<div id=”myelementid”>
this text will be (hopefully) replaced after the request is completed.
</div>
<div>
Your name: <input type=”text” id=”yourname” value=”"/><br/>
A message: <input type=”text” id=”yourmsg” value=”"/><br/>
<input type=”button” value=”Send to AJAX!” id=”sendbtn” onClick=”aStiiFunction();”/><br/>
</div>

</body></html>

And here is the stii.php script:

<?php
echo ‘Hello, ‘ . $_POST['name'] . ‘ here is a cool message for you! <b>’ . $_POST['msg'] . ‘</b>’;
?>

Sharing is caring:These icons link to social bookmarking sites where readers can share and discover new web pages.

Filed in: ajax, javascript, moo.ajax by: Stii

2 comments

mootools example!

mootools!

moo.ajax

A quick example of moo.ajax

Recent Posts

My Posse

Filed in

Past Stuff

Meta Stuff