0

This seems so simple, yet I can't figure it out. For some reason, clicking on the dropdown menu is not working, yet everything else in twitter bootstrap is. I'm using ruby on rails. I've already looked at stackoverflow questions that say to simply wrap the whole ul in a div with class "drop down-menu", but that shouldn't be necessary. I should be able to do it inside the ul tag. Any ideas? Thank you.

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

That is the main code where I believe the problem is. It might be somewhere below (same as above but with less taken out) but i doubt it:

    <ul class="nav pull-right">
      <li><%= link_to "Home", root_path %></li>
      <li><%= link_to "Help", help_path %></li>
      <% if signed_in? %>
        <li><%= link_to "Users", '#' %></li>
        <li id="fat-menu" class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            Account <b class="caret"></b>
          </a>
          <ul class="dropdown-menu">
            <li><%= link_to "Profile", current_user %></li>
            <li><%=link_to "Settings", '#' %></li>
            <li class="divider"></li>
            <li>
              <%= link_to "Sign out", signout_path, method: "delete" %>
            </li>
          </ul>
        </li>
        <%= "Technically signed in.  should be true.  It is: " + signed_in?.to_s %>

      <% else %>
        <%= "Technically not signed in.  should be false.  It is: " + signed_in?.to_s %>
        <li><%= link_to "Sign in", signin_path %></li>
      <% end %>
    </ul>

Here is the application.js file

//= require bootstrap
//= require bootstrap-dropdown
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
Philip7899
  • 4,599
  • 4
  • 55
  • 114
  • I had this same problem the other day with the navbar's dropdown menu. It worked when I moved "//= require twitter/bootstrap" to be the first one required in Application.js. But then it didn't work in production =(, had to put that line back where it was for it to work in development. – Ghar Sep 24 '13 at 23:34
  • is your
    • – Raghu Sep 24 '13 at 23:37
  • Also may be a possible duplicate of http://stackoverflow.com/questions/14885684/twitter-bootstrap-dropdown-in-rails-3 – Raghu Sep 24 '13 at 23:38
  • Still not working. Ghar, I tried that but its not working. Raghu, it is wrapped under a
      and that is a different question.
     – Philip7899 Sep 25 '13 at 00:49
  • Can you show a little more of your code? Maybe start w/ the
      preceding the
    – Helios de Guerra Sep 25 '13 at 01:50
  • Helios, just added all the code. thanks. – Philip7899 Sep 25 '13 at 01:53
  • Your HTML seems fine. I would guess it's something related to the dropdown JavaScript not being included properly. – Marcelo De Polli Sep 25 '13 at 01:55
  • I added the application.js file above – Philip7899 Sep 25 '13 at 01:58
  • I agree, html looks fine... Are you attaching any other behaviors to the
  • ?
    • – Helios de Guerra Sep 25 '13 at 02:00
  • I haven't added any behaviors. – Philip7899 Sep 25 '13 at 02:01
  • If you type the following in the javascript console, does it return true? `(typeof $().dropdown == 'function');` – Helios de Guerra Sep 25 '13 at 02:02
  • I have never used the js console before. I have no idea how to do that. – Philip7899 Sep 25 '13 at 02:04
  • Are you using chrome? Go to the settings button, Tools -> Javascript Console... Then just copy and paste the code in the console area... – Helios de Guerra Sep 25 '13 at 02:08
  • Also, I know Turbolinks has caused some issues with Javascripts in the past... you might try to remove Turbolinks temporarily or see if a gem like the one here solves your problem: [jquery-turbolinks](https://github.com/kossnocorp/jquery.turbolinks) – Helios de Guerra Sep 25 '13 at 02:13
  • It returns: TypeError: Cannot read property 'dropdown' of null – Philip7899 Sep 25 '13 at 02:17
  • Removing Turbolinks does not fix it. – Philip7899 Sep 25 '13 at 02:18
  • Hmm, that TypeError indicates that jQuery isn't loading... Can you move your require jQuery to the top of application.js – Helios de Guerra Sep 25 '13 at 02:24
  • Hmm, tried it but it still isn't working. – Philip7899 Sep 25 '13 at 02:32
  • Does anyone have any ideas? – Philip7899 Sep 26 '13 at 19:10