Szyny 5 Wyszukiwanie na żywo z funkcją KeyUping traci ostrość wejścia Turbolinks

Question

Mam aplikację szynową 5.1.3, która jest podstawowym modelem kontaktu (przydatne nazwy i numery). Używam przeszukiwania do wyszukiwania w widoku/stronie indeksu. Używam coffeescript do odsłuchania zdarzenia keyup na wejściu i działa, uruchamianie w trakcie pisania (na logach dev rails), ale dane wejściowe w formularzu tracą fokus, a częściowe nie są odświeżane po kliknięciu z powrotem do put i typ. Myślę, że to jest kwestia Turbolinks, ale nie jestem pewien.

Oto mój kontroler: contacts_controller.rb fragment

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 

Oto mój widok indeksu 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> 

Tu jest mój js plik index.js .erb

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

Oto partials dla poszukiwaniu i wyników

<%= 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 %> 

Oto moja contacts.coffee plik

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

Oto fragment z development.log który pokazuje metodę, która jest uruchamiana, ale moja cząstka nie jest odświeżana. Wystrzeliwuje jedną literę i zatrzymuje się całkowicie, tracąc koncentrację na wprowadzaniu formy.

Czy brakuje mi tu czegoś, czy mój coffeescript jest zły?

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) 

Answer 1

To, co się faktycznie działo, to to, że JS wystrzeli, a moja forma wyszukiwania zostanie przeładowana. Więc zmieniłem to:

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

do tego:

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

i działa idealnie.