Javascript tabs not working in rails app

Rails
1

This is in application.html.erb:

                <div id="content">

                  <%= yield :tabContent %>

                </div>

This is in index.html.erb in views/products:
<% content_for :tabContent do %>

Content 

<p>
    Content
</p>

Content

<% 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

I tried this:
window.onload = function(){
alert(“Hello World”);
$(“a”).click(function(){alert(“Hello World”)});
}

And the alert triggers on page load, but when I click a lnk, it doesn’t
trigger.

3

Hi John,

On Tue, Jun 22, 2010 at 3:25 PM, John M. [email protected]
wrote:

I tried this:
window.onload = function(){
alert(“Hello World”);
$(“a”).click(function(){alert(“Hello World”)});
}

And the alert triggers on page load, but when I click a lnk, it doesn’t
trigger.

$() takes an element id. ‘a’ is not an id.

HTH,
Bill

4

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.

5

firebug is telling me “$” is not defined