Twitter Bootstrap Dropdown broken after assets precompile

Question

After RAILS_ENV=production bundle exec rake assets:precompile the dropdown becomes unresponsive in development environment. Nothing happens on clicking the button. However removing everything from public/assets starts working. Also it works perfectly in production mode (rails s -e production)

The application uses twitter bootstrap and active admin. Looks like something getting conflicted.

Note here it works fine in staging on Heroku

Here is a snap of generated html

<li id="organization-selector" class="dropdown">
    <a href="/" data-toggle="dropdown" data-target="#organization-selector" class="dropdown-toggle">
      RedKivi
      <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
      <li>
        <a href="/organizations/1">RedKivi</a>
      </li>
      <li>
        <a href="/organizations/2">BoTree</a>
      </li>                  
      <li class="divider"></li>
      <li>
        <a href="/organizations/new">New organization</a>
      </li>
    </ul>
</li>

app/assets/stylesheets/application.css.scss

...
....
 *= require_self
 *= require jquery.ui.slider
 *= require_tree .

app/assets/javascripts/application.js

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

What are practices to precompiling assets ?

score 3 · Answer 1 · answered Dec 07 '13 at 23:23

Simply clean your assets folder:

rake assets:clean:all

Why does this happen?

Bootstrap's Dropdown breaks on development only because, your assets are being loaded twice. Once in the "precompiled" form and the second because of your development environment. This causes a conflict and the dropdown doesn't work anymore.

That's why it works on Heroku/Production normally, because only the precompiled assets are loaded.

score 0 · Answer 2 · answered Sep 21 '12 at 11:53

As I learn that normally you do not need to precompile assets locally. It is generally done in staging and production.

Actually in staging on Heroku, we are getting ActionView::Template::Error (active_admin.css isn't precompiled) error. So we precompiles assets locally, pushed to remote repo before deployment to Heroku to fix it. This was the workaround and the cause of the problem.

The solution is given this link. We have followed it and now we no longer need to precompile assets locally and keep in repo.

Twitter Bootstrap Dropdown broken after assets precompile

2 Answers2