Feb

10

Prototype Drop Down Menu

February 10, 2008 |

Recently I have been playing with the popular Prototype JavaScript Framework developed by Sam Stephenson and his wonderful team. The reason I started to learn it was because Microsoft’s proposal to buy Yahoo, which could turn out to be the worst nightmare to grassroots developers (YUI might become part of WPF). So I have decided to not put all eggs in basket and learn an alternative library just in case Yahoo accepts to be fucked up by Microsoft. Well it turns out that Yahoo sticks to its principles and rejected Microsoft’s evil offer. Well, it’s definitely a good thing that Yahoo resist the tempatation to seld-destruction, but it’s a even better thing to me personally because duing this period of time that Yahoo’s fighting the evil spirit of Microsoft, I was taking quite some time to discover the power of Prototype. Well, I would say it’s a really good JavaScript library. Better than the one I used to know.

I won’t say that I will stop using YUI and turn to Prototype, but it definitely opened another dimension in the way I see JavaScript and programming. I created an unobtrusive Ajax Json Drop Down Menu using Prototype. The drop down menu will output The Smiths studio album descriptions when an album’s selected and chosen to be displayed. A demonstration to the most fundamental usages of Prototype: extends the DOM, Ajax and JSON support. And it’s also a personal tribute to one of the finest british indie rock band.

Below is the excerpt of the application: 

var albumsObj;
Event.observe(window,'load',function( ) {
Event.observe('myform','submit',getalbum);
});
function getalbum(evnt) {
Event.stop(evnt);
if (albumsObj) {
printalbum( );
return;
}
var url = 'includes/query1.php';
var myAjax = new Ajax.Request( url,
{
method:'get',
onSuccess: function(transport){
var json = transport.responseText.evalJSON();
printalbum( );
},
onFailure: function( ){ alert('Something went wrong...') }
});
}
function printalbum() {
// get album name and album space obj
var albumName = $F('current_album');
// search for album name
var albumObj = albumsObj.albums.find(function(album) {
if (album.album == albumName) {
return album;
}
});
if (!albumObj) return;
var album = document.createElement('div');
Element.extend(album);
album.id = 'album';
album.addClassName('album');
var str = "<h3>" + albumObj.makings.title + "</h3>";
var stats = albumObj.makings.stats.collect(function(stat) {
return stat.stat;
});
str += stats.join('<br />');
str += "<br /><br />" + albumObj.makings.desc;
if ($('album'))
$('album').remove('album');
var album = document.createElement('div');
Element.extend(album);
album.id = 'album';
album.addClassName('album');
album = album.update(str);
document.body.appendChild(album);
}

demo page at:
http://www.lab.highub.com/applications/drop-down/prototype.html

Using JSON with Ajax
Since version 1.5.1, Prototype features JSON encoding and parsing support. Prototype’s JSON implementation is largely based on the work of Douglas Crockford which will most likely be natively included in future versions of the main browsers.In JavaScript, parsing JSON is typically done by evaluating the content of a JSON string. But we all know that eval is evil, so Prototype introduces String#evalJSON to deal with this, from the code above, we can see it’s done by: 


var json = transport.responseText.evalJSON();

Ajax functionality
Prototype framework enables you to deal with Ajax calls in a very easy and fun way that is also safe (cross-browser). From the code above, we can see it’s can be done by: 

var myAjax = new Ajax.Request();

The Element.extend() method
The biggest part of the Prototype framework are its DOM extensions. If you have an element to work with, you can pass it through Element.extend() and it will copy all those methods directly to the element. From the following line of the above code, we can see this happen: 

var album = document.createElement('div');
Element.extend(album);
album.id = 'album';
album.addClassName('album');

Enumerable
Enumerable provides a large set of useful methods for enumerations, that is, objects that act as collections of values. It is a cornerstone of Prototype. Prototype provides many Enumerable methods, I used the find method to demonstrate its usage - search for album name: 

var albumObj = albumsObj.albums.find(function(album) {
if (album.album == albumName) {
return album;
}
});

Because the script contains server-side PHP files, if you want to study, please feel free to download it at:
http://www.lab.highub.com/applications/drop-down/download.zip

Enjoy!



Similar Posts

Comments

Name (required)

Email (required)

Website

Speak your mind

Sponsors




Links