turbolinks issues with bootstrap modal

Question

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.

Answer 1

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!