Muhammad Yaseen Muhammad Yaseen - 3 months ago 8
Ajax Question

Getting Duplicate records when returning search results with Ajax Rails

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;

screenshot.png

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

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.

Comments