Проблемы с TurboLinks при начальной загрузке

Question

Я делаю модальное как это:

Ссылка, которая показывает модал:

<%= link_to "versão resumida", resumed_rep_life_animal_path(animal, :partial => true), 'data-toggle' => 'modal', 'data-target' => '#myModal', 'data-no-turbolink' => true %>

Сам модальный html:

<div class="modal hide fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-body"></div>
  <div class="modal-footer">
    <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">Fechar</button>
  </div>
</div>

Но data-no-turbolink не работает, как ожидалось. Если я обновляю страницу, она работает нормально, но, когда я просматриваю страницы с турболинками, выглядит как data-no-turbolink просто игнорируется.

Я делаю что-то неправильно? У меня есть некоторые модалы, такие как пример в моем приложении, я не хочу их удалять и не хочу удалять турболинки тоже...

Заранее спасибо.

Answer 1

data-no-turbolinks не проблема здесь...

Похоже, что при начальной загрузке js из коробки отслеживается только document.ready, и при начальной загрузке JS может потребоваться изменение для проверки страницы: загрузка также

Посмотрите на строку 222

Это сработает только при первом запросе, в который включен загрузчик. Он должен быть модифицирован для стрельбы на странице: загрузить также.

Одно из предложений, которое я могу сделать, - использовать gem 'twitter-bootstrap-turbo' для получения начальной загрузки. Это форк твиттер-бутстрап-рельсов с добавлением обработчиков турболинков.

Answer 2

Как сказал davydotcom, причина, по которой модалы не работают, заключается в том, что они связаны с $(document).ready вместо $(document).on('page:change'), который использует turbolinks.

Драгоценный камень jquery-turbolinks сделает так, чтобы готовые вызовы также отвечали на страницу turbolink: вызовы change.

Шаг 1: Добавьте драгоценный камень jquery-turbolinks в ваш Gemfile.

Шаг 2. Добавьте его в файл манифеста JavaScript в следующем порядке:

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//
// ... your other scripts here ...
//
//= require turbolinks

Шаг 3: Перезагрузите сервер. Boom!