> $(document).ready(function(){
>  $(".bio_button").click(function(event) {   //when a user clicks on

Both of those look like jQuery, not Prototype.  Prototype's equivalent
of the jQuery ready function is the dom:loaded event[1]:

    document.observe('dom:loaded', yourCallbackGoesHere);

Similarly, $()[2] looks up elements by ID, it does not search for them
by selector.  $$()[3] does that.

It may be worth your taking a step back and reading the Prototype API
[4] through from beginning to end.  It takes about an hour, and will
save you at least that much time across the life of your project
(heck, probably even in the coming week).

[1] http://prototypejs.org/api/document/observe
[2] http://prototypejs.org/api/utility/dollar
[3] http://prototypejs.org/api/utility/dollar-dollar
[4] http://prototypejs.org/api

T.J. Crowder
tj / crowder software / com

On Aug 31, 1:48 am, Nelson Hernandez <nels...@gmail.com> wrote:
> I have a very simple script that is intended to show an employees
> biography on click, and hide all other biography's (since they occupy
> the same space).  I have two issues I can't resolve, and for the life
> of me can't figure out why.  I'm using Ruby on Rails and I have
> included the default javascrip which includes Prototype.  I'm testing
> in FireFox.
> Here's the code with comments for reference, exact problems detailed
> below:
> <script type="text/javascript">
> $(document).ready(function(){
>  $(".bio_button").click(function(event) {   //when a user clicks on
> div with class bio_button, do:
>                 $(".bio").hide();                    //hide all divs that 
> have a
> class of "bio"
>                 var element = Event.element(event);    //get the div id for 
> the
> element clicked
>                 var id = element.id.substring(0,element.id.length-1);   
> //remove the
> last letter of that div id, which
>                //
> corresponds to the div which contains the
>                //
> biography text
>                 //alert(id);                  //used to make sure the 
> substring was
> working, it is.
>                 $(id).show();         //this doesn't work for some reason 
> please :(
>  });});
> </script>
> ...
> <div class="bio_button" id="timB">click to show Tims bio</div>
> <div class="bio_button" id="bethB">click to show Beths bio</div>
> ...
> <div class="bio" id="tim" style="display:none;">tim's awesome
> biography</div>
> <div class="bio" id="beth" style="display:none;">beth's awesome
> biography</div>
> PROBLEM(s) (using a click on tim as example):
> 1) The above does indeed hide all bio's, and will output an alert of
> "tim" if I click on tim.  However, it won't change the display style
> to show.
> 2) In the javascript, if I replace $(id).show(); with $("tim").show();
> it still doesn't work....unless I use tim as one of the class
> definitions in the html instead of a div id.  If I specify tim as a
> class, and use "tim" explicitly in the javascript, it works perfectly.
> Sorry if this is the wrong forum, i'm losing my mind over what seems
> should be very simple.  Thanks to anyone that can help.
> -Nelson
You received this message because you are subscribed to the Google Groups 
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to 
For more options, visit this group at 

Reply via email to