JQuery conflict in Rails 4 app using Bootstrap

Question

I've added a couple of JQuery functions to my Rails 4.1.8 application which uses Bootstrap 3. These functions are to solve the issue of applying the "active" styling to the current navigation tab.

The functions work well to remove the active class and apply it to the clicked tab, which is great. THE PROBLEM IS the tabs no longer work as links. When hovered, the target address shows up in the browser dialog. But when clicked, nothing happens. There is not even an event in the console. No errors are even thrown. Color changes though.

active_menu_item.js

$(document).ready(function() {
    $('li>a.tab_link').click(function(e) {
      $('li>a.tab_link').removeClass('active');
      var $this = $(this);
      if (!$this.hasClass('active')) {
        $this.addClass('active');
      }
      e.preventDefault();
    });
});

$(document).ready(function() {
    $('.nav-pills li a.btn').click(function(e) {
      $('.nav-pills li a.btn').removeClass('active');
      var $this = $(this);
      if (!$this.hasClass('active')) {
        $this.addClass('active');
      }
      e.preventDefault();
    });
});

from application.html.erb tag..

<!-- Load javascripts -->
<%= javascript_include_tag 'application', 'data-turbolinks-track' => false %>

application.js

//
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require change_theme
//= require active_menu_item
//= require_self
//= require_tree .

Gemfile

source 'https://rubygems.org'

gem 'rails', '4.1.8'
gem 'mysql2'
gem 'sass-rails', '~> 5.0.3'
gem 'compass', '~> 1.0.0'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.0.0'
gem 'kaminari'
gem 'therubyracer',  platforms: :ruby
gem 'jquery-rails'
gem 'turbolinks'
gem 'jquery-turbolinks'
gem 'jbuilder', '~> 2.0'
gem 'sdoc', '~> 0.4.0',          group: :doc
gem 'spring',        group: :development
gem 'fabrication', '~> 2.12.2'
gem 'ffaker'
gem 'forgery'
gem 'rufus-scheduler', '~> 3.1.1'
gem "activeuuid"
gem 'foreigner', '~> 1.7.2'
gem 'aws-sdk', '~> 2.0.24'
group :development do
  gem 'rails-erd', '~> 1.3.0'
end
gem 'bootstrap-sass', '~> 3.2.0'
gem 'autoprefixer-rails'
gem 'bootstrap_form'
gem 'puma', '~> 2.11.1'
gem 'devise'

Tried removing the e.preventDefault(); line, but then it doesn't work at all. I also tried setting TurboLinks to "false" in my application.html.erb, and removing TurboLinks references in application.js as well as the Turbolinks Gem and the Jquery-Turbolinks gem, but that did nothing. It also broke lots of other stuff so I put it back in.

I'm pretty sure it's a problem with how I've written the functions. My JQuery is pretty bad (still learning) and I more or less find functions and modify them to suit my needs. I don't really understand if I've even loaded JQuery properly. Guess I'm kind of hoping Rails gems are doing that for me?

I know very little about JQuery and have searched extensively before asking this. I know the functions are targeting the right thing because they change color and stay until I click something else. Only thing is, once clicked the links are disabled completely. If any other code is needed to find a solution, I'll be happy to post it.

EDIT: Made a fiddle to demonstrate. However, it doesn't show the actual problem - the links will change color, but no longer work as links.

Please Help.

Thank you

When you remove e.preventDefault() in the callback, do the links work but the color doesn't change, or nothing works? — Bart Jedrocha
– Bart Jedrocha, Commented May 7, 2015 at 13:11
@BartJedrocha When I remove that line, the links work and they do change color. However, it only changes color for a split second. As soon as the link renders its target, the color change is gone. — B. Bulpett
– B. Bulpett, Commented May 7, 2015 at 13:19

Bart Jedrocha · Accepted Answer · 2015-05-07 13:38:18Z

1

The reason why your links aren't working is because you've specified e.preventDefault() in your callback. Take a look (here)[http://api.jquery.com/event.preventdefault/] for more information.

If you remove that line in the callback, you'll see that your links now work but something else unexpected happens - the color will change briefly (as a result of having the active class applied) but then go back to normal when the page re-renders. This is because while the click handler gets called immediately and adds the class, Turbolinks then replaces the entire body with the response.

I would suggest not using jQuery and instead relying on the current_page? helper to determine whether the class should be applied. In other words, in the view where you render your links, do something like this

<li class="<%= 'active' if current_page?(about_path) %>"><%= link_to "About", about_path %></li>

Hope this helps.

answered May 7, 2015 at 13:38

Bart Jedrocha

11.6k5 gold badges46 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

B. Bulpett Over a year ago

This fixes everything! Thank you so much. I really wish there was a way to use the jQuery way but I don't want to completely remove TurboLinks. I like this method though because it feels more "Railsy" :)

Bart Jedrocha Over a year ago

@B.Bulpett starting with Turbolinks 3, you'll be able to designate sections of the DOM as permanent meaning that they won't be re-rendered as a result of a Turbolink request. See here

Collectives™ on Stack Overflow

JQuery conflict in Rails 4 app using Bootstrap

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related