Question

我尝试使用Ajax构建我的搜索，并且在控制器中添加了remote：true和respond_ to block，我创建了部分_xvaziri.html.erb，最后创建了index.js.erb。

但是我没有得到Ajax搜索的预期结果。

请参考下图所示的图像;

在上面的图片中，当我搜索＆＃34;现金＆＃34;然后我在终端上多次渲染。

index.html.erb

<% @balance = 0 %>


     <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.....", autofocus: true, class: "form-control-search" %>
                        <%= submit_tag "Search", name: nil, class: "btn btn-md btn-primary" %></center>
                    </p>
                    <% end %><br>
  </div>
                        <% if @xvaziris.empty? %>

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

                        <% end %>

                        <%= render @xvaziris %>

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

_xvaziri.html.erb

<tr  id = "kola" 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

index.js.erb的

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

如何编写上述代码以便在xvaziris #index？

中查找搜索

其次，我想显示搜索结果为空，空白或空时未找到的结果。我写了下面的代码，但它不起作用。

<% if @xvaziris.empty? %>

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

 <% end %>

欢迎任何建议。

提前谢谢。

Answer 1

我修改了我的index.html和index.js.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 %>

有关ajax搜索栏

1 个答案: