Rails 4 TurboLinks и динамические ссылки jQuery не работают хорошо

Я разрабатываю приложение в Rails 4.0, и у меня возникла проблема с турбоссылками, которые плохо работают с некоторым кодом jQuery, который у меня есть. У меня есть модель Quote, которая имеет связанную модель QuoteItems. Я использую accepts_nested_attributes_for и некоторый jQuery для заполнения формы позиций.

Когда я нажимаю на ссылку, ведущую к new_quote_path, динамическая ссылка не запускает код javascript. Когда я обновляю страницу, форма ОТЛИЧНО РАБОТАЕТ. Мне нравятся турболинки, так как они очень быстрые, но не знаю, как заставить их работать в разработке. Вот код.

в цитатах.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()

Просмотр котировок 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 %>

ruby-on-rails jquery turbolinks
person ctilley79    schedule 30.06.2013    source источник

Ответы (4)


arrow_upward
16
arrow_downward

У меня была та же проблема, если вы хотите, чтобы турбоссылки работали и ваш динамический jquery был включен, попробуйте этот гем: jquery -турболинки

Надеюсь, поможет

person thomasstephn    schedule 06.08.2013
comment
@WiliantoIndrawan Я могу попробовать: если у вас есть привязки в вашем домене, турбоссылки повлияют на них: это потому, что узлы, на которых вы привязываете события, больше не существуют, поскольку турбоссылки удаляются и заменяются. См. описание драгоценного камня, оно объясняет это довольно хорошо. - person thomasstephn; 14.12.2015

arrow_upward
9
arrow_downward

Некоторые варианты:

1) отключить турболинки - см. http://blog.steveklabnik.com/posts/2013-06-25-removing-turbolinks-from-rails-4

2) используйте новое событие page:load, которое запускает турбоссылки - $(document).on('page:load', your_start_function);, см. Rails Jquery не работает на других страницах - предположим, что в вашем случае это будет что-то вроде

$(document).on 'page:load' ->
  $('form').on 'click', '.remove_line_items', (event) ->
    $(this).prev('input[type=hidden]').val('1')
    $(this).closest('fieldset').hide()
    event.preventDefault()
person house9    schedule 30.06.2013
comment
Вам, вероятно, следует использовать $(document).on 'ready page:load', ->, чтобы убедиться, что функция готовности вызывается как на жестких обновлениях, так и на страницах с турбоссылкой. - person Christian; 14.03.2014

arrow_upward
4
arrow_downward

Может поможет:

$(document).on "turbolinks:load", ->
  $('#some_element_id').click ->
     alert "Clicked!"
person Ihor Khomiak    schedule 31.08.2016
comment
Пробовал много вещей (все вышеперечисленное), и это, наконец, сработало. Большое спасибо. - person crisscross; 23.09.2016

arrow_upward
3
arrow_downward

В турбо-ссылках используется AJAX, что означает, что любые динамически генерируемые элементы никогда не получают назначенных им событий готовности (поскольку страница технически не загружается после первой загрузки). Вместо этого вам нужно прослушивать верхний элемент DOM body или document, а затем указать селектор для прослушивания динамического элемента:

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

(Подробнее Подробности)

person Runthral    schedule 30.06.2013