Oct
06
Sometimes, just sometimes, I feel like running into a wall. Head first. If only I was not so unfit. I made a stupid bloody Prototype Ajax mistake. Get so damn irritated with myself! Don’t make the same bloody mistake! My head is clearly at the rugby. That will teach me.
So what I did was the following:
function callAjax() {
...
var myAjaxCall = Ajax.Updater('thediv', '/the/url', {onComplete: function(){ new Effect.Highlight('thediv');}});
...
}
Firebug gave me the following error:
this.initialize has no properties
[Break on this error] this.initialize.apply(this, arguments);
This means (translated into the “YouStupidGeek” dialect):
“You stupid dumbass! How the hell can you forget the new keyword before the Ajax.Updater !”
So, don’t forget that… and now its time to see New Zealand get knocked out the World Cup by France!
Sharing is caring:These icons link to social bookmarking sites where readers can share and discover new web pages.
Programming, ajax, javascript, web development Stii
Feb
01
My favorite Javascript library had a makeover! Site looks AWESOME!
Just for the record: The mootools site was developed using Code Igniter as far as I know. So the two are a match made in heaven!
I have just replaced the script.aculo.us library as implemented by Derek Allard in his vodcast tutorial with the mootools library doing it the same way Derek did and it works like a charm!
I’ll post a guide/example on how to do it soon. (MUST just get the deadlines behind me… you know, they make that WHOOSH sound as they go by…)
PS: On the mootools site, they state the compatibility with all the browsers. I love the way that they made links to ALL the browsers’ sites excepct for Internet Explorer! 
technorati tags:mootools, codeigniter, ajax, javascript
Blogged with Flock
Sharing is caring:These icons link to social bookmarking sites where readers can share and discover new web pages.
Code Igniter, ajax, javascript, mootools Stii
Dec
12
We’ve looked at some very basic AJAX functionality and some basic effects using mootools, but what about something as basic as form validations?
I took my previous mootools example and added a validate function:
function validate(form1){
if (form1) {
if ($(’yourname’).value.trim() == “”) {
alert(”Name field cannot be empty”);
$(’yourname’).focus();
return;
} else if ($(’yourmsg’).value.trim() == “”) {
alert(”Message field cannot be empty”);
$(’yourmsg’).focus();
return;
} else {
aStiiFunction();
}
} else {
if ($(’yourname1′).value.trim() == “”) {
alert(”Name field cannot be empty”);
$(’yourname1′).focus();
return;
} else if ($(’yourmsg1′).value.trim() == “”) {
alert(”Message field cannot be empty”);
$(’yourmsg1′).focus();
return;
} else {
aStiiFunction1();
}
}
}
This form takes a boolean (true or false) parameter to differentiate between whether it should validate the top form (true) or the bottom form (false). If the form1 parameter is set to true, it then checks whether the yourname field and the yourmsg field is not empty. If it is not, it will submit the form using the AJAX function aStiiFunction();
What makes it so easy is that you can simply check the two text input fields by calling the element ID of either field and compare it, for example: if ($(’yourmsg1′).value.trim() == “”)
Now remember, this is very basic and simple. You can do some pretty serious regular expression checking using the same validation. But that, my friends is a story for another day!
Click here to see an example…
… and here to download the example.
technorati tags:mootools, ajax, javascript
Blogged with Flock
Sharing is caring:These icons link to social bookmarking sites where readers can share and discover new web pages.
ajax, javascript, mootools Stii
Dec
05
Silly me! I forgot to zip the mootools example files up and make them available for downloading. Thank you for the reminder samiam!
Download it here!
powered by performancing firefox
Sharing is caring:These icons link to social bookmarking sites where readers can share and discover new web pages.
ajax, javascript, mootools Stii
Nov
22
Click here for the example!
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.
ajax, javascript, moo.ajax, mootools Stii
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.
ajax, javascript, moo.ajax, mootools Stii
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.
ajax, javascript, moo.ajax Stii
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.
ajax, javascript, moo.ajax Stii
Sep
22
I’m sorry! Maybe I should first explain what it is before I rant on about kick-ass ajax libraries, hey?!
Well me being me, I’ll explain it in plain simple engrish, trying to keep the technical jargon out of it. So here goes:
AJAX stands for Asynchronous Javascript And Xml. Cool, but that says nothing! 
What does it actually mean?! It means that you can call external pages/scripts from a html page without reloading a page. Hmmm… cool hey? It gives a web page a kind of windblows feeling! Very cool… Oh and it makes it faster. Well sort of…
I think its best you see it in action. If you have a Gmail account, you have experienced it… Gmail is full of the stuff! No Gmail? Go check out the new Yahoo! home page. Plenty ajax there!
Best of all, its not even new technology. It was just never really used… And in come Web 2.0, but more on that later!
Sharing is caring:These icons link to social bookmarking sites where readers can share and discover new web pages.
ajax, javascript Stii
