Scriptaculous / Prototype stupidity

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.
  • BlinkList
  • blogmarks
  • del.icio.us
  • digg
  • Fark
  • Ma.gnolia
  • muti
  • NewsVine
  • Reddit
  • Shadows
  • TailRank
  • YahooMyWeb

Programming, ajax, javascript, web development Stii

mootools and Code Igniter

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:

  1. I’m too damn lazy… That and deadlines was WHOOSHING by again. :-D
  2. 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.


Code Igniter

technorati tags:, , ,

Blogged with Flock

Sharing is caring:These icons link to social bookmarking sites where readers can share and discover new web pages.
  • BlinkList
  • blogmarks
  • del.icio.us
  • digg
  • Fark
  • Ma.gnolia
  • muti
  • NewsVine
  • Reddit
  • Shadows
  • TailRank
  • YahooMyWeb

Code Igniter, PHP, javascript, mootools Stii

Code Igniter + mootools!

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…)

Code Igniter

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:, , ,

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

South African Weather Widget

Feb 01

Yahoo! Widget Engine IconThe past couple of days I looked into widgets. Stefano got me hooked on this. It seems that widgets are becoming the “next big thing“. I downloaded and installed Yahoo! Widgets and played a bit with it. (Don’t worry Gerry and Jayx, I only looked at it and did not read the development docs. Yet! Know that deadline is looming…)

I was especially intrigued by the weather widget. It looks STUNNING! So I thought “Okay, lets just change it to show George, South Africa’s weather!”. HAH! No can do! No African weather there! Maybe I can do a widget for African weather? (AFTER all the deadlines, k?) Hmmm… not so easy as it looks. Don’t get me wrong, developing the widget is pretty straight forward. It uses Javascript and XML. The real problem here is finding a weather API! I emailed Weather SA and asked them for their API so I can look at it. Unfortunately, they have not yet responded, but I heard from a friend of mine that they do not have an API. They only have a huge XML file they keep updated, but for accessing that file you need to pay!

Bummer… While the map guys in SA like Map-IT is crapping themselves due to Google Maps hitting the South African shores, maybe someone could make the weather guys also shake in their boots? If you know of any options/alternatives, let us know!

Word to Weather SA. You really should cater for leaving out the www. I typed in only weathersa.co.za (without the www) and it could not find the site. Only after I typed www.weathersa.co.za the site opened. We’re in 2.007 already… The www is slowly become deprecated. Wake up!

Top image


technorati tags:, ,

Blogged with Flock

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

API, Web 2.0, javascript Stii

mootools - simple field validation.

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:, ,

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

mootools example download.

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

mootools example!

Nov 22

mootools

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

mootools!

Nov 17

logo.png

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

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.

ajax, javascript, moo.ajax Stii


RSS Feed
Afrigator
Techleader

Recent Posts

My Posse

Filed in

Past Stuff

Meta Stuff