首页 > Web开发 > 详细

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

时间:2015-10-27 19:51:40      阅读:309      评论:0      收藏:0      [点我收藏+]

 

(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
                                    

 

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

原文:http://www.cnblogs.com/iwangzheng/p/4915181.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!