Rails 4 TurboLinks and jQuery Dynamic Links Not Playing Nice

Question

I am developing an application in Rails 4.0 and I'm having an issue with turbolinks not playing nice with some jQuery code I have. I have a Quote model that has a related QuoteItems model. I am using accepts_nested_attributes_for and some jQuery to populate the line items form.

When I click on a link bringing me to the new_quote_path, The dynamic link doesn't fire the javascript code. When I refresh the page, the form WORKS GREAT. I like turbolinks as it is super fast, but not sure how to get this to work in development. Here's some code.

in quotes.js.coffee

jQuery ->
  $('form').on 'click', '.remove_line_items', (event) ->
  $(this).prev('input[type=hidden]').val('1')
  $(this).closest('fieldset').hide()
  event.preventDefault()

$('form').on 'click', '.add_fields', (event) ->
  time = new Date().getTime()
  regexp = new RegExp($(this).data('id'), 'g')
  $(this).before($(this).data('fields').replace(regexp, time))
  event.preventDefault()

Quotes view new.html.erb

<%= form_for @quote, :class => "hello" do |f| %>
    <fieldset>
      <p>
        <%= f.label :quote_date, "Date of Quote" %>  <br/>
        <%= f.text_field :quote_date %>
      </p>

      <p>
        <%= f.label :good_through %> <br/>
        <%= f.text_field :good_through %>
      </p>

      <p>
        <%= f.label :quote_number %><br/>
        <%= f.text_field :quote_number %>
      </p>
      <p>
        <%= f.label :customer_id, "Customer" %><br/>
        <%= select(:quote, :customer_id, Customer.all.collect {|c| [ c.fname, c.id ] }, :prompt => "Select Customer") %>
      </p>

      <%= f.fields_for :quote_items do |builder| %>
          <%= render 'quote_item_fields', :f => builder %>
      <% end %>

      <%= link_to_add_fields "Add Line Item", f, :quote_items %>

      <p>
        <%= f.submit %>
      </p>
    </fieldset>
<% end %>

thomasstephn · Accepted Answer · 2013-08-06 07:14:56Z

16

I was having the same problem, if you want to keep turbolinks working and your dynamic jquery on, try this gem: jquery-turbolinks

Hope it helps

answered Aug 6, 2013 at 7:14

thomasstephn

3,8654 gold badges27 silver badges29 bronze badges

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

1 Comment

thomasstephn Over a year ago

@WiliantoIndrawan I can try: if you have bindings on your domain, Turbolinks will affect them: It's because the nodes on which you bind events no longer exist as turbolinks remove and replace. See the gem decription, it explains it quite well

Community · Accepted Answer · 2017-05-23 12:33:57Z

9

Some options:

1) turn off turbolinks - see http://blog.steveklabnik.com/posts/2013-06-25-removing-turbolinks-from-rails-4

2) use new page:load event that turbolinks fires - $(document).on('page:load', your_start_function);, see Rails Jquery doesn't work on other pages - guessing in your case it would be something like

$(document).on 'page:load' ->
  $('form').on 'click', '.remove_line_items', (event) ->
    $(this).prev('input[type=hidden]').val('1')
    $(this).closest('fieldset').hide()
    event.preventDefault()

edited May 23, 2017 at 12:33

CommunityBot

11 silver badge

answered Jun 30, 2013 at 4:52

house9

20.7k9 gold badges57 silver badges62 bronze badges

1 Comment

Christian Over a year ago

You should probably use $(document).on 'ready page:load', -> to ensure that the ready function is called on both hard refreshes and turbolink pages.

Ihor Khomiak · Accepted Answer · 2016-08-31 18:47:30Z

4

Maybe it will help:

$(document).on "turbolinks:load", ->
  $('#some_element_id').click ->
     alert "Clicked!"

answered Aug 31, 2016 at 18:47

Ihor Khomiak

1,18912 silver badges17 bronze badges

1 Comment

crisscross Over a year ago

Tried a lot of things (all above) and this finally worked. Thanks a lot.

Runthral · Accepted Answer · 2013-06-30 04:49:32Z

3

Turbo links uses AJAX which means any dynamically generated elements never get their ready events assigned (because the page isn't technically loading after the first load). Instead, you need to listen to the top DOM element body or document and then specify a selector for the dynamic element to listen to:

$('body').on('click', '.remove_line_items', function(e) { ... });

(More Details)

answered Jun 30, 2013 at 4:49

Runthral

4323 silver badges6 bronze badges

Collectives™ on Stack Overflow

Rails 4 TurboLinks and jQuery Dynamic Links Not Playing Nice

4 Answers 4

1 Comment

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related