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 ?

Answer 1

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.