Particletree Quick Guide to Prototype

http://particletree.com/features/quick-guide-to-prototype/

q ui c k g ui de t o pr ot ot ype
By Ryan Campbell Nov 28, 2005

co

Introduction
JavaScripts increasing popularity throughout the web makes it more important than ever to make sure our client side code is implemented with a nice mix of stability, speed, and reusability. One of the best ways for accomplishing this is to use a simple library and syntax to use as a foundation for every project. Thankfully, Sam Stephenson created an amazing library of functions that we can rely on called Prototype.js to ease our JavaScript development practices. After our readers pointed out in an previous feature that our frequent use of Prototype syntax was making things a bit confusing, we decided it would be best to create a quick reference page for the library to help ease the learning curve for a lot of developers out there. The following tutorial will explain the most common methods used in Particletree projects with simple examples of how to implement them. This guide is meant to be used hand-in-hand with the more exhaustive unofficial Prototype documentation by Sergio Pereira, and the script.aculo.us documentation wiki , which I highly recommend every serious JavaScript / Prototype developer read.

Advertise on Particletree

Getting Started
After you have downloaded the files and placed them in your preferred directory, all you need to do is include them in your html document like so:

<script src="/scripts/prototype.js" type="text/javascript"></script>

Boom. JavaScript just got 10x easier to develop. Now, lets looks at some of the cool new weapons you just acquired. Note - This tutorial is based off of version 1.3.1.

$() Function
The most used and convenient function, $(), provides an easy way of getting a handle on a DOM element. Normally, if you would like to access an element in the DOM, it would look like this:

node = document.getElementById("elementID");

Using $(), we can shorten it up.

node = $("elementID");

Other than being short and sweet, the $() function is also more powerful than document.getElementById() because the ability to retrieve multiple elements is built into the function.

allNodes = $("firstDiv", "secondDiv"); for(i = 0; i < allNodes.length; i++) { alert(allNodes[i].innerHTML); }

In this example, we see the $() function now returning an array of our elements, which can then be accessed with a simple for loop.

Form Helper Functions

Yes, not only are forms a pain in the ass from an HTML and CSS perspective, but also on the JavaScript side of things. Prototype.js provides useful and creative functions that make dealing with forms almost fun.

1 of 11

09/05/2006 04:55 p.m.

Particletree Quick Guide to Prototype

http://particletree.com/features/quick-guide-to-prototype/

Great tutorial! It helped me a the lot since Im new at using Prototype. :-) The $F() function returns value ofkinda the form element or ID passed in. If we put together the following HTML fields:

<input type="text" id="textfield" name="textfield" /> <textarea rows="5" cols="5" id="areafield" name="areafield"></textarea> <select id="selectfield" name="selectfield"> <option value="1" selected>One</option> <option value="2">Two</option> </select> <input type="checkbox" id="checkfield" name="checkfield" value="1" checked />

We can then access the values in the form easily by using the $F() function.

$F("textfield"); $F("areafield"); $F("selectfield"); $F("checkfield");

// // // //

returns returns returns returns

the value of the value of the selected undefined if

the text input the textarea value of the select not checked, or the value

The ability to get a value regardless of the control makes processing forms incredibly easy in most circumstances. There are only two drawbacks I could find with this function: 1) there is no easy way of accessing the selected value of a radio group (only the individual value of a single radio element) and 2) it is not possible to pass in multiple IDs, like you can with the $() function. *Another function, Form.getElements() will return an array of every form element, regardless of the type.

allNodes = Form.getElements("myform"); for(i = 0; i < allNodes.length; i++) { //do something to each form field }

In this example, were getting every element from a form with the id of myform. If you want to add an onclick effect, or a help window popup to each form field, you can loop through as shown above. The next method we will look at is Form.serialize(). When building an Ajax request, you often need to format your own post string to pass the data. When the form is submitted, that string is built. serialize() makes the process easy.

allNodes = Form.serialize("myform"); // returns field1=value1&field2=value2&field3=value3 and so on...

Building the string for us helps out, but what makes the method even nicer is that it is not biased towards the type of field. We saw before that $F() had some problems with radio groups, but serialize() processes all of the values correctly for any type of field. These are not the only form methods available, so go check out the Sergios documentation for the rest.

getElementsByClassName
Why getElementsByClassName()is not already built into JavaScript is beyond me, but its not and so Prototype had added to it to the arsenal as an extension of the document object. It behaves exactly like document.getElementsByTagName(), the only difference being that it checks for className.

allNodes = document.getElementsByClassName("red"); for(i = 0; i < allNodes.length; i++) { alert(allNodes[i].innerHTML); }

An array is returned containing all elements that match the given className. This will also work with elements that have multiple classNames, which is nice. getElementsByClassName() has become a function used in nearly every project around here, mainly to attach DOM events so I suggest every developer give it a try.

Element Helper Functions

The Element Object provides a load of helper functions (increasing with each release) that assist in common DOM manipulation practices. Some of these functions create no new ease, while others simplify 10+ lines of code into one call. Lets take a look at some examples. Retrieving the height of an element without the helper:

2 of 11

09/05/2006 04:55 p.m.

Particletree Quick Guide to Prototype

http://particletree.com/features/quick-guide-to-prototype/

Posted by Remi Prevost November 29, 2005 05:48 PM

$("first").offsetHeight

And now with the helper:

Element.getHeight("first")

In this case, the helper arguably provides no benefit. Now, what if we wanted to remove a className from an element? Here is the long way (taken from the Prototype.js source code):

element = $(element); if (!element) return; var newClassName = ''; var a = element.className.split(' '); for (var i = 0; i < a.length; i++) { if (a[i] != className) { if (i > 0) newClassName += ' '; newClassName += a[i]; } } element.className = newClassName;

And now with the helper function:

Element.removeClassName("elementID", "red");

Nice, eh? Unlike the first example, most of the helper functions save a lot of time and effort by making common tasks easy. And for the sake of consistency, it may be best just to use the Element syntax throughout the project. For a full list of helper functions and how to use them, check out Sergios Prototype documentation .

Try.these Function
Try.these() is a great function for helping developers create code that will work regardless of the different JavaScript implementations

across browsers. Instead of doing object or browser detection on your own, this function will attempt to execute one path of code until it encounters an error, and then switch to the next path.

return Try.these( function() { alert("first"); jkgjhgjhg //intentional error alert("firsterror"); return 1; }, function() { alert("second"); return 2; } );

In the example above, the first path will stop executing at the intentional error. Knowing that, it is important to be cautious with our code because everything before the error will get executed, we must be careful not to execute code twice (once in each try). Overall, Try.these() is not a function we use often around here, but it is nice to know it exists and how it functions.

Ajax Support
There is no shortage of Ajax support functions in this library, and I would like to give you a look at how we primarily create Ajax applications with the help of Prototype.js. Taken from the documentation, we can see a normal Ajax request can be made as follows:

var myAjax = new Ajax.Request( url, {method: 'post', parameters: data, onComplete: ajax_response} );

Where method is post or get, parameters is the name/value paired query string, and onComplete is the function that should be called when everything is finished. Once the core functionality is understood, it is easy to make repetitive Ajax calls by creating our own functions that

3 of 11

09/05/2006 04:55 p.m.

Particletree Quick Guide to Prototype

http://particletree.com/features/quick-guide-to-prototype/

Herethe is another comprehensive prototype reference that provides a request. quick overview. I like it the best (after absorbing the other two, naturally). utilize library. First, a simple function to process the Ajax Note that the Scriptaculous library ships with Prototype version 1.4.0_rc2 that has some changes and many additions, most notable of which is JSON

function ajax_request(url, data) { var myAjax = new Ajax.Request( url, {method: 'post', parameters: data, onComplete: ajax_response} ); }

And after the request is finished, send it over to ajax_response().

function ajax_response(originalRequest) { if(!bHasRedirect) { //process originalRequest.responseText; } else { bHasRedirect = false; ajax_request(originalRequest.responseText, ""); } }

After you make an Ajax request, the response is always sent to ajax-response(). From there, another Ajax request will be made if
bHasRedirect is set to true (a global variable), and if not then the proper code will be executed based on a global array of functions and originalRequest.responseText() (the return value).

PeriodicalExecuter
Once the PeriodicalExecuter object is initialized, it repeatedly calls a desired function at a given interval. This comes in handy when you wish to auto update an Ajax portion of your site.

function periodicalUpdate() { new PeriodicalExecuter(refreshNews, 10); } function refreshNews() { //Ajax code to grab news and update DOM }

The PeriodicalExecuter constructor expects the function to call as its first parameter, and the time interval as its second. Dont get confused with the time though - the common setInterval() is handled with milliseconds, but in this function were dealing with seconds. Also note that while this example assumes Ajax is involved, it can update the page for any reason. Prototype.js also has a Ajax.PeriodicalUpdater class that can ease the process when dealing solely with Ajax.

Additional Enhancements
While I cant cover every single function or method that Prototype.js offers, it is still important to emphasize some of the ones not covered here (all of which can be found in the documentation). observe - This method functions like addEvent(), and should be used to unobtrusively attach events to the DOM. User Interaction - You can find built in globals, such as KEY_TAB to evaluate what key presses the user is making. Additionally, you can find out the coordinates of the mouse, and if it has been clicked. Class Creation - Why stop with what Prototype.js provides? Using the same syntax and functions, we can build our own classes to keep things consistent. Adding a constructor and additional methods has never been easier. Lookup Class.create() in the documentation.

Wrap It Up
Is it acceptable to use public code/libraries when you do not know the author and do not intimately understand what happens behind the scenes? My answer is yes, as long as you thoroughly test the code and trust the person/community that is behind the development of it. In the case of Prototype.js, trust is built from two sources. First, Ruby on Rails has integrated prototype support. Since Ruby on Rails has a respectable developer base, it is likely that many bugs have been found and ironed out to make Prototype.js more stable. Second, the developer works for 37signals, who happen to employ the creator of Ruby on Rails. Not only do I trust the development practices of the company, but I trust that Prototype.js will continue to be tested and improved upon. Given that, and testing within my own projects, I confidently use this library in nearly all my projects. Prototype.js more than doubles the functionality listed in this tutorial, and it is definitely worth checking out. If youre scared of the file size (its 30k as of this writing), remember that you can always take out classes that you dont use (minus the few that have dependencies) and/or

4 of 11

09/05/2006 04:55 p.m.

Particletree Quick Guide to Prototype

http://particletree.com/features/quick-guide-to-prototype/

support in AJAX requests. Sadly, JSONPHP in Protoype yet been out documented discussed. compress your JavaScript files with before hasnt serving them to your or user. Also, once you have tried a few of the methods, the rest are easy to learn, so the learning curve is very minimal. Basically, there is no excuse not to give it a try. The examples shown above are how we handle things at Particletree, and should not be used without testing. Remember, this is meant to be an introduction to Prototype.js, so always reference and give credit to the unofficial Prototype documentation and the script.aculo.us documentation wiki for all of the hard work put in to find out the various methods. As always, if you find any mistakes or possible improvements, please point them out.

Quick Guide to Prototype Author : Ryan Campbell Last Modified : November 28, 2005 10:14 AM Filed Under : AJAX Features Javascript Prototype Navigate : Previous Entry Archives Next Entry

a ro un d t he we b
See what other sites are saying about Quick Guide to Prototype (71)

Posted by Mislav November 29, 2005 06:47 PM

Good find Mislav. I have not come across that link before, but it deserves a mention. I agree with the JSON documentation problem. I am just starting to play with it, and better documentation would make the barrier to entry much lower. Once I feel confident with it, I will begin writing more about it. Posted by Ryan Campbell November 29, 2005 06:56 PM

Nice heads-up and some very useful functions, definately a fan of $(); Posted by Peter Mescalchin November 29, 2005 08:14 PM

You dont really explain the global variable bHasRedirect. I can gather why its there but is it a global variable set by Prototype or one that youve defined? Posted by Jonathan Snook November 29, 2005 10:41 PM

bHasRedirect has nothing to do with Prototype. It is just a variable I set to keep track of the Ajax calls. Sorry for not making that clear. Posted by Ryan Campbell November 29, 2005 10:54 PM

Brilliant, I was told to look into it for my form extraction needs yesterday and today I see this. Posted by Zach Inglis November 30, 2005 08:43 AM

Its good to see some solid documentation. I know that the scriptaculous wiki has a fair amount of prototype documentation and to this day there really seems to be no place to find it all. Nevertheless this article can prove to be another solid reference. The Prototype Element object (aside from $()) has by far been my favorite subset of the library. It includes other methods like Element.hide, Element.show, Element.toggle, Element.remove even Element.cleanWhitespace which has helped immensely when trying to walk the DOM correctly. Posted by Dustin Diaz November 30, 2005 02:49 PM

Great write up Ryan. Just to clear up some things that might confuse your readers, getElementsByClassName behaves exactly like getElementsByTagName with one exception:
var children = $('header').getElementsByTagName('p'); //var children2 = $('header').getElementsByClassName('foo'); // will not work var children3 = document.getElementsByClassName('foo', 'header'); alert(children3.length);

When you want to specify a parent object to start from, the tagName approach would be to retrieve the partent node first and then parentNode.getElementsByTagName, but with the className approach you cant do this, you need to pass the parent as the second argument in the function (e.g. getElementsByClassName(foo, parentNode); -Cheers Posted by Justin Palmer December 1, 2005 04:47 AM

Ahh, good call Justin. I wasnt aware of that.

5 of 11

09/05/2006 04:55 p.m.

Particletree Quick Guide to Prototype

http://particletree.com/features/quick-guide-to-prototype/

Posted by Ryan Campbell December 1, 2005 07:33 AM

Ryan, Thanks for this article. I just feel the need to mention some things: 1) While I think its good to get people to use JavaScript more, its also essential that they do understand how it works. If they just use some magic funtion without knowing why it actually works, or more importantly, whats the problem when it doesnt work, then they have a problem. Basically, I just encourage learning JavaScript as well. Then, after that, use libraries if you like it. 2) I find it a bit inconsistent to use $ in some cases, and then methods of objects, like document.getElementsByClassName in others. Choose either a functions or a methods approach, and then go with it. 3) Of course I have to blow my own trumpet (or something) and mention the getElementsByClassName that Jonathan Snook and I came up with. I think its more flexible, and more importantly, better performance-wise. However, I would see it as an easy thing to implement it in Prototype.js From my point of view, libraries are seldom interesting. While Prototype.js seems very competent, theres always more functions in a library that one will use in a solution. Since were in the days of always trimming, optimizing etc, I only want the functions included that are used. On the other hand, I do understand that it might be good for beginners to at least see the possibilites of what can be accomplished. Posted by Robert Nyman December 2, 2005 05:15 AM

Robert, You make some good points. Let me respond to them in the same order: 1) Learning is always the most important. I have a soft spot in my heart for libraries (especially Prototype) because they teach me things that I am not aware of. First, I learn new syntax or more efficient ways of doing things. Second, some of the functions are very clever, and I may have never thought of them. But then again, I went through the entire source code line by line, and I dont expect every person will do that. Heres an interesting thought. People will use the library without understanding it. Two negatives can come out of this. First, people may misuse functions. Second, people may blindly use bad libraries that hurt more than they help. So what if people endorse certain libraries (such as Prototype) that are safe to use. That is worth it, because good libraries probably produce better code than the coders would on their own (myself included). 2) Thats very true and it never occured to me. A $C() function for classnames could easily be made to stay consistent with the other $() syntax. I dont know if thats a real solution, but I think it comes down to personal preference. I know I am in love with the $() syntax. 3) I agree that your function is much more powerful. I actually have it implemented in the version of Prototype that I use, and I would recommend others to do the same. Posted by Ryan Campbell December 2, 2005 10:39 AM

Ryan, 1) If ones willing to learn, libraries can definitely be a good source for learning and understanding. However, I dont think most people do that, they just want it to work. Which is ok, I guess, but I recommend learning as well, if things go awry. Then, the bulk argument still stands with superfluous functions one doesnt use in the library. :-) 2) Absolutely, I love the syntax too! 3) A humble thank you! :-) Posted by Robert Nyman December 2, 2005 11:02 AM

Yes, there is no answer to solve the unnecessary additional functions for people who dont browse the source code. Unless someone comes along and writes a Build Your Library program that allows you to pick and choose functions and dynamically generates the source code. Thats taking it to far though, but it would be cool to see. I am just being difficult. I agree with your argument. Posted by Ryan Campbell December 2, 2005 01:33 PM

Robert, I believe libraries do less harm than good. The extra functions you wont ever use are sometimes used internally by the functions you do use and they are just there when you need them. When your building an application, your not aware of what youll need before you start. If you have a flat tire on the side of the road, you can be sure the mechanic brings more than just a lug wrench. Libraries also encourage consistency in programming style. Prototype encourages you to use OO Javascript, and when I read someone elses code its easier to point out whats coming from where. Now you dont need any library for this to do it on your own, but Prototype has been widely adopted and it has become easier for me to read other peoples code. Last point, the LOC will more than likely be less by using a library in a large application than going at it alone because of abstraction. When you want to attach an event, you have a unified approach, no need to bother with crowding your own Javascript with something the library takes care of for you. -Cheers Posted by Justin Palmer December 2, 2005 03:45 PM

Justin, Agreed; it definitely depends on where and when they are being used, as well as who uses it. What I see from time to time, though, is libraries included in solutions that are huge, and maybe 25% are being used in practice. But by the time the whole web site is due to be released, no one dares to remove anything from the library, because things might break and theyre not sure if/when that will happen. However, I do have to give the new libraries that are popping up credit. Theyre being smaller in size and more optimized, so some are decent to use. When it comes to consistency in programming style, Im all for it. But, as I pointed out in point number two above, most libraries arent all that conistent, so I really encourage library builders to strive for that. Then, naturally, I also have some code that I bring with me from project to project, but that code is basically just the getElementsByClassName mentioned

6 of 11

09/05/2006 04:55 p.m.

Particletree Quick Guide to Prototype

http://particletree.com/features/quick-guide-to-prototype/

above and code for attaching events. Posted by Robert Nyman December 3, 2005 04:08 PM

In regards to having superfluous functions in prototype, how about splitting prototype up into seperate files for each function. A single function could be called, with the functions needed as parameters. This way, only the functions needed would be loaded, and different function sets could be loaded for different pages without having to have multiple libraries stored. Im not a javascript developer (yet) so Im not sure whether there are server load issues with loading multiple files, but this seems a sensible solution to me. Posted by Jorj Ives December 4, 2005 11:06 AM

Is there a minimal version of Prototype.js floating around somewhere for those concerned about the file size? Posted by Dave December 4, 2005 12:11 PM

I noticed Justin mentioned that some functions are needed by other functions even when they arent needed directly by the user. Could a function check whether another function existed? If so, in the system I suggested above the function could load in the required function if it wasnt available. Posted by Jorj Ives December 4, 2005 01:38 PM

Dave, I believe the moo.fx package comes with a stripped version. Posted by Ryan Campbell December 4, 2005 02:13 PM

Since you asked, I have combined a few prototype stripped versions to make Ajax and moo.fx possible. 6.4kb total. Click my name, its on the homepage. Sorry for the plug, but Im not even tracking downloads so Im just trying to be helpful. :) Posted by Bradley December 4, 2005 02:54 PM

The dojo toolkit (http://www.dojotoolkit.org) is an AJAX/DHTML widget library that provides a lot of Prototype-like helper functions, plus graphical widgets, drop-n-drag, effects, and other stuff. Not having used Prototype, I cant recommend one over the other; but Im posting here because dojo actually does have a utility that allows you to pick and choose which parts of the library to include in your source, and even compresses that JS code into the smallest possible file for use in deployment. (dont try debugging w/it all the variable/function names go poof, shrank to tiny pieces :) ) Heres the link: http://blog.dojotoolkit.org/2005/08/14/making-code-smaller-safely Posted by Rogers Reilly December 5, 2005 03:26 PM

Very helpful artical Ryan. Thankyou for your examples and clarification on the use of the convenient Prototype functions as I could not find any docs untill now. Posted by William December 9, 2005 12:03 AM

Ruby-like features in Prototype explained: A Look at Enumerable, Array and Hash. Really nice! Posted by Mislav December 9, 2005 02:04 PM

In response to Ryan Campbells Build Your Own Prototype Library idea. Does this sound like a prototype project / AJAX experiment waiting to happen to anyone else? Yeah? Email me. Posted by Abba Bryant December 12, 2005 04:18 AM

I think that Build Your Own Prototype Library ideas are dangerous. Prototype is huge, but its still less than 30kB - and that compressed would be around 5kB. Still too much for you? Once it is cached, a user seldom needs ever to download it again. Why are dynamic pieces of prototype dangerous? Sure, it can be written and sure, it would effectively strip down those unwanted helpers, but you have to realize that one part of your site would not need Ajax, one would, one would need the Position object, one would need Forms So in this example we face downloading 4 different dynamically created javascript files that still have most of their parts equal, thus creating redundant downloads for a person that browses different parts of your site. The problem described here could be solved by creating static pieces (atoms) of Prototype in separate files and link them dynamically into our pages so we can benefit from caching, but how much requests would that be? Is it really worth it. The perfect world would be in which we would all link to Prototype directly on Sams site. That way a user browsing through several different sites would only need to download one copy of Prototype and cache it :)

7 of 11

09/05/2006 04:55 p.m.

Particletree Quick Guide to Prototype

http://particletree.com/features/quick-guide-to-prototype/

Posted by Mislav December 12, 2005 12:28 PM

Can someone tell my why someone would use the $F() function when you can just use the $() function? Thanks. Posted by Jon December 14, 2005 07:26 AM

Jon, the $() function just grabs an element by ID, while the $F() function gets the value inside of an element. For example, to grab what someone typed in a textbox with the two functions: $(tBox).value or $F(tBox) That is a simple example, but it becomes even more useful with the different types of form elements. Posted by Ryan Campbell December 14, 2005 09:31 AM

Hi everyone, I am new to webprogramming and AJAX in specific. I am very proficient in Java and have created and used XML tags for servers, but have never set anything up on my own. I read through the tutorial, but there are still some issue I am unclear on. I understand that the code goes in the html file for my webpage. However, I am unclear where I use functions, such as $F(). These certainly arent HTML commands. An explanation on how to set everything up would be nice. Right now, I am completely in the dark. Posted by Owen December 14, 2005 03:01 PM

Brilliant artice Ryan, Treehouse subscriber here, glad to find some more of your work. Owen, you need to use the $F() functions and the Element.getElementByClassName eetc in tags, then in the script tags write functions like : function doSomething() { //put my $F() coding here } and call the function on the click of a html button or anywhere where you want it to work. Posted by Rob Elkin December 14, 2005 06:10 PM

Hi Ryan, Quick question about making multiple AJAX calls using the library. Assuming the responses may not come back in the same order you sent them how can you use a generic response handler? You state you use a Global variable to determine whether a subsequent AJAX call should be made (bHasRedirect ) but how do you know that the returned call relates to that instance of the global variable? Thanks Mark Posted by Mark Barton December 15, 2005 07:53 AM

Mark - Actually the application I used that code in had no chance of Ajax calls overlapping each other, so it was not important. But you are right, the code I provided does not take that into consideration, and would have to be built in. Posted by Ryan Campbell December 15, 2005 05:54 PM

are there any dummies or more real life use documentation for prototype, i try to start learning ajax but i still can not do such as things like populating labels. How is it if i habe php which output in a loop and i use ajax.updater on the other side to populate the , how can i display the options and assign a value to each option. Posted by wahyu December 20, 2005 01:56 PM

ups seemed like the comment i wrote above has been cuted off maybe because of i wrote some html code. ok the point is how can i populate a dropdown form element after a loop of the php script output the option tags (html) with the label and value. How can i update the dropdown form element. Posted by wahyu December 20, 2005 02:00 PM

Nice article. I feel like I am slowly coming to grips with the AJAX thing but I still have not managed to actually figure out where to start to include AJAX in a web application. I would love to be able to allow users to add new categories to a drop-down menu (somewhat like the categories feature in WordPress 2.0) but cant find info on this anywhere. It would be great if someone came up with a simple, real-life tutorial for web designers/programmers who know PHP/MySQL/HTML and a bit of JavaScript. Keep up the good work folks! Posted by Galen January 3, 2006 07:49 PM

Thanks for the write up on prototype. It helped me really see and understand what all prototype has to offer. Great work.

8 of 11

09/05/2006 04:55 p.m.

Particletree Quick Guide to Prototype

http://particletree.com/features/quick-guide-to-prototype/

Posted by Noah Winecoff January 11, 2006 06:21 PM

possibly I havent looked through it enough; but i think an obj -> XML ; XML -> obj method would be a very useful addition to your Ajax class. I need/want a JS library that provides the following: data (objs) -> XML -> encryption (optional) -> AJAX request and then the reverse AJAX/decrypt/deXML handler anyone know if this exists somewhere Posted by peter January 20, 2006 06:11 PM

hello im from mexico and so sorry but , i want to know something, im neophite on Ajax technologies, and i wanna know if i have to configurate something on my server, cause, i been trying example codes, and i cant to fly with ajax, i need an explanation, well add me to contacts guarnizzz h o t m a i l greetings!! Posted by Vortex February 3, 2006 02:08 PM

Im wondering if anyone has addressed the points brought up regarding the altered behavior of Arrays which result from the prototype.js library? http://blog.metawrap.com/blog/WhyIDontUseThePrototypejsJavaScriptLibrary.aspx Posted by Matt February 7, 2006 02:28 PM

I need to do a server-side validation in my form which I intend to do without refreshing the page. This would require an synchronous call to the server. Any idea, how I can achieve this using ProtoType? This wont require a callback and I am interested only in the responseText. Thanks in advance! Posted by K2 February 8, 2006 08:07 AM

Hi, firstly Id like to say your site is great and very impressive. Cool stuff! Posted by Qonewod February 22, 2006 03:32 AM

Thanks so very much for taking your time to create this very useful and informative site. Hello all! Posted by Hifexo March 4, 2006 09:06 AM

Cool site, nice design, webmaster - respect! Posted by Rofel March 5, 2006 04:43 AM

Best site! Nice Website, keep up the good job. Posted by Rinet March 6, 2006 02:40 PM

Everyone needs a hug. <<< i agree. Posted by snag March 8, 2006 04:39 PM

Test Posted by love01px March 9, 2006 10:19 AM

Maybe you could add more pictures too! Keep up this great resource. Posted by Xenewem March 9, 2006 12:35 PM

It has helped me immensely. This site is very good. Posted by Nenojil March 10, 2006 08:52 PM

Keep it going, thanks. Maybe you could add more pictures too! Posted by Borahey March 11, 2006 12:40 PM

9 of 11

09/05/2006 04:55 p.m.

Particletree Quick Guide to Prototype

http://particletree.com/features/quick-guide-to-prototype/

This may be a really dumb question but from what I can gather the prototype lib only works on Safari 1.2+ and this seems to be confirmed when I get limited functionalty and unexpected behavious in Safari 1.0.2. Is there a simple way to quit if a browser does not support the library? i.e. if (! blah.blah) return; Prior to prototype I would use if (! document.getElementByID(el)) return; Or maybe my heads too full trying to get to grips with this and Im missing something glaringly obvious? :-) Posted by Russ March 20, 2006 09:50 AM

I see that you can easily create new Classes using the Class.create() call but I want to make my site 100% Javascript so I need to create new HTML elements. How is everyone doing that? Or are you? And once you have a new HTML object, how are you getting the HTML out of it to add to another object via Insertion.Top or one of the other Insertion methods? I just found Prototype yesterday and I am trying to hit the ground running and currently my application is all Javascript (longhand) and I want to streamline it with Prototype. Thanks! Posted by Jim Hunter March 21, 2006 08:17 PM

Is there a way of grabbing an XML document and parsing it using Prototype and if there is does anyone have a tutorial or even better yet a code snippet on how to do that? I could really use the help. Thanks, Tony Posted by Tony March 22, 2006 05:35 PM

Everyone needs a hug. Posted by Gary March 22, 2006 07:19 PM

Its a great tutorial but with a little online example or demo could be better ;) Posted by Nicola April 4, 2006 07:46 AM

Very nice. Posted by Wicay April 11, 2006 06:42 PM

Good content. Posted by Tewigod April 12, 2006 02:02 PM

I will forward this to my friends. Have advised. Thank you very much! Posted by Jacobo April 12, 2006 06:19 PM

Im trying to use Event.observe in IE (in FireFox it seems to work fine), but when the event hanling function is called, the only parameter is the event object, so how do I access the DOM element which captured the event? I have tried event.srcElement, event.boundElements, and this, but neither contain the DOM element in question. I would appreciate any help. Thanks a lot. Posted by Clemente April 13, 2006 05:22 PM

I forgot. I also tried Event.element(event), and nothing yet :( Posted by Clemente April 13, 2006 05:25 PM

Event.element(e) will get it for you. Also, you can use the prototype bind() function to make it so that the this keyword will reference the element. Posted by Ryan Campbell April 13, 2006 06:04 PM

couldnt find anyting in Prototype to do a get/set on a form radio element, so i came up with this and though id share. given a form id , radio element name, and an optional value, this will do the dirty work for you. feedback appreciated. =)

10 of 11

09/05/2006 04:55 p.m.

Particletree Quick Guide to Prototype

http://particletree.com/features/quick-guide-to-prototype/

function radiovalue (form, name) { var setvalue = arguments[2]; var elements = Form.getElements( $(form) ); for (var i = 0; i < elements.length; i++) { var e = elements[i]; if( e.name == name ){ if ( setvalue != null && (set value == e.value) ){ e.checked = true; } if ( e.checked ){ return e.value; } } } } Posted by Lycos Greg April 27, 2006 10:58 AM

K, this is my dumb question for the day, but being new and finding the ajax response time to be a bit sluggish Is it good practice, does it add to overhead, to reinitialize the Ajax.Updater object on each call? var MyAjax = new Ajax.Updater( I cant seem to create once and reuse so perhaps thats just the way things work ;) Posted by Allan April 29, 2006 11:08 PM

Its got every thing on it. I bookmarked it. A great piece of work. Posted by Dodake May 1, 2006 01:03 AM

if I want to grab the responseText instead of replacing the div id in prototype then how to do it Posted by Nilanjan May 2, 2006 07:36 AM

Advertise on Particletree

11 of 11

09/05/2006 04:55 p.m.