Updating table data in rails using ajax

Question

I have only one view index.html.erb which displays all employee names and all the details in the database. I have a search form wherein the search results should be updated in the table tbody with id "content". my index.html.erb renders fine the first time.
Here is my index.html.erb

//my view index.html.erb
<%= form_for :query, :url => { :controller => "home", :action => "show" }, :html =>{:id => "search_form"} do |f|%>
    <div>
        <p>Enter the search keywords:</p>
        <input type="text" id="query_search_key" name="query[search_key]"/>

        <%= f.submit "Search" %>
        <p>Raised By : <select style="width:300px" id="query_raised_by" name="query[raised_by]">
        <option value="-1" selected>Select member</option>
        <% @m_n.each do |m_n| %>
        <option value="<%= m_n.full_name %>"><%= m_n.full_name %></option>
        <% end %>
        </select>
    </div>
<% end %>

<div>
<table id="table" class="display">
    <thead>
    <tr><th>Sr Number</th><th>Raised By</th><th>Title</th></tr>
    </thead>
    <tbody id="content">
        <% if @query%>      
            <% @query.each do |query| %>
                <tr><td><%= query.sr_number %></td><td><%= query.from %></td><td><%= query.title %></td></tr>
            <% end %>
        <% end %>
    </tbody>
</table>
</div>

//ajax call handler in index.html.erb
$("#search_form").submit(function(){
    var dataSet = $(this).serialize();
    $.ajax({
        type: "POST",
        url: $(this).attr("action"),
        data: dataSet,
        success: function(data){
        //update the contents of tbody with id content
        }
    });
    return false;
});

Here is my controller

//my controller
class HomeController <  ActionController::Base
  def index

    @m_n = (db query getting member names)
    #displaying al records
    @query = (db query)
  end

  def show
    #displaying filtered results
    @query = (db query)
    flash[:notice] = "success: "+ no_of_results + " were found"
    render :partial => 'search'

  end
end

From show action I want to update only the table tbody with id "content" in index.html.erb using @query object.

how do you want to update tbody with id "content" from show page,do you want to click on any button or when show page action is triggred? can you please elaborate your question? — anusha
– anusha, Commented May 29, 2014 at 5:31
when I press search button after entering the search key, the control goes to show action. From there I want to update the table with filtered results using @query object. — Shub
– Shub, Commented May 29, 2014 at 5:33
hello @FredoCorleone remember Winter is coming..tell Michael Corleone too — Standin.Wolf
– Standin.Wolf, Commented Nov 20, 2014 at 15:00

anusha · Accepted Answer · 2014-05-29 05:40:06Z

12

Try to write some partial and add the partial data to tbody

for example:

controller:

def show
    #displaying filtered results
    @query = (db query)
    #pass @query to index.html.erb and update only the tbody with id=content which takes @query
    render :partial => 'show_partial'

  end

_show_partial.html.erb:

<% if @query%>      
      <% @query.each do |query| %>
          <tr><td><%= query.sr_number %></td><td><%= query.from %></td><td><%= query.title %></td></tr>
      <% end %>
<% end %>

and then

//ajax call handler in index.html.erb
$("#search_form").submit(function(){
    var dataSet = $(this).serialize();
    $.ajax({
        type: "POST",
        url: $(this).attr("action"),
        data: dataSet,
        success: function(data){
              $('#content').html(data)
        }
    });
    return false;
});

I think it may solve your problem

answered May 29, 2014 at 5:40

anusha

2,13520 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Shub Over a year ago

Thanks a million anusha.. I was struggling for 2 days. I'll upvote.Thanks again. :)

anusha Over a year ago

@Fredo Corleone: With Pleasure Fredo.

Shub Over a year ago

Hey, I want to send a flash[:notice] from controller to view and add it in the div with id "content". I have updated my controller. Could you help plz. I am directly accessing it in the success function as: $("#content").html("<%= flash[:notice] %>"). but it renders only once and the notice doesnt get updated on next ajax call.

anusha Over a year ago

@FredoCorleone: Specify the flash[:notice] in controller and add that in _show_partial.html.erb

Shub Over a year ago

Thanks anusha. Another headache and another perfect answer. Thanks a million

|

Collectives™ on Stack Overflow

Updating table data in rails using ajax

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related