Question

我有一个rails 5.1.3 app，它是一个基本的联系模式（方便的名字和数字）。我正在使用ransack搜索索引视图/页面。我正在使用coffeescript来监听输入上的键盘事件并且它正在工作，在我键入时触发（按照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)

Answer 1

实际发生的事情是JS会触发并且我的搜索表单部分将被重新加载。所以我改变了这个：

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

To This：

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

它完美无缺。

Rails 5实时搜索，Keyup丢失输入焦点Turbolinks

1 个答案: