Подтвердить что ты не робот

Rails 5 Live Search с Keyup потерять входной фокус Turbolinks

У меня есть приложение rails 5.1.3, в котором используется базовая модель контактов (удобные имена и номера). Я использую ransack для поиска на индексном представлении/странице. Я использую coffeescript для прослушивания события keyup на входе, и он работает, стреляя, когда я печатаю (в журналах rails dev), но вход в форму теряет фокус, а частичный не продолжает обновляться, когда я нажимаю обратно в put и type. Я думаю, что это проблема Turbolinks, но я не уверен.

Вот мой контроллер: contacts_controller.rb выдержка

class ContactsController < ApplicationController

  def index
    @q = Contact.ransack(params[:q])
    @contacts = @q.result(distinct: true).order("name asc").paginate(:page => params[:page], :per_page => 2)
    respond_to do |format|
      format.html
      format.js  {render "index", :locals => {:contacts => @contacts}}
    end
  end
end

Вот мой индексный индекс index.html.erb

 <%= link_to "New Contact", '#contact-modal', data: {toggle: "modal", target: "#contact-modal" }, class: 'btn btn-info btn-sm'  %>
<%= render 'shared/contact_modal' %>
<div id="search">
  <%= render 'contacts/search' %>
</div>

<div id="results">
  <%= render 'contacts/results', contacts: @contacts %>
</div>

Вот мой js файл index.js.erb

$("#search").html("<%=j render :partial => 'contacts/search' %>")
$("#results").html("<%=j render :partial => 'contacts/results', locals: {contacts: @contacts} %>")

Вот частичные для поиска и результаты

 <%= search_form_for(@q, url: "/contacts", method: :get, id: "contacts_search", remote: true) do |f| %>
  <%= f.search_field :name_or_address_or_office_number_or_home_number_or_mobile_number_or_fax_number_or_email_or_misc_info_cont, placeholder: 'Search...', class: 'form-control' %>
  <%= f.submit %>
<% end %>



 <table class="table table-striped">
  <thead class="thead-default">
    <tr>
      <th>Name</th>
      <th>Company Name</th>
      <th>Office Number</th>
      <th>Mobile Number</th>
      <th>Home Number</th>
      <th>Address</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <% contacts.each do |contact| %>
    <tr>
      <td><%= link_to "#{contact.name}", contact_path(contact) %></td>
      <td><%= contact.company_name %>
      <td><%= contact.office_number %></td>
      <td><%= contact.mobile_number %></td>
      <td><%= contact.home_number %></td>
      <td><%= contact.address %></td>
      <td><%= contact.email %></td>
    </tr>
    <% end %>
  </tbody>
</table>
<%= will_paginate contacts, renderer: WillPaginate::ActionView::BootstrapLinkRenderer %>

Вот мой файл contacts.coffee

$(document).on 'turbolinks:load', ->
  $('#contacts_search input').keyup ->
    $.get $('#contacts_search').attr('action'), $('#contacts_search').serialize(), null, 'script'
    false

Вот выдержка из development.log, которая показывает уволенный метод, но моя частичная не освежает. Он запускает одну букву и полностью останавливается, не обращая внимания на ввод формы.

Я что-то упустил или неправильно сделал мой кофейник?

 Started GET "/contacts?utf8=%E2%9C%93&q%5Bname_or_address_or_office_number_or_home_number_or_mobile_number_or_fax_number_or_email_or_misc_info_cont%5D=a&_=1504386143674" for 127.0.0.1 at 2017-09-02 16:02:25 -0500
Processing by ContactsController#index as JS
  Parameters: {"utf8"=>"✓", "q"=>{"name_or_address_or_office_number_or_home_number_or_mobile_number_or_fax_number_or_email_or_misc_info_cont"=>"a"}, "_"=>"1504386143674"}
  User Load (0.3ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = $1 ORDER BY "users"."id" ASC LIMIT $2  [["id", 7], ["LIMIT", 1]]
  Role Load (0.1ms)  SELECT  "roles".* FROM "roles" WHERE "roles"."name" = $1 LIMIT $2  [["name", "disabled"], ["LIMIT", 1]]
  Role Load (0.1ms)  SELECT  "roles".* FROM "roles" WHERE "roles"."id" = $1 LIMIT $2  [["id", 1], ["LIMIT", 1]]
  CACHE Role Load (0.0ms)  SELECT  "roles".* FROM "roles" WHERE "roles"."name" = $1 LIMIT $2  [["name", "disabled"], ["LIMIT", 1]]
  Rendering contacts/index.js.erb
  Rendered contacts/_search.html.erb (1.4ms)
  Contact Load (0.7ms)  SELECT  DISTINCT "contacts".* FROM "contacts" WHERE ((((((("contacts"."name" ILIKE '%a%' OR "contacts"."address" ILIKE '%a%') OR "contacts"."office_number" ILIKE '%a%') OR "contacts"."home_number" ILIKE '%a%') OR "contacts"."mobile_number" ILIKE '%a%') OR "contacts"."fax_number" ILIKE '%a%') OR "contacts"."email" ILIKE '%a%') OR "contacts"."misc_info" ILIKE '%a%') ORDER BY name asc LIMIT $1 OFFSET $2  [["LIMIT", 2], ["OFFSET", 0]]
   (0.3ms)  SELECT COUNT(DISTINCT "contacts"."id") FROM "contacts" WHERE ((((((("contacts"."name" ILIKE '%a%' OR "contacts"."address" ILIKE '%a%') OR "contacts"."office_number" ILIKE '%a%') OR "contacts"."home_number" ILIKE '%a%') OR "contacts"."mobile_number" ILIKE '%a%') OR "contacts"."fax_number" ILIKE '%a%') OR "contacts"."email" ILIKE '%a%') OR "contacts"."misc_info" ILIKE '%a%')
  Rendered contacts/_results.html.erb (3.7ms)
  Rendered contacts/index.js.erb (9.6ms)
Completed 200 OK in 32ms (Views: 25.8ms | ActiveRecord: 1.6ms)
4b9b3361

Ответ 1

Что на самом деле происходило, так это то, что JS будет срабатывать, а часть моего поиска будет перезагружена. Поэтому я изменил это:

$("#search").html("<%=j render :partial => 'contacts/search' %>")
$("#results").html("<%=j render :partial => 'contacts/results', locals: {contacts: @contacts} %>")

К этому:

$("#results").html("<%=j render :partial => 'contacts/results', locals: {contacts: @contacts} %>")

И он отлично работает.