I’ve been doing some JavaScript development with Prototype over the last few days and it’s been interesting trying to do things that I know how to do in jQuery, but in Prototype.
One of the cool things I like with all these JavaScript frameworks is the easy way they allow you to execute code on ‘DOM Ready’ (once the page markup has completed but before all the images etc have loaded). I like this as it lets you get a lot of the grunt work and page initialisation out of the way before the user would notice the result of your code, such as hiding page elements etc
Anyway, here is how you can set this up using Prototype. Add this to your <script> tag or hopefully better still in an external .js file:
Another way to do this is using the Event model to call a separate function to handle your initialisation code:
Now another cool thing about these frameworks is they give you the ability to register “listeners” for user events. This way I can have my HTML markup completely free of event code like “onclick” or “onsubmit” etc which is great for users with JavaScript turned off as it clearly degrades nice and cleanly, but I can setup listeners in my external .js files to handle these events.
So to handle a form submission I might have the following HTML form:
And my JavaScript will be:
This basically says whenever the form with an ID of “frmAddLink” is submitted…execute the function called “submitForm” (which can of course be any function you like).
An “event” container is automatically made available to the “submitForm” as an argument where I can serialize my form data, setup form “action” URL’s etc and submit asynchronously. Again, no JavaScript in your markup is good and degrades easily 
One problem though is if you load a page on your site where the form in question doesn’t exist, you will get an error where your Observer is being registered because it can’t find the element in the DOM and Prototype isn’t a “fail silently” framework.
To get around this I do the following:
This simply says if the element “frmAddLink” exists register an observer; else do nothing.
UPDATE 24th Jan
After asking a question on the Prototype mailing list, the following is “best practise” when looking for elements which might not be on every page:
The first line will have a value of NULL if the element “frmAddLink” isn’t defined in the markup. This is also a better way as you can have multiple statements instead of just one observe, handy if you want to do more things on ’submit’.
UPDATE 2nd Feb
Thanks to Dr J in the comments of this post where he advised that I actually was using the wrong syntax for dom:loaded. I had the equivalent of window.onLoad() by using the following:
Event.observe(window, ‘load’, function() {
});
This of course not the best as you need to wait for the entire page to load before your JavaScripts are run. The updated way (dom:loaded) is much nicer
nice post. One thing I would like to ask which is off topic is , what plugin do you use for code highlight…I like the way it shows up here and would like to know which wordpress plugin is this…if you dont mind sharing that…cheers.
Anuj Gakhar
January 23rd, 2008
@Anuj - Hey, it’s called SyntaxHighlighter by Erik Range.
http://erik.range-it.de/
The ‘xml’ syntax seems to work best for me, but since going to the latest version it is adding line breaks where I don’t want them
I’ll need to look into that more.
Michael Sharman
January 23rd, 2008
Thanks Michael, I will try it out. Nice blog, by the way.
Anuj Gakhar
January 24th, 2008
Thanks Anuj
Michael Sharman
January 24th, 2008
Got it working
http://www.anujgakhar.com/2008/01/23/different-ways-of-making-a-thread-sleep/
Its a pain to go and edit all my code to have to work with this though.
Anuj Gakhar
January 24th, 2008
@Anuj
Yeah I know what you mean, some of my old posts use another method and I have been too lazy to go and update the markup
I really want to find a way where I can just use a class on a div and let the JS do it that way. Then my markup will be free of all this stuff and it’ll make it easy to update!
Hmm…that sounds like a project
Michael Sharman
January 24th, 2008
Agreed Michael. Thats would be the ideal scenario. Let me know if you ever do that:)
Anuj Gakhar
January 25th, 2008
the window.load event is not the same thing as jQuery’s ready event.
see the jQuery documentation for an explanation:
http://docs.jquery.com/How_jQuery_Works
Dr J
January 31st, 2008
Ah my mistake on the Prototype side of things. I’m well aware of the difference with jQuery’s document ready.
After a quick search I found the correct syntax for the Prototype equivalent, either:
document.observe(’dom:loaded’, function(){
});
Or use this to call a function with your ‘initialisation’ code:
Event.observe(document, ‘dom:loaded’, init);
function init()
{
//initialise code
}
Thanks for that, I’ve updated the post
Michael Sharman
February 2nd, 2008
[...] a while (it’s just that I wanted to know if there was a cleaner solution in this case) is the dom:loaded observer function which will run as soon as the Dom is loaded (and before all ‘assets’ are loaded so [...]
chapter31 » Blog Archive » Showing and hiding elements with CSS and JavaScript
March 28th, 2008
Hi many thanks for this post.
I hava a issue with the Event.observe(window, ‘load’, myFunction).
I’m using two pages.
The first one has a remote link to the second with contents my “event observers”. The problem is after the loading of the second page my eventHandlers doesn’t work anymore.
It seems that prototype can’t find the elements that are on my ajax page. (Sorry for my english)
Merci d’avance pour votre aide.
Thanks for your help.
Patrov
May 12th, 2008
@Patrov - Are you saying that once you load content (from an a href) using Ajax then Prototype can’t “see” your links?
If so then yes…this will happen because your main page hasn’t registered this new content in the DOM.
Typically what I do is add an Event.observe() in the actual content which is returned by Ajax.
Hope that helps
Michael Sharman
May 12th, 2008