Rails 4：单击提交按钮后在 div 中渲染部分内容答案

【问题标题】：Rails 4: Render partial in div after submit button clickRails 4：单击提交按钮后在 div 中渲染部分内容
【发布时间】：2016-06-27 02:03:47
【问题描述】：

我没听懂。我正在构建一个 Rails 应用程序并想做一些单页操作。我现在得到的是，当我从customers/index.html.erb 的列表中选择一个“客户”时，我将它呈现在“current_customer”div 中。当我单击编辑时，表单将呈现在“current_customer”中 - 完美。但是，当我单击表单上的 sumbit 时，由于“显示”控制器中的操作，我收到一个错误（我理解）“ActionController::UnknownFormat”。我被路由到'http://localhost:3000/customers/2' 我想要的是在点击 sumit 并在 'current_customer' div 中渲染 cutomers/_show.html.erb 后路由到 'http://localhost:3000/customers'。

我的代码：客户/index.html.erb

<h1>Listing Customers</h1>

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th colspan="3">Actions</th>
    </tr>
  </thead>

  <tbody>
    <% @customers.each do |customer| %>
      <tr>
        <td><%= customer.name %></td>
        <td><%= link_to 'Show', customer, remote: true %></td>
        <td><%= link_to 'Edit', edit_customer_path(customer), remote: true %></td>
        <td><%= link_to 'Destroy', customer, method: :delete, data: { confirm: 'Are you sure?' } %></td>
      </tr>
    <% end %>

  </tbody>
</table>

<br>
<div id="current_customer"></div>
<br>

<%= link_to 'New Customer', new_customer_path, class: "button", id: "new_customer" %>

客户/_show.html.erb

<p>
  <strong>Name:</strong>
  <%= @customer.name %>
  <%= @customer.id %>
</p>

<%= link_to 'Edit Customer', edit_customer_path(@customer) %> |

客户/_edit.html.erb

<h1>Editing Customer</h1>

<%= render 'form' %>

<%= link_to 'Show', @customer %> |

客户/_form.html.erb

<%= form_for(@customer) do |f| %>
  <% if @customer.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(@customer.errors.count, "error") %> prohibited this customer from being saved:</h2>

      <ul>
      <% @customer.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

  <div class="field">
    <%= f.label :name %><br>
    <%= f.text_field :name %>
  </div>
  <div class="actions">
    <%= f.submit id: "customer_button", remote: true %>
  </div>
<% end %>

客户/edit.js.erb

$("#current_customer").html("<%= escape_javascript(render partial: 'customers/edit', locals: { customer: @customer } ) %>");

customers_controller.rb（部分）

def show
    respond_to do |format|
      format.js {render layout: false}
    end
  end

  # GET /customers/new
  def new
  end

  # GET /customers/1/edit
  def edit
    respond_to do |format|
      format.js {render layout: false}
    end
  end

def update
    respond_to do |format|
      if @customer.update(customer_params)
        format.html { redirect_to @customer, notice: 'Customer was successfully updated.' }
        format.json { render :show, status: :ok, location: @customer }
      else
        format.html { render :edit }
        format.json { render json: @customer.errors, status: :unprocessable_entity }
      end
    end
  end

我很乐意为您提供任何帮助！谢谢

【问题讨论】：

显然，你需要使用AJAX。
你遇到了什么错误？
ActionController::UnknownFormat in CustomersController#show - app/controllers/customers_controller.rb:12:in `show'
你有更新操作对吗？
是（见代码中的编辑）

标签： ruby-on-rails ruby redirect submit partial

【解决方案1】：

您需要将remote: true 放在form_for 标记中而不是submit 按钮中，在此处添加

<%= form_for @customer, remote: true do |f| %>

删除

<%= f.submit id: "customer_button" %>

另外，update 操作也应该接受 AJAX 请求，创建 update.js.erb 模板并在使用 remote: true 提交表单时处理 AJAX 请求

希望有帮助！

【讨论】：

【解决方案2】：

按原样提交表单将调用POST /customer/1。您需要在您的控制器和路由中定义一个更新方法，并将method: :patch 添加到您的表单中以实现PATCH /customer/1。

另外，您可能想要定义一个update.js.erb 并将remote: true 添加到您的表单中以添加一些动态AJAX。

【讨论】：

【解决方案3】：

你可以用这个替换你的节目链接：

<%= link_to "show", {:action => :show}, :remote => true %>

或

<%= link_to "show", customer_path(customer), :remote => true %>

【讨论】：