Muhammad Yaseen Muhammad Yaseen - 4 months ago 8
Ajax Question

Issue regarding ajax search rails

I tried to built my search with Ajax and I have added remote: true , and respond_ to block in the controller and I created the partial _xvaziri.html.erb and finally index.js.erb.

But I am not getting the desired results for the Ajax search.

Please refer the images as shown below;

screenshot.png

In the above image when I searched for "cash" then I get rendering multiple times in the terminal.

screenshot2.png

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


How should I write the above code in order to find searches in xvaziris#index ?

Secondly, I want to display the no results found when search is nil,blank or empty.I wrote the below code but it is not working.

<% if @xvaziris.empty? %>

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

<% end %>


Any suggestions are most welcome.

Thank you in advance.

Answer

I revised my index.html and index.js.erb as below;

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