Проблемы с использованием Foundation и Turbolinks с Rails 4

У меня есть заголовок с двумя кнопками: Войти и Зарегистрироваться Вот так. Когда я нажимаю на один из них, появляется окно: окно открыто. Для этого я использую «модальное отображение» фонда (модальное отображение).

Моя проблема: если я нажму на ссылку, чтобы открыть новую страницу моего веб-сайта, и попытаюсь открыть/закрыть всплывающее окно входа или регистрации, окно закроется, но на этот раз тень останется (вот так), и мне нужно нажать F5, чтобы это снова заработало.

Я использую Rails 4 и Foundation 5.

Файл _header.html.erb (частичный просмотр)

<div class="large-12 columns header">
  <div class="logo">
    logo
  </div>
  <div class="infos">
      <ul>
        <li><a href="#" class="" data-reveal-id="login">Login</a></li>
        <li><a href="#" class="" data-reveal-id="signup">Sign up</a></li>
      </ul>
  </div>
</div>

<div id="login" class="reveal-modal" data-reveal>
  <p>
    Page Test 
  </p>
</div>

<div id="signup" class="reveal-modal roundish" data-reveal>
  <p>
    Page Test 
  </p>
</div>

Файл application.js

//= require jquery
//= require turbolinks
//= require foundation
//= require bxslider/jquery.bxslider.min.js
//= require home
//= require_tree .

$(function() {
  $(document).foundation();
});

Спасибо за помощь.


ruby-on-rails javascript jquery turbolinks zurb-foundation
person Bibou    schedule 06.08.2014    source источник
comment
Turbolinks не очень хорошо работает с базовым файлом. Мое решение состояло в том, чтобы использовать jquery.turbolinks вместо turbolinks. Полное удаление турболинков сработает, если это действительно ваша проблема. У меня была аналогичная проблема с верхней панелью. stackoverflow .com/questions/21293051/   -  person Alex Aube    schedule 06.08.2014
comment
Спасибо @AlexAube. Ваш пост помог мне найти решение. Я только что переместил //= require turbolinks после $(document).foundation(); без установки jQuery Turbolink.   -  person Bibou    schedule 06.08.2014
comment
@AlexAube, значит, jquery.turbolinks фактически заменяет турбоссылки?   -  person Ben    schedule 06.12.2014

Ответы (2)


arrow_upward
7
arrow_downward

Это работает для панели прогресса turbolinks и вкладок основания, аккордеона

//= require jquery
//= require jquery_ujs
//= require foundation
//= require turbolinks
//= require_tree .

var ready;
ready = function() {
  $(document).foundation();
};
$(document).ready(ready);
$(document).on('page:load', ready);
person Murtza    schedule 09.12.2014
comment
Еще одно предостережение: этот код нужно поместить внутри <body> - person Dex; 13.07.2016

arrow_upward
-3
arrow_downward

Проблема была в Турболинках.

Решение: поставьте //= require turbolinks в конце

//= require jquery
//= require bxslider/jquery.bxslider.min.js
//= require foundation
//= require home
//= require_tree .

$(document).foundation();

//= require turbolinks

Спасибо @AlexAube за вашу помощь! :)

person Bibou    schedule 06.08.2014
comment
Это исправление вводит в заблуждение. Это работает, эффективно отключая турбоссылки, потому что звездочки должны быть в верхней части файла, а турбоссылки require в конечном итоге игнорируются. Хотя я лично согласен с тем, что удаление турбоссылок, вероятно, является правильным ответом ... что-то вроде того, что предлагает @Murtza (подключение к загрузке страницы турбоссылок для повторного вызова основания), будет более правильным ответом здесь . - person numbers1311407; 22.12.2014