Проблемы с turbolinks с загрузочным модальным

Я делаю такой модальный вид:

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

<%= 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 работает не так, как ожидалось. Если я обновляю страницу, она работает нормально, но, когда я просматриваю страницы с turbolinks, выглядит так: data-no-turbolink просто игнорируется.

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

Спасибо заранее.

Ответы

Ответ 1

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

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

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

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

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

Ответ 2

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

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

Шаг 1: Добавьте gem jquery-turbolinks в свой Gemfile.

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

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

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