Rails AJAX - 获取下拉选项以填充表格

时间:2012-07-04 10:30:10

标签: ruby-on-rails ajax drop-down-menu html-table populate

我正在尝试从下拉列表中选择使用AJAX填充同一页面中的表,以便在没有页面刷新的情况下显示更改。我已经编写了远程调用的代码,并将自定义操作添加到控制器,但我不知道如何将返回的信息放入我已经获得的表中。目前,该表只是循环遍历所有项目,但我希望它只显示所选项目的信息。

我需要在JS(rjs?)文件中编写什么来让它处理返回的信息,以及我需要对现有表进行哪些更改以确保它显示正确的信息?< / p>

下拉(使用AJAX调用):

<%= collection_select :id, Project.all, :id, :name, :onchange => remote_function(:url=>{:action => 'populate_projects'}) %>

控制器操作:

 def populate_projects
    @project = Project.find(params[:id])
 end

现有表格:

<table>
  <tr>
    <th>Name</th>
    <th>Category</th>
    <th>Budget</th>
    <th>Deadline</th>
    <th>Company ID</th>
    <th></th>
    <th></th>
    <th></th>
  </tr>

<% @projects.each do |project| %>
  <tr>
    <td><%= project.name %></td>
    <td><%= project.category %></td>
    <td><%= number_to_currency(project.budget, :unit => "&pound;") %></td>
    <td><%= project.deadline.strftime("%A, %d %B %Y") %></td>
    <td><%= project.company_id %></td>
    <td><%= link_to 'More', project %></td>
    <td><%= link_to 'Edit', edit_project_path(project) %></td>
    <td><%= link_to 'Delete', project, confirm: 'Are you sure?', method: :delete %></td>
  </tr>
<% end %>
</table>

3 个答案:

答案 0 :(得分:4)

假设你正在使用jquery

<%= collection_select :project, :id, Project.all, :id, :name, {}, {:onchange => '$.get("/populate_projects")'} %>

然后在您的控制器中

def populate_projects
  @project = Project.find(params[:id])
  respond_to do |format|
    ...
    format.js { render 'populate_projects', :formats => [:js] }
    ...
  end
end

最后,创建populate_projects.js.erb并编写任何更改表内容脚本。该脚本中提供了@project

答案 1 :(得分:0)

创建一个部分_project.html.erb并在索引页面中呈现此部分。 <%= render @projects %> 在更改项目时,只需使用项目对象渲染部分,并使用rjs更新页面。

答案 2 :(得分:0)

在js(RJS)文件中,您需要调用部分HTML文件,此文件包含您在问题中显示的表格。

我希望这会对你有所帮助。

感谢。