问题
I doing a modal like this:
Link that shows the modal:
<%= link_to "versão resumida", resumed_rep_life_animal_path(animal, :partial => true), 'data-toggle' => 'modal', 'data-target' => '#myModal', 'data-no-turbolink' => true %>
Modal html itself:
<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>
But, the data-no-turbolink dont work as expected. If I refresh the page, it works ok, but, when I browse the pages with turbolinks, looks like the data-no-turbolink is just ignored.
Am I doing something wrong? I have some modals like the example in my app, don't want to remove them and dont want to remove turbolinks neither...
Thanks in advance.
回答1:
data-no-turbolinks is not the issue here...
It appears bootstrap js out of the box monitors only document.ready, and bootstrap JS may need modified to check for page:load as well
Look at line 222
This will only fire on the first request in which bootstrap is included. It needs modified to fire on page:load as well.
One suggestion I can make is to use gem 'twitter-bootstrap-turbo' for getting bootstrap. This is a fork of twitter-bootstrap-rails , with the addition of turbolinks handlers.
回答2:
As davydotcom said, the reason the modals aren't working is because they are bound to $(document).ready instead of $(document).on('page:change'), which is what turbolinks uses.
The jquery-turbolinks gem will make it so that ready calls will also respond to turbolink's page:change calls.
Step 1: Add gem jquery-turbolinks to your Gemfile.
Step 2: Add it to your JavaScript manifest file, in this order:
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//
// ... your other scripts here ...
//
//= require turbolinks
Step 3: Restart your server. Boom!
来源：https://stackoverflow.com/questions/12739800/turbolinks-issues-with-bootstrap-modal