当前位置 : 主页 > 网页制作 > JQuery >

jquery – 使用ajax在rails中更新表数据

来源:互联网 收集:自由互联 发布时间:2021-06-15
我只有一个视图index.html.erb,它显示所有员工姓名和数据库中的所有详细信息.我有一个搜索表单,其中搜索结果应该在id为“content”的表格中更新.我的index.html.erb第一次渲染得很好. 这是我
我只有一个视图index.html.erb,它显示所有员工姓名和数据库中的所有详细信息.我有一个搜索表单,其中搜索结果应该在id为“content”的表格中更新.我的index.html.erb第一次渲染得很好.
这是我的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;
});

这是我的控制器

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

从show action我想使用@query对象仅更新index.html.erb中id为“content”的表tbody.

尝试编写一些部分数据并将部分数据添加到tbody

例如:

控制器:

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

然后

//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;
});

我认为它可以解决你的问题

网友评论