Rails 4, Turbolink execute javascript after render a partial

Question

I have a form configured with some javascript. The javascript is loaded on load event handled by Turbolink:

//app/assets/javascripts/init.js
var ready = function () {
    App.init(); //I configure some components of _form.html.erb partial
};
$(document).ready(ready);
$(document).on('page:load', ready);

If I render a partial the App.init() code is not execute and my application is not well configured.

//new.js.erb
$("#my-modal").html("<%= j( render 'form') %>");
$("#my-modal").modal("show"); //The partial is inside a modal

Can I execute the code after the partial is rendered? Something like this:

$(document).on('partial:render', ready); //Concept

In need to execute the js code after the partial is render becouse I need to configure some Jquery plugin to customize the modal form.

The modal is a classic Twitter Bootstrap modal:

//_form.html.erb
<div class="modal-dialog" role="document">
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
      <div class="row">
        <div class="col-sm-offset-3 col-sm-9">
          <h3 class="modal-title" id="myModalLabel">new</h3>
        </div>
      </div>
    </div>

    <%= simple_form_for(...) do |f| %>
        <div class="modal-body">
          <ul class="errors"></ul>
          <%= f.error_notification %>

          <%= render "companies/fields", f: f %>
          ...
          ...
        </div>
    <% end %>
  </div>
</div>

have you tried "page:change" instead of "page:load"

bkunzi01
– bkunzi01

2016-04-29 21:19:45 +00:00
Commented Apr 29, 2016 at 21:19 — bkunzi01
– bkunzi01, Commented Apr 29, 2016 at 21:19
Yes, see the comment in the next answer

user1066183
– user1066183

2016-04-30 09:19:41 +00:00
Commented Apr 30, 2016 at 9:19 — user1066183
– user1066183, Commented Apr 30, 2016 at 9:19

bkunzi01 · Accepted Answer · 2016-04-29 21:24:26Z

2

Try:

$(document).on('page:change', function () {
  // Actions to do
});

In your case simpley replacing the 'page:load' line in your js call with:

$(document).on('page:change', ready);

answered Apr 29, 2016 at 21:24

bkunzi01

4,5811 gold badge20 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user1066183 Over a year ago

I can not use your solution becouse the event change is triggered every time a page change, but I want to execute App.init() only when a partial is rendered

bkunzi01 Over a year ago

Are you opposed to adding the App.init js call inside the partial view?

Collectives™ on Stack Overflow

Rails 4, Turbolink execute javascript after render a partial

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related