Rails検索フォームはリロード後にのみ表示されます

Question

Slidesビューの検索フォームにdivのAnagraphicモデルの動的結果が表示されます。問題は、伝票インデックスページが最初に読み込まれたとき、検索は動的には機能していないが、検索ボタンを押した後でなければならないということである。ページをリロードした後、検索フィールドに文字を入力すると検索結果が動的に表示され、検索は正常に動作します。私は私の伝票インデックスビューで

def index 

    @visibleanagraphics = Anagraphic.where("laundryowner_id = ?", current_owner.id) 
    @anagraphics = @visibleanagraphics.search(params[:search]) 

    respond_to do |format| 
    format.js 
    format.html 
    end 

end 

：

<%= form_tag '/slips', :method => 'get', :id => "anagraphics_search" do %> 
    <%= text_field_tag :search, params[:search], :autocomplete => :off %> 
    <%= submit_tag "°", :description => nil, class:"btn btn-primary btn-sm" %> 

    <div id="anagraphics"> 
    <%= render "anagraphics" %> 
    </div> 

結果がで表示され

は、これが私のSlipsControllerです。これは私のAnagraphicモデル

def self.search(search) 
if search 
    where('description LIKE :search OR code LIKE :search ', search: "%#{search}%") 
else 
    all.limit(2) 
end 
end 

されますこの部分的：

<table class="table table-striped table-bordered"> 
    <thead> 
     <tr> 
      <th>Codice</th> 
      <th>Descrizione</th> 
      <th>Cliente</th> 
      <th colspan="1"></th> 
     </tr> 
    </thead> 
    <tbody> 
     <% @anagraphics.each do |anagraphic| %> 
     <tr> 
      <td><%= anagraphic.code %></td> 
      <td><%= anagraphic.description %></td> 
      <td><%= anagraphic.customer %></td> 
      <td><%= link_to 'crea cedolino', {controller: 'slips', action: 'new', aid: anagraphic.id}, class: "btn btn-primary btn-sm" %></td> 
     </tr> 
     <% end %> 
    </tbody> 
</table> 

これはjavascriptのコードslips.js

$(document).ready(function() { 
    $("#anagraphics_search input").keyup(function() { 
    $.get($("#anagraphics_search").attr("action"), $("#anagraphics_search").serialize(), null, "script"); 
    return false; 
    }); 
}); 

そして最後に、私のindex.js.erbです：あなたはturbolinksが有効になっているので、それがかもしれ

$("#anagraphics").html("<%= escape_javascript(render("anagraphics")) %>") 

Answer 1

。これはあなたのjQueryの$(document).ready(function() {...})呼び出しに影響します。なぜならターボリンクは基本的にページをキャッシュし、リフレッシュするときにページ全体をリロードするだけなので、の後にのように動作します。

この問題を解決することを目的としたgem jquery.turbolinksを試してみることをお勧めします。次のリンクであなたのアプリでそれを含める方法を参照してください：

https://github.com/kossnocorp/jquery.turbolinks

Answer 2

おそらくあなたはturbolinksすることによって、このエラーが発生しています。代わりにこれを試してくださいready

$(document).on('turbolinks:load', function() { 
    $("#anagraphics_search input").keyup(function() { 
    $.get($("#anagraphics_search").attr("action"), $("#anagraphics_search").serialize(), null, "script"); 
    return false; 
    }); 
});