(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>
<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