CODEWITHSUNDEEP
ruby-on-railsjquery-uitwitter-bootstraprubygemsruby-on-rails-3.2
Sergey Zinoviev
Sergey Zinoviev

Reputation: 41

Twitter Bootstrap and jQuery.ui conflict in Rails 3.2.8

I have a rails app that deals with Bootstrap 2.0. It also uses jQuery autocomplete combobox. My application.js looks like this:

//= require jquery
//= require bootstrap
//= require jquery_ujs
//= require jquery.ui.all
//= require rails.validations
//= require jquery.quicksearch
//= require jquery-tablesorter/jquery.metadata
//= require jquery-tablesorter/jquery.tablesorter
//= require jquery-tablesorter/jquery.tablesorter.widgets
//= require jquery-tablesorter/addons/jquery.tablesorter.pager
//= require_tree .

The problem is that this way autocomplete works but some buttons don't get class 'active' after the pressing on them. When I put require bootstrap after the declaration of query.ui.all like here

//= require jquery
//= require jquery.ui.all
//= require bootstrap
//= require jquery_ujs

everything happens exactly the opposite way: buttons work but combobox doesn't. Here is my Gemfile (part of it):

source 'https://rubygems.org'

gem 'rails', '3.2.8'
gem 'bootstrap-sass', '2.0.0'
gem 'will_paginate', '3.0.3'
gem 'bootstrap-will_paginate', '0.0.6'


# Gems used only for assets and not required
# in production environments by default.
group :assets do
  gem 'sass-rails',   '3.2.4'
  gem 'coffee-rails', '3.2.2'
  gem 'jquery-ui-rails'
  gem 'jquery-tablesorter'    
  gem 'uglifier', '1.2.3'
end

gem 'jquery-rails', '2.0.2'
gem 'client_side_validations'

How can I solve this issue?

Upvotes: 2

Views: 1982

Answers (2)

Sergey Zinoviev
Sergey Zinoviev

Reputation: 41

Solved this issue by modifying autocomplete combobox js code by manually adding classes and spans that somehow didn't apply to the element.

Upvotes: 2

Rodrigo Zurek
Rodrigo Zurek

Reputation: 4575

always load jquery and jquery ui first since almost every javascript depends on them

Upvotes: 2

Related Questions