Rails 4: Partial can't use javascript after being rendered (with ajax)

Question

I'm doing an Ajax request with CoffeeScript and then rendering a partial from my controller, but then after that the partial has been rendered it can't use the Javascript I had previously.

Example:

At the end my action of my home_controller I have:

respond_to do |format|
   format.html { render partial: 'frame' }
end

In my home.js.coffee:

$('#plouf').click -> 
  alert('test')

Then in my partial _frame.html.erb (in the home folder of the views folder)

<span id="plouf">test<span>

If I click on this span, nothing happens...

<%= javascript_include_tag "application", "data-turbolinks-track" => true %>

But if I add this line in my partial it works, but I know it's ugly since I already did it in my application.html.erb

Am I missing something, or is it normal that partial can't use any previous Javascript?

OneChillDude · Accepted Answer · 2014-06-12 07:49:16Z

9

Partials are compiled into the view before javascript is run by the browser.

What you need is

$(document).on 'click', '#plouf', ->
  alert('test')

This binds the event to the document, so when turbolinks or ajax reloads the HTML, your event handler is still active.

edited Jun 12, 2014 at 7:49

answered Mar 27, 2014 at 3:41

OneChillDude

8,04610 gold badges43 silver badges81 bronze badges

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

4 Comments

Romain Over a year ago

Thanks! I understand better now, but I had to rewrite as: $(document).on('click', '#plouf', ( -> alert('test')))

d_rail Over a year ago

Please fix the commas, should be: $(document).on 'click', '#plouf', ->

OneChillDude Over a year ago

@d_rail better? You can always suggest an edit too :)

Mayuresh Srivastava Over a year ago

what if I want to apply some js on render, not on particular event like click or change e.g. some datatable property.

Collectives™ on Stack Overflow

Rails 4: Partial can't use javascript after being rendered (with ajax)

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related