在 Rails 中使用 Ajax 作为整个页面渲染答案

【问题标题】：using Ajax in Rails works as whole page render在 Rails 中使用 Ajax 作为整个页面渲染
【发布时间】：2012-12-29 08:55:47
【问题描述】：

在这里我想通过 ajax 调用 _employee_registers.html.erb。只有搜索输出将使用 ajax 显示。我正在关注这个http://railscasts.com/episodes/240-search-sort-paginate-with-ajax。它运作良好。但我现在想在我的项目中实现它。

我的 index.html.erb

<%= link_to 'New Employee register', new_employee_register_path %>
<%= form_tag employee_registers_path, :method => 'get', :id => "employee_registers_search" do %>
  <p>
    <%= select_tag "fieldtype", options_for_select([ "name", "email" ], "name") %>
    <%= text_field_tag :search, params[:search] %>
    <%= submit_tag "Search", :name => nil%>
  </p>
  <div id="employee_registers"><%= render 'employee_registers' %></div>
<% end %>
<br />

我的 index.js.erb

$("#employee_registers").html("<%= escape_javascript(render("employee_registers")) %>");

我的 _employee_registers.html.erb 部分

<h1>Listing employees</h1>
<% @employee_registers.each do |employee_register| %>
<div class="span2 curve">
    <div class="profile_img">
        <%= image_tag employee_register.image.url,:size => "150x180"%>
</div>
         <p><strong><%= employee_register.first_name %><%= employee_register.last_name %>
         <br>
         <%= employee_register.department.name%><%=employee_register.division.name%><br>
            <%=mail_to employee_register.wemail%><br></strong></p>
    %><br/></br/>
<% end %>

</div>
<br />

我的应用程序.js

$(function() {
  $("#employee_registers th a").live("click", function() {
          $.getScript(this.href);
        return false;
         });
       $("#employee_registers_search input").keyup(function() {
       $.get($("#employee_registers_search").attr("action"), $("#employee_registers_search").serialize(), null, "script");
       return false;
  });

我的问题不是只引用那个 div

$("#employee_register").html

它正在提供所有页面的输出，而 ajax 不起作用。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/bootstrap.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/bootstrap-wysihtml5/core.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/bootstrap-wysihtml5/index.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/bootstrap-responsive.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/companies.css?body=1" media="all" rel="stylesheet" type="text/css" />

<script media="all" src="/assets/bootstrap.js?body=1" type="text/javascript"></script>

可能是什么问题？

【问题讨论】：

标签： ruby-on-rails ruby ruby-on-rails-3 jquery ruby-on-rails-3.2

【解决方案1】：

您的代码存在一些问题。

我认为主要问题是您希望表单根据搜索提供employee_registers，但您没有来自搜索操作的javascript 响应。

假设您有这样的搜索操作

def search
 @employee_registers = Employee.where(:name => params[:search])
end

然后在你的 search.js.erb 文件中

$("#employee_registers").append("<%= j(render @employee_registers)  %>

（j() 是 escape_javascript() 的别名）

在您的 _employee_registers.html.erb 部分

<div class="span2 curve">
    <div class="profile_img">
        <%= image_tag employee_register.image.url,:size => "150x180"%>
    </div>
    <p><strong><%= employee_register.first_name %><%= employee_register.last_name %>
    <br>
    <%= employee_register.department.name%><%=employee_register.division.name%><br>
    <%=mail_to employee_register.wemail%><br></strong></p>
    <br/></br/>
</div>
<br />

现在您必须更改 index.html.erb 文件中的一些代码

<%= link_to 'New Employee register', new_employee_register_path %>
<%= form_tag employee_registers_path, , :remote => true, :method => 'get', :id =>    "employee_registers_search" do %>
  <p>
    <%= select_tag "fieldtype", options_for_select([ "name", "email" ], "name") %>
    <%= text_field_tag :search, params[:search] %>
    <%= submit_tag "Search", :name => nil%>
  </p>
  <div id="employee_registers"></div>
<% end %>
<br />

我尚未对此进行测试，您的代码中的其他地方可能存在错误。您的问题包含大量代码，并且您解释了错误是什么，这很好。但是，不清楚你想做什么。试着多解释一点，你会得到更好的答案。

【讨论】：

这里我想通过 ajax 调用 _employee_registers.html.erb。只有搜索输出会使用 ajax 显示。
是的，看了你的代码后我明白了。如果您在问题的顶部放置类似这样的评论，人们更容易看到他们是否有答案。
我正在关注这个railscasts.com/episodes/240-search-sort-paginate-with-ajax 教程。它运作良好。但我现在想在我的项目中实现它。然后出现上述情况
我正要为那个 railscast 添加链接：)

【解决方案2】：

我可以看到两件事，

1) 填写表格remote => true

<%= form_tag employee_registers_path, :method => 'get', :remote => true, :id => "employee_registers_search" do %>

2) 您在搜索表单本身中包含用户列表有点不寻常，请尝试将其放在 form 标记之外（这与您的错误无关，只是作为一种练习）

HTH

【讨论】：

我的观点是为什么它渲染所有的东西只是它必须渲染employee_registers。这里显示了 firebug 中的所有样式表 js。
在您的控制器操作中，返回 js 作为响应例如：respond_to do |format| format.js 结束