Rails: Bootstrap и выпадающий не работает

8

В моем приложении application.html.erb у меня есть следующее:

<head>
  <title><%= title %></title>
  <%= stylesheet_link_tag "application", media: 'all' %>
  <%= javascript_include_tag "application" %>
  <%= javascript_include_tag "https://js.stripe.com/v1/", "application" %>
  <%= csrf_meta_tags %>
  <%= tag :meta, :name => "stripe-key", :content => STRIPE_PUBLIC_KEY %>
  <%= javascript_include_tag "http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js", "application" %>
  <%= render 'layouts/shim' %>
</head>

В моем gemfile у меня есть следующее:

gem 'twitter-bootstrap-rails'
gem 'bootstrap-datepicker-rails'

В моих представлениях \layouts_header.html.erb у меня есть:

  <li class="dropdown" id="admin_menu">
    <a class="dropdown-toggle" data-toggle="dropdown" data-target="#admin_menu">
      <%= ADMIN_TITLE %>
      <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
      <% Admin_menu.each do |menu_text, menu_action| %>
          <li><a href="<%= menu_action %>"><%= menu_text %></a></li>
      <% end %>
    </ul>
  </li>

Admin_menu определяется в другом месте как:   Admin_menu = Hash.new   Admin_menu [ "Papers" ] = "/papers"   Admin_menu [ "Треки" ] = "/tracks"   Admin_menu [ "Посещаемость" ] = "/посещаемость"

Когда я нажимаю на каретку, ничего не происходит. Я проверил код HTML и выпадающий список меню.

Любые идеи?

  • 0
    Есть ли какие-либо ошибки Javascript, возникающие при нажатии в раскрывающемся меню (или до этого, например, при загрузке страницы)? Кроме того, есть ли причина, по которой вы включаете файл application.js три раза? На него ссылаются все ваши вызовы javascript_include_tag - он нужен вам только один раз. Я уверен, что это не будет причиной этой проблемы, но это не помешает исправить.
  • 0
    Да, ты прав. Я вычистил application.js включает. Я не вижу никаких ошибок JavaScript. Каретка меняет цвет с серого на черный, когда я нахожу ее, но ничего не происходит. При наведении курсора на меню администратора селектор также не меняется на руку.
Показать ещё 4 комментария
Теги:

2 ответа

13
Лучший ответ

Вам нужно изменить следующие строки:

<%= javascript_include_tag "application" %>
<%= javascript_include_tag "https://js.stripe.com/v1/", "application" %>
<%= javascript_include_tag "http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js", "application" %>

:

<%= javascript_include_tag "https://js.stripe.com/v1/" %>
<%= javascript_include_tag "application" %>

Ваш текущий код включает application.js много раз, что является проблемой для выпадающего кода Bootstrap. Готов поспорить, если вы посмотрите в файл application.js, вы увидите это в верхней части:

//= require bootstrap

Это означало бы, что вы загружаете bootstrap один раз каждый раз, когда вы включаете application.js, а затем снова из github.

Если вы прочитали JS-код Bootstrap Dropdown, вы увидите, что он добавляет прослушиватель кликов для переключения выпадающего меню. Если вы дважды запускаете этот код, вы добавляете двух кликов. Поэтому при каждом нажатии эти два слушателя открывают меню и внезапно закрывают его снова.

У меня была проблема, похожая на вашу, где я не заметил, что мой javascript_include_tag для Stripe также повторно включал application. Думаю, мы, вероятно, копируем/вставляем с того же места!

Поделиться
  • 0
    Спасибо. Это сработало!
  • 1
    Это включало и JavaScript дважды для меня. После долгих царапин я также обнаружил javascript_include_tag в нижней части макета приложения.
Показать ещё 3 комментария
0

Используйте Firebug или chrome extension для проверки html в браузере. Если это неверно, попробуйте использовать помощник, чтобы избежать беспорядка со строками:

<li><%= link_to menu_text, menu_action %></li>

Поделиться
  • 0
    В моем вопросе я упомянул, что HTML-код в порядке, и есть выпадающее меню.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню