javascript - Rails & Zurb Modal 在编辑时加载整个页面

Question

我正在尝试通过 zurb 基础模式编辑我的 Rails 应用产品中的内容。我可以添加新的就好了。但是当尝试单击编辑按钮时，它会再次加载整个页面的模态。虽然它加载了正确的编辑页面，但我只想要一个编辑表单。不是我网站的全新呈现。

Products_controller.rb

class ProductsController < ApplicationController
  before_action :set_product, only: [:show, :edit, :update, :destroy]

  # GET /products
  # GET /products.json
  def index
    @products = Product.all
    @product = Product.new
  end

  # GET /products/1
  # GET /products/1.json
  def show
  end

  # GET /products/new
  def new
    @product = Product.new
  end

  # GET /products/1/edit
  def edit
    @product = Product.find(params[:id])
  end

  # POST /products
  # POST /products.json
  def create
    @product = Product.new(product_params)

    respond_to do |format|
      if @product.save
        format.html { redirect_to @product, notice: 'Product was successfully created.' }
        format.json { render :show, status: :created, location: @product }
      else
        format.html { render :new }
        format.json { render json: @product.errors, status: :unprocessable_entity }
      end
    end
  end

  # PATCH/PUT /products/1
  # PATCH/PUT /products/1.json
  def update

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

  # DELETE /products/1
  # DELETE /products/1.json
  def destroy
    @product.destroy
    respond_to do |format|
      format.html { redirect_to products_url, notice: 'Product was successfully destroyed.' }
      format.json { head :no_content }
    end
  end

  private
    # Use callbacks to share common setup or constraints between actions.
    def set_product
      @product = Product.find(params[:id])
    end

    # Never trust parameters from the scary internet, only allow the white list through.
    def product_params
      params.require(:product).permit(:name, :price)
    end
end

index.html.erb

<h1>Listing products</h1>
<a href="#" data-reveal-id="myModal">Click Me For A Modal</a>

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

  <tbody>
    <% @products.each do |product| %>
      <tr>
        <td><%= product.name %></td>
        <td><%= product.price %></td>
        <td><%= link_to 'Show', product %></td>
        <td><%= link_to 'Edit', edit_product_path(product) %></td>
        <td><%= link_to 'EditM', edit_product_path(product), :remote => true, class: "", "data-reveal-id" => "editModal", "data-reveal-ajax" => edit_product_path(product) %></td>
        <td><%= link_to 'Destroy', product, method: :delete, data: { confirm: 'Are you sure?' } %></td>
      </tr>
    <% end %>
  </tbody>
</table>

<br>

<%= link_to 'New Product', new_product_path, class: "button radius", "data-reveal-id" => "addModal" %>
<div id="addModal" class="reveal-modal" data-reveal>
  <%= render :partial => 'form', locals: { product: @products } %>
  <a class="close-reveal-modal">&#215;</a>
</div>

<div id="editModal" class="reveal-modal" data-reveal>
  <%= render :partial => 'form' %>
  <a class="close-reveal-modal">&#215;</a>
</div>

_form.html.erb

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

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

<div class="row">
  <div class="small-3 columns">
    <%= f.label :name, class: "right inline" %>
  </div>
  <div class="small-9 columns">
    <%= f.text_field :name %>
  </div>
</div>
<div class="row">
  <div class="small-3 columns">
    <%= f.label :price, class: "right inline", title: "Price In USD", data: { tooltip: true } %>
  </div>
  <div class="small-9 columns">
    <%= f.text_field :price %>
  </div>
</div>
<div class="row">
  <div class="small-9 small-offset-3 columns">
    <%= f.submit %>
  </div>
</div>
<% end %>

下面是您选择 EditM 按钮后加载方式的图像。

Answer 1

我已将我的 :edit 方法更新为以下内容。它似乎在工作，所以它只加载 Action ，而不加载布局。这是正确的方法吗？或者我应该采取不同的做法吗？

  def edit
    @product = Product.find(params[:id])
    render :layout => false
  end

这是 index.html.erb 中的模态:

<div id="editModal" class="reveal-modal" data-reveal>
<a class="close-reveal-modal">&#215;</a>
</div>