# Javascript tabs not working in rails app

**URL:** <https://www.ruby-forum.com/t/javascript-tabs-not-working-in-rails-app/190509>\
**Category:** Rails\
**Created:** [June 21, 2010, 10:03pm UTC](https://www.ruby-forum.com/t/javascript-tabs-not-working-in-rails-app/190509 "2010-06-21T22:03:04Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![jmaenpaa](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/j/9de053/32.png) [@jmaenpaa](https://www.ruby-forum.com/u/jmaenpaa)\
**Post date:** [June 21, 2010, 10:03pm UTC](https://www.ruby-forum.com/t/javascript-tabs-not-working-in-rails-app/190509/1 "2010-06-21T22:03:04Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![jmaenpaa](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/j/9de053/32.png) [@jmaenpaa](https://www.ruby-forum.com/u/jmaenpaa)\
**Post date:** [June 22, 2010, 10:25pm UTC](https://www.ruby-forum.com/t/javascript-tabs-not-working-in-rails-app/190509/2 "2010-06-22T22:25:34Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![jmaenpaa](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/j/9de053/32.png) [@jmaenpaa](https://www.ruby-forum.com/u/jmaenpaa)\
**Post date:** [June 22, 2010, 10:44pm UTC](https://www.ruby-forum.com/t/javascript-tabs-not-working-in-rails-app/190509/3 "2010-06-22T22:44:50Z")

</div>

Hi John,

On Tue, Jun 22, 2010 at 3:25 PM, John M. [removed\_email\_address@domain.invalid](mailto:removed_email_address@domain.invalid)  
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

---

<div class="post-metadata">

**Author:** ![jmaenpaa](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/j/9de053/32.png) [@jmaenpaa](https://www.ruby-forum.com/u/jmaenpaa)\
**Post date:** [June 22, 2010, 11:04pm UTC](https://www.ruby-forum.com/t/javascript-tabs-not-working-in-rails-app/190509/4 "2010-06-22T23:04:15Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![jmaenpaa](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/j/9de053/32.png) [@jmaenpaa](https://www.ruby-forum.com/u/jmaenpaa)\
**Post date:** [June 22, 2010, 11:12pm UTC](https://www.ruby-forum.com/t/javascript-tabs-not-working-in-rails-app/190509/5 "2010-06-22T23:12:58Z")

</div>

firebug is telling me “$” is not defined