Question

I have this nav menu with 2 tabs:

<div id="user_menu">
 <ul class="nav nav-tabs">
  <li class="active"><%= link_to "Group1", group1_friends_path(@user), :remote => true %></li>
  <li><%= link_to "Group2", group2_friends_path(@user), :remote => true %></li>
 </ul>
</div>

I’ve managed to let Ajax render certain partials. Now, when I click on the tabs the partials load in my target placeholder div. I buid this jquery script to handle this,

tab.js: which I placed in assest/javascripts/

$('#user_menu a').click(function (e) {
    $('ul.nav-tabs li.active').removeClass('active')
    $(this).parent('li').addClass('active')
})

My application.js looks like this:

//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .

Any help would be appreciated.

Answer 1

Try this. Maybe it’s beeing executed before the document is ready?

$(function() {
  $('#user_menu a').click(function (e) {
    $('ul.nav-tabs li.active').removeClass('active')
    $(this).parent('li').addClass('active')
  });
});