Реализовать рельсы ajax search in rails 4.2.0

Question

Я хотел бы реализовать ajax-поиск для моего приложения rails. Так как я могу продолжить свой код.

Я хочу искать по описанию, уплаченной суммы и т.д.

Для лучшего понимания следуют изображения;

index.html.erb

<div class="row"> 

<div class="col-md-10 col-md-offset-1"> 

    <div class="table-responsive myTable"> 

     <table class="table listing text-center"> 
      <tr class="tr-head"> 
       <td>Date</td> 
       <td>Description</td> 
       <td>Amount</td> 
       <td>Discount</td> 
       <td>Paid</td> 
       <td>Balance</td> 
      </tr> 

      <tr> 
       <td></td> 
      </tr> 


      <a href="#" class="toggle-form" style="float: right;" >Search</a> 

      <div id="sample"> 

       <%= form_tag xvaziris_path, remote: true, method: 'get', class: "form-group", role: "search" do %> 
       <p> 
        <center><%= text_field_tag :search, params[:search], placeholder: "Search for.....", class: "form-control-search" %> 
         <%= submit_tag "Search", name: nil, class: "btn btn-md btn-primary" %></center> 
        </p> 
        <% end %><br> 

        <% if @xvaziris.empty? %> 

        <center><p><em>No results found.</em></p></center>    

        <% end %> 

       </div> 


        <%= render partial: "xvaziri", collection: @xvaziris %> 

       </table> 
      </div> 
     </div> 
    </div> 

_xvaziri.html.erb

<% balance = 0 %> 

<tr class="tr-<%= cycle('odd', 'even') %>"> 

    <td class="col-1"><%= xvaziri.date.strftime('%d/%m/%Y') %></td> 
    <td class="col-3"><%= span_with_possibly_red_color xvaziri.description %></td> 


    <td class="col-1"><%= number_with_precision(xvaziri.amount, :delimiter => ",", :precision => 2) %></td> 

    <td class="col-1 neg"><%= number_with_precision(xvaziri.discount, :delimiter => ",", :precision => 2) %></td> 

    <td class="col-1 neg"><%= number_with_precision(xvaziri.paid, :delimiter => ",", :precision => 2) %></td> 


    <% balance += xvaziri.amount.to_f - xvaziri.discount.to_f - xvaziri.paid.to_f %> 

    <% color = balance >= 0 ? "pos" : "neg" %> 

    <td class="col-1 <%= color %>"><%= number_with_precision(balance.abs, :delimiter => ",", :precision => 2) %></td> 

</tr> 

xvaziris_controller.rb

class XvazirisController < ApplicationController 

    before_action :set_xvaziri, only: [:show, :edit, :update, :destroy] 


    def index 
     @xvaziris = Xvaziri.where (["description LIKE ? OR amount LIKE ? OR paid LIKE ?", "%#{params[:search]}%","%#{params[:search]}%","%#{params[:search]}%"]) 
     respond_to do |format| 
      format.js 
      format.html 
     end 
    end 

    def import 
     Xvaziri.import(params[:file]) 
     redirect_to xvaziris_url, notice: "Xvaziris imported." 
    end 

    def show 
    end 

    def new 
     @xvaziri = Xvaziri.new 
    end 

    def create 
     @xvaziri = Xvaziri.new(xvaziri) 
     if 
      @xvaziri.save 
      flash[:notice] = 'Xvaziri Created' 
      redirect_to @xvaziri 
     else 
      render 'new' 
     end 
    end 

    def edit 
    end 

    def update 
     if @xvaziri.update(xvaziri) 
      flash[:notice] = 'Xvaziri Updated' 
      redirect_to @xvaziri 
     else 
      render 'edit' 
     end 

    end 

    def destroy 
     @xvaziri.destroy 
     flash[:notice] = 'Xvaziri was successfully destroyed.' 
     redirect_to xvaziris_url  
    end 

    private 
    # Use callbacks to share common setup or constraints between actions. 
    def set_xvaziri 
     @xvaziri = Xvaziri.find(params[:id]) 
    end 

    # Never trust parameters from the scary internet, only allow the white list through. 
    def xvaziri 
     params.require(:xvaziri).permit(:date, :description, :amount, :discount, :paid) 
    end 

end 

search.js

$(document).on('page:change', function() { 
    $("div#sample").hide(); 

    $("a.toggle-formed").click(function(event) { 
     event.preventDefault(); 
     $("div#sample").fadeToggle(); 
    }); 
}); 

index.js.erb

$(#which_id?).append("<%= j render xvaziri %>"); 

Как связать идентификатор, чтобы извлечь все данные из xvaziris # индексной страницы в формате JS?

Я добавил удаленный: правда, реагируют на format.js и т.д.

Любые предложения приветствуются.

Заранее спасибо.

Answer 1

Я пересмотрел свой index.html и index.js.erb, как показано ниже;

index.html.erb

<% @balance = 0 %> 


<div class="row"> 

    <div class="col-md-10 col-md-offset-1"> 

     <div class="table-responsive myTable"> 

      <table id = "kola" class="table listing text-center"> 
       <thead> 
        <tr class="tr-head"> 
         <td>Date</td> 
         <td>Description</td> 
         <td>Amount</td> 
         <td>Discount</td> 
         <td>Paid</td> 
         <td>Balance</td> 
        </tr> 
       </thead> 

       <a href="#" class="toggle-formed" style="float: right;" ><strong>Search</strong></a> 

       <div id="sample"> 

        <%= form_tag xvaziris_path, remote: true, method: :get, class: "form-group", role: "search" do %> 
        <p> 
         <center><%= text_field_tag :search, params[:search], placeholder: "Search for.....", autofocus: true, class: "form-control-search" %> 
          <%= submit_tag "Search", name: nil, class: "btn btn-md btn-primary" %></center> 
         </p> 
         <% end %><br> 
        </div> 


        <tbody>    
         <%= render @xvaziris %> 
        </tbody> 
       </table> 
      </div> 
     </div> 
    </div> 

index.js.erb

<% @balance = 0 %> 
$('#kola tbody').empty(); 
<% @xvaziris.each do |xvaziri| %> 
$('#kola tbody').append("<%= j render xvaziri %>"); 
<% end %>