Feb
27
I promised Derek Allard that I’ll be publishing some examples of how I integrated mootools with Code Igniter, but alas, I have not yet had made the time to just sit down and do it. I promise, Derek, soon!
I just want to add that I have not integrated mootools as an Code Igniter class or library. I should prolly, but here is my reason for not doing it. Two reasons actually:
- I’m too damn lazy… That and deadlines was WHOOSHING by again.
- I like my Javascript seperated from my PHP and Code Igniter classes!
I’ll focus on the second reason, since that one is easier to defend. 
Firstly, let me just say once more that it is a matter of preference! I’m not arguing right and wrong here. Simply what I prefer and that can hopefully help you make up your mind if you have similar questions.
If you are going to integrate mootools with Code Igniter, you are going to write PHP that generates Javascript functions/classes. That for me is somewhat against the grain of the whole MVC philosophy. You already seperate your database access from your business logic from your HTML views. Now, you want to write PHP that generates Javascript just to make it easier to implement. What if you need very particular functionality? You will then have to want to stick with extending your PHP library to generate the appropriate Javascript functions. This is perfectly alright, but not always practical, since you might have certain time constraints.
There is of course a number of drawbacks you will need to consider when implementing mootools seperately, but more on that at a later stage.
Maybe I can be convinced that integrating it is better? I don’t know. It just feels more comfortable having it seperate.
technorati tags:codeigniter, mootools, javascript, php
Blogged with Flock
Sharing is caring:These icons link to social bookmarking sites where readers can share and discover new web pages.
Code Igniter, PHP, javascript, mootools 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
