8

I'm developing a 3.1 Rails app with Twitter Bootstrap using seyhunak's gem.

On the production mode, I was able to use basic bootstrap CSS and JS through pipeline precompilation:

RAILS_ENV=production bundle exec rake assets:precompile

Using the gem file :

group :assets do
  gem 'sass-rails',   '~> 3.1.5'
  gem 'coffee-rails', '~> 3.1.1'
  gem 'uglifier', '>= 1.0.3'
  gem "twitter-bootstrap-rails"
end

And the application.js file:

//= require_tree .

//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require bootstrap-tab
//= require bootstrap-modal
//= require bootstrap-dropdown
//= require bootstrap-popover

The application worked fine except for for the bootstrap plugins such as modals and dropdowns. These plugins exist as static javascript libraries existing inside the vendor assets directory:

/vendor/assets/javascripts/bootstrap-dropdown.js
...

I'm not sure whether these files are being precompiled or not, how can I manage to do so?

al-Amjad Tawfiq Isstaif
  • 369
  • 1
  • 2
  • 13

2 Answers2

8

Found it!

It wasn't a problem of bootstrap, but rather with properly precompiling jQuery. As well as there is no need for including the javascript files for individual plugins. They are already included in the main twitter/bootstrap.

Problem was solved by re-arranging the javascripts files as follows:

application.js

//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap

Gemfile

group :assets do
  gem 'sass-rails',   '~> 3.1.5'
  gem 'coffee-rails', '~> 3.1.1'
  gem 'uglifier', '>= 1.0.3'
  gem "twitter-bootstrap-rails"
end

gem 'jquery-rails', '>= 1.0.12'

Precompling the assets and worked!

al-Amjad Tawfiq Isstaif
  • 369
  • 1
  • 2
  • 13
  • This wasn't EXACTLY the solution that worked for me, but it got me going in the right direction. Thanks – Arcolye May 24 '12 at 01:36
1

In your /vendor/assets/javascripts place a file vendor_js.js with the following content:

//= require_tree .

Now in your /app/assets/javascripts/application.js include a line

//= require vendor_js

You can customize the vendor_js.js to only include specific vendor plugins, e.g. by using //= require bootstrap-dropdown to include only the bootstrap dropdowns within the vendor javascripts directory.

UPDATE TO REFLECT COMMENTS

Since you put the bootstrap JS files into vendor/javascripts manually, please remove all bootstrap-related requires from your application.js and paste them into vendor_js.js as noted above. Make sure you get the path right (in case you put the files in a subdirectory). Also make sure to include each file separately and place the inclusion of tooltip before popover, since popover depends on tooltip to be loaded first.

emrass
  • 6,253
  • 3
  • 35
  • 57
  • I tried this way and it worked in the development mode, precompiled the assets again and the plugins and other stuff still not working in production mode :( – al-Amjad Tawfiq Isstaif Apr 20 '12 at 11:32
  • 1
    Could you check if the assets are precompiled correctly, i.e. the file hash is appended to the file name? In theory, they should. If they are, then it might be another problem, e.g. namespace clashes etc. I did not use twitter-bootstrap-rails - but are you sure the gem goes into the "assets" group? Also, how did you get the 2 specific plugins into the vendor dir, while others seem to be located in another directory? – emrass Apr 20 '12 at 11:39
  • It seems that the plugin code exists inside the precompiled application.js, but for some reason the browser isn't recognizing it. – al-Amjad Tawfiq Isstaif Apr 20 '12 at 11:41
  • I entered the files manually in the vendor file. I didn't now a better way to use the bootstrap jquery plugins. – al-Amjad Tawfiq Isstaif Apr 20 '12 at 11:44
  • Yes I checked the hash files, and the gem is inside the assets group. What can cause a namespace clash? – al-Amjad Tawfiq Isstaif Apr 20 '12 at 11:49
  • Did you store the bootstrap js plugins in `vendor`? If so, they could now be included twice ... Please remove all bootstrap-related lines from your application.js. Also, I think tooltip must be included before popover - so instead of `require_tree .` you might need to declare every file separately in the vendor.js; and pay attention to the order of the includes – emrass Apr 20 '12 at 11:49
  • I'm sorry to say that I've already done what you said, but still plugins not working in production. I think it is a problem in the way javascripts are precompiled. – al-Amjad Tawfiq Isstaif Apr 20 '12 at 12:06
  • Just an important note: the app is working fine during development mode. – al-Amjad Tawfiq Isstaif Apr 20 '12 at 12:10
  • What exactly does "not work" mean? Do you receive JS exceptions in the browser console (eg Chrome or Firebug)? Please include more information in your question and you might also want to change the title - this will help others support you as well. – emrass Apr 20 '12 at 12:20
  • Thank you so much blackbird07, I've solved the problem. I'll have to wait for another hour to submit it :) – al-Amjad Tawfiq Isstaif Apr 20 '12 at 14:16