通过js实现编辑功能ruby on rails 弹出层

 

（1）首先给每一行进行id的标注，并且修改edit链接，使它的remote: true,

请求类型是json格式，在这个链接上，增加class：editProductLink

，这样在我们点击链接的时候，会执行一个动作，

app/views/products/_product.html.erb

<tr id="product_<%= product.id %>">
  <td><%= link_to product.id, product_path(product) %></td>
  <td id="product_<%= product.id %>_name"><%= product.name %></td>
  <td id="product_<%= product.id %>_price"><%= number_to_currency product.price, unit: "¥" %></td>
  <td id="product_<%= product.id %>_description"><%= product.description %></td>
  <td><%=l product.created_at %></td>
  <td>
    <%= link_to t('.edit', :default => t("helpers.links.edit")),
      edit_product_path(product), :class => 'btn btn-default btn-xs editProductLink',
      remote: true, data: {type: 'json'} %>
      <%= link_to t('.destroy',
        :default => t("helpers.links.destroy")), 
        product,
        :remote => true,
        :method => :delete,
        :data => { :confirm => t('.confirm', :default => t("helpers.links.confirm", :default => 'Are you sure?')) },
        :class => 'btn btn-xs btn-danger' %>
  </td> 
</tr>

（2）在index页面增加编辑的弹出层，

  <div class="modal-dialog">
      <%= form_tag "", method: :put, remote: true, data: { type: "json" }, id: "editProductForm", class: "form" do %>
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h4 class="modal-title">编辑一个商品</h4>
          </div>
          <div class="modal-body">
            <div class="alert alert-dismissible alert-danger" id="alert-content">
              <button type="button" class="close" data-dismiss="alert">×</button>
              <div id="msg"></div>
            </div>
            <div class="form-group">
              <%= label_tag "product[name]", Product.human_attribute_name("name"), :class => 'control-label' %>
              <%= text_field_tag "product[name]", "", :class => 'form-control', id: "editProductName" %>
            </div>
            <div class="form-group">
              <%= label_tag "product[description]", Product.human_attribute_name("description"), :class => 'control-label' %>
              <%= text_field_tag "product[description]", "", :class => 'form-control', id: "editProductDescription" %>
            </div>
            <div class="form-group">
              <%= label_tag "product[price]", Product.human_attribute_name("price"), :class => 'control-label' %>
              <%= text_field_tag "product[price]", "", :class => 'form-control', id: "editProductPrice" %>
            </div>
          </div>
          <div class="modal-footer">
            <%= link_to t('.cancel', :default => t("helpers.links.cancel")), '#', :class => 'btn btn-default', data: {dismiss: "modal"} %>
            <%= submit_tag t('.confirm', :default => t("helpers.links.confirm")), :class => 'btn btn-primary', :data => { :"disable-with" => "请稍等..
          </div>
        </div>
      <% end %>
    </div>

<%= content_for :page_javascript do %>
  <script>
    $('#newProductFormModal').modal({
      show: false,
    })
    $('#editProductFormModal').modal({
      show: false,
    })
  </script>
<% end %>

（3）编写app/assets/javascripts/products.js.coffee

jQuery ->
  $(".editProductLink")
    .on "ajax:success", (e, data, status, xhr) ->
      $('#alert-content').hide()
      $('#editProductFormModal').modal('show')
      $('#editProductName').val(data['name'])
      $('#editProductPrice').val(data['price'])
      $('#editProductDescription').val(data['description'])
      $("#editProductForm").attr('action', '/products/'+data['id'])
            
            
  $("#editProductForm")
    .on "ajax:success", (e, data, status, xhr) ->
      $('#editProductFormModal').modal('hide')
      $('#product_'+data['id']+'_name').html(  data['name'] )
      $('#product_'+data['id']+'_price').html(  data['price'] )
      $('#product_'+data['id']+'_description').html(  data['description'] )
    .on "ajax:error", (e, xhr, status, error) ->
      $('#alert-content').show()
      $('#alert-content #msg').html( xhr.responseText )
  

（4）把这个文件加到application.js中

（5）修改controller里的update方法，

  def update
    respond_to do |format|
      if @product.update(product_params)
        format.html { redirect_to @product, notice: 'Product was successfully updated.' }
        format.json
      else
        format.html { render :edit }
        format.json { render json: @product.errors.full_message.join(', '), status: :error}
      end
      format.js
    end
  end

（6）新增app/views/products/update.json.jbuilder

json.id @product.id
json.name link_to(@product.name, product_path(@product))
json.price number_to_currency(@product.price, unit: "￥")
json.description @product.description