Why does dropdown-toggle (bootstrap) not work on heroku?

Question

I do not understand why the following piece of code in my view (title bar) does not work on heroku.

It seems to work fine on both development and production on my local server. Once i push to heroku, the html generated is also good. All other bootstrap elements seem to work. However, this dropdown link does not seem to work

    <% if current_user.present? %>


                <div id = "account" class=" dropdown">

                        <a href='#' class="dropdown-toggle" data-toggle="dropdown">
                            <span>Account</span> <b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu pull-right">
                            <li><%= link_to "Profile", current_user %></li>
                            <li><%= link_to "Settings", edit_user_path(current_user) %></li>
                            <li class="divider"></li>
                            <li>
                                <%= link_to "Sign out", signout_path, method: "delete" %>
                            </li>
                        </ul>

                </div>
                <% end %>

The HTML generated:

                <div id = "account" class=" dropdown">

                        <a href='#' class="dropdown-toggle" data-toggle="dropdown">
                            <span>Account</span> <b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu pull-right">
                            <li><a href="/users/1">Profile</a></li>
                            <li><a href="/users/1/edit">Settings</a></li>
                            <li class="divider"></li>
                            <li>
                                <a href="/signout" data-method="delete" rel="nofollow">Sign out</a>
                            </li>
                        </ul>

                </div>

                </div>

my app/assets/stylesheets/application.css

 * = require custom

my app/assets/stylesheets/custom.css.scss

@import "bootstrap";

I am pretty new to heroku. So i am not aware of how to debug such an error. How can this be sorted out how i can debug such an error?

score 2 · Accepted Answer · answered Dec 12 '13 at 04:06

Some strange bug in rails: my application.js was initially:

//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require bootstrap

I had to reorder it and move bootstrap ahead of jquery

Modified application.js

//= require bootstrap
//= require jquery
//= require jquery_ujs
//= require jquery-ui

And then I had to run

heroku run rake assets:reset
heroku run rake assets:precompile

Now it works

score 1 · Answer 2 · answered Oct 26 '14 at 03:52

1

Well, I had the same problem. The dropdown worked on local but not on Heroku.

I had tried to reorder the //=jquery and //=bootstrap and reorder back again and again. I also ran asset precompile method. However, it still didn't work in my situation.

Then I compared an app I wrote before, and I found that there might be the conflict between 'bootstrap' and 'bootstrap-spockets'. The dropdown menu worked if either of them were removed. So I removed 'bootstrap' finally. I am not sure if it will cause any further problems but so far it's fine.

answered Oct 26 '14 at 03:52

lawrencesun

11
1

This is the correct answer. Remove bootstrap and leave bootstrap-sprockets. See the https://github.com/twbs/bootstrap-sass#a-ruby-on-rails toward the bottom of that part of the chapter about ruby on rails. It refers to this issue on bootstrap-sass: https://github.com/twbs/bootstrap-sass/issues/829#issuecomment-75153827 – Ole Henrik Skogstrøm Feb 20 '16 at 20:56
Also there is not problem doing this, because `//= require bootstrap` loads in a combined version of all the javascript, while `//= require bootstrap-sprockets` does the same thing but loads in the individual files. In production this does not matter since everything is compiled into one file anyway. So this bug is caused by Bootstrap javascript being included twice. – Ole Henrik Skogstrøm Feb 20 '16 at 20:59

score 0 · Answer 3 · answered Dec 09 '13 at 07:25

0

Make sure to precompile your assets

heroku run rake assets:precompile

answered Dec 09 '13 at 07:25

Rajdeep Singh

17,621
6
53
78

1

i tried it now, and then ran the "heroku restart --a app_name" just in case. It still seems to not work. Is there anything else that i need to do? – Venomoustoad Dec 09 '13 at 07:48

Jon · Answer 4 · 2015-10-08T16:05:15.937

0

you can add to your file application.js :

//= require bootstrap/dropdown

So, your file would be :

//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require bootstrap
//= require bootstrap/dropdown

edited Oct 08 '15 at 16:05

answered Oct 06 '15 at 17:56

Jon

55
8

Why does dropdown-toggle (bootstrap) not work on heroku?

4 Answers4

Linked