Rails 4：單擊提交按鈕后在div中渲染部分

Question

我沒有得到它。 我正在構建一個rails應用程序，並希望執行一些單頁操作。 我從現在開始得到的是，當我從customers / index.html.erb的列表中選擇一個“客戶”時，我在'current_customer'div中渲染它。 當我點擊編輯時，表單將在'current_customer'中呈現 - 完美。 但是當我點擊表單上的sumbit時，我得到一個錯誤（我理解）'ActionController :: UnknownFormat'，因為控制器對'show'的操作。 我被路由到' http：// localhost：3000 / customers / 2 '我希望在clikcing sumit之后路由到' http：// localhost：3000 / customers '並渲染cutomers / _show.html。 erb在'current_customer'div中。

我的代碼：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

我很樂意為你提供幫助！ 謝謝

Answer 1

你需要在form_for標簽而不是submit按鈕中放置remote: true在此處添加

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

將其從中移除

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

此外， update操作也應接受AJAX請求，創建update.js.erb模板並在使用remote: true提交表單時處理AJAX請求remote: true

希望有所幫助！

Answer 2

按原樣提交表單將調用POST /customer/1 。 您需要在控制器和路由中定義更新方法，並在表單中添加method: :patch以實現PATCH /customer/1 。

此外，您可能希望定義update.js.erb並將remote: true添加到表單以添加一些動態AJAX。

Answer 3

您可以通過以下方式替換您的show鏈接：

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

要么

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