jquery - Getting Duplicate records when returning search results with Ajax Rails

Question

I have an app that has several invoices and users can search for specific invoices. I'm using Ajax so that users can make a search query.

The issue is when a user searches for invoice no."7289" it found the records but duplicate records.

Here's an screenshot as below;

Here's the code as below;

index.js.erb

$('#kola tbody').empty();

<% if @shippingdetails.empty? %>
$('#kola tr').remove();
$('#kola tbody').append("No Results Found For Your Search...");
$("#kola tbody").css({"background-color": "white", "font-size": "100%", "font-weight": "900"}); 
<% else %>
<% @shippingdetails.each do |shippingdetail| %>
$('#kola tbody').append("<%= j render shippingdetail %>");
<% end %>
<% end %>

index.html.erb

<div class="row">
    <div class="col-md-5 col-md-offset-3">

        <div class="table-responsive myTable">

            <table id = "kola" class="table listing text-center">
                <thead>
                    <tr class="tr-head">
                        <td>Invoices</td>
                    </tr>
                </thead>


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

                <div id="sample">

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


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

                <tbody>              
                    <%= render @shippingdetails %>
                </tbody>

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

_shippingdetail.html.erb

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

    <td class="col-1"><%= link_to shippingdetail, shippingdetail %></td>

</tr>

shippingdetails_controller.rb

class ShippingdetailsController < ApplicationController
  before_action :set_shippingdetail, only: [:show, :edit, :update, :destroy]


  def index
    @shippingdetails = Shippingdetail.search(params[:search])

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

  def show
  end

  def new
    @shippingdetail = Shippingdetail.new
  end

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

  def edit
  end

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

end

def destroy
  @shippingdetail.destroy
  flash[:notice] = 'Shippingdetail was successfully destroyed.'
  redirect_to shippingdetails_url   
end

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

    # Never trust parameters from the scary internet, only allow the white list through.
    def shippingdetail_params
      params.require(:shippingdetail).permit(:invnos, :shippeddate, :cusname, :lanchno, :capname, :contactno, :markup, :brand, :season, :quantity, :cartons, :goonis, :image)
    end

  end

How can I prevent rails ajax from duplicating records?

Any suggestions are most welcome.

Thank you in advance.

Answer 1

I just replaced the id="kola" in my code to look like as below;

index.html.erb

<div class="row">
    <div class="col-md-5 col-md-offset-3">

        <div class="table-responsive myTable">

            <table class="table listing text-center">
                <thead>
                    <tr class="tr-head">
                        <td>Invoices</td>
                    </tr>
                </thead>

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

                <tbody id = "kola">              
                    <%= render @shippingdetails %>
                </tbody>

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

index.js.erb

I just omitted 'tbody' and replace 'tr' with 'tr-head' as below;

    $('#kola').empty();
    <% if @shippingdetails.empty? %>
    $('.tr-head').remove();
    $('#kola').append("No Results Found For Your Search...");
    $('#kola').css({"background-color": "white", "font-size": "100%", "font-weight": "900"}); 
    <% else %>
    <% @shippingdetails.each do |shippingdetail| %>
    $('#kola').append("<%= j render shippingdetail %>");
    <% end %>
    <% end %>

Now it is working fine.