javascript - Twitter bootstrap jquery plugins not compiled for production

Question

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 · Accepted Answer · 2012-04-23 08:53:22Z

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!

edited Apr 23, 2012 at 8:53

answered Apr 20, 2012 at 17:24

al-Amjad Tawfiq Isstaif

3691 gold badge2 silver badges13 bronze badges

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

1 Comment

Arcolye Over a year ago

This wasn't EXACTLY the solution that worked for me, but it got me going in the right direction. Thanks

emrass · Accepted Answer · 2012-04-20 11:53:54Z

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.

edited Apr 20, 2012 at 11:53

answered Apr 20, 2012 at 9:12

emrass

6,4944 gold badges37 silver badges57 bronze badges

10 Comments

al-Amjad Tawfiq Isstaif Over a year ago

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 :(

emrass Over a year ago

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?

al-Amjad Tawfiq Isstaif Over a year ago

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 Over a year ago

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 Over a year ago

Yes I checked the hash files, and the gem is inside the assets group. What can cause a namespace clash?

|

Collectives™ on Stack Overflow

javascript - Twitter bootstrap jquery plugins not compiled for production

2 Answers 2

1 Comment

UPDATE TO REFLECT COMMENTS

10 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

UPDATE TO REFLECT COMMENTS

10 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related