javascript tabs not working in rails app

rubyonrails-talk
1

This is in application.html.erb: <script type="text/javascript" src="../javascripts/application.js"></script> <script type="text/javascript" src="../javascripts/jquery-1.4.2.js"></script>

                    <div id="content">

                      <%= yield :tabContent %>

                    </div>

This is in index.html.erb in views/products: <% content_for :tabContent do %> <div class="tabContent" id="a">     <p>         Content     </p>

</div>

<div class="tabContent" id="b">

    <p>         Content     </p>

</div>

<div class="tabContent" id="c">     <p>         Content     </p> </div> <% end %>

This is in application.js:

$(document).ready(function() { var linksToInt = {     "#i": 0,     "#j": 1,     "#k": 2,   "#a": 3,   "#b": 4,   "#c": 5,   "#d": 6,   "#e": 7,   "#f": 8,   "#g": 9,   "#h": 10}

$("a").click(function(){displayDiv($(this).attr("href"));});

function displayDiv(id){ var linkInt = linksToInt[id]; on_btn_click(linkInt); }

function on_btn_click(displayDiv){     displayDiv != null ? null : this;

    switch(displayDiv){         case 0:             $("#content > div").hide();             $("#a").show();             break;         case 1:             $("#content > div").hide();             $("#b").show();             break;         case 2:             $("#content > div").hide();             $("#c").show();             break;         case 3:             $("#content > div").hide();             $("#d").show();             break;       case 4:           $("#content > div").hide();           $("#e").show();           break;     case 5:         $("#content > div").hide();         $("#f").show();         break;     case 6:       $("#content > div").hide();       $("#g").show();       break;     case 7:       $("#content > div").hide();       $("#h").show();       break;     case 8:       $("#content > div").hide();       $("#i").show();       break;     case 9:       $("#content > div").hide();       $("#j").show();       break;     case 10:       $("#content > div").hide();       $("#k").show();       break;     } }});

It just doesn't hide the divs and show the one specified. I tried it out in a regular html and javascript file to test it and it worked, but in rails app, it isn't working.

Thanks for any response.

2

Hi John,

3

This works: window.onload = function(){     var links = document.getElementsByTagName("A");         for(var i = 0; i < links.length; i++){             links[ i ].onclick = function(){alert("click");};         } };

This doesn't: $(document).ready(function() {     var links = document.getElementsByTagName("A");         for(var i = 0; i < links.length; i++){             links[ i ].onclick = function(){alert("click");};         } });

Does this mean there's an issue with jquery?

The reason why I am confused is because I am using stepcarousel.js plugin and that requres jquery and this plugin works.

So as you can see, I am real confused.

4

firebug is telling me "$" is not defined