如何使用Ajax删除in_shopping_cart

Question

大家好，我有一个项目，其中有购物车、in_shopping_cart、产品和所有工作正常，但是我想用ajax而不是html删除in_shopping_carts，所以我有以下代码：

in_shopping_cart.rb

class InShoppingCart < ActiveRecord::Base
  belongs_to :product
  belongs_to :shopping_cart       
end

shopping_cart.rb

class ShoppingCart < ActiveRecord::Base
    has_many :products, through: :in_shopping_carts 
    has_many :in_shopping_carts
end

product.rb

class Product < ActiveRecord::Base  
  has_many :in_shopping_carts
  belongs_to :shopping_cart
end

in_shopping_carts_controller.rb

def destroy
        @in_shopping_cart = InShoppingCart.find(params[:id])
        if @in_shopping_cart.destroy
            redirect_to carrito_path, notice: "El producto se elimino correctamente"
        else
            redirect_to carrito_path, alert: "Hubo un error, intenta de nuevo"
        end     
    end 

Application_controller.rb

before_action :set_shopping_cart

  private
   def set_shopping_cart    
    if cookies[:shopping_cart_id].blank?
        @shopping_cart = ShoppingCart.create!(ip: request.remote_ip)
        cookies[:shopping_cart_id] = @shopping_cart.id
    else
        @shopping_cart = ShoppingCart.find(cookies[:shopping_cart_id])
    end
    rescue ActiveRecord::RecordNotFound => e
     @shopping_cart = ShoppingCart.create!(ip: request.remote_ip)
     cookies[:shopping_cart_id] = @shopping_cart.id             
   end

show.haml

-@shopping_cart.in_shopping_carts.each do |i_sh|
   -product = i_sh.product       
   .col-lg-4
    .panel.panel-default
     .panel-title
      .pull-left
       %h1=product.name
       %span.label.label-success.no-padding.in-top
        ="#{product.stock} disponibles"  
      =render "delete_in_shopping_cart", product: product, i_sh: i_sh

_delete_in_shopping_cart.haml

%button.red-text.button-active-pink.no-underline.pull-right.white.no-border{'data-toggle': "modal", 'data-target': "#"+"#{product.id}"}
 %i.fa.fa-window-close        
.modal.fade{id: "#{product.id}", tabindex:"-1", role:"dialog", 'aria-labelledby': "#{product.id}"}
 .modal-dialog{role: "document"}
  .modal-content
   .modal-header
    %button.close{type: "button", 'data-dismiss': "modal", 'aria-label': "Close"}
     %span{'aria-hidden': "true"}
      ×
    %h4.modal-title.red-text{id: "#{product.id}"} Alerta              
   .modal-body
    %h4.text-center= "¿Estas seguro de eliminar #{product.name} del carrito?"           
   .modal-footer    
    = link_to "Aceptar",i_sh, method: :delete, class: "btn btn-success bold bottom-space"

上面的代码工作得非常好！但我想用JS摧毁in_shopping_cart。

我试过这个选择

_delete_in_shopping_cart.haml

= link_to "Aceptar",i_sh, method: :delete,remote: true, class: "btn btn-success bold bottom-space"

in_shopping_carts_controller.rb

 def destroy
   @in_shopping_cart = InShoppingCart.find(params[:id])
   if @in_shopping_cart.destroy
      respond_to do |format|
        format.html { redirect_to carrito_path, notice: "El producto se elimino correctamente" }      
        format.js
      end

    else
        redirect_to carrito_path, alert: "Hubo un error, intenta de nuevo"
    end     
end

destroy.js.erb

$("#in_shopping_cart_<%= @in_shopping_cart.id %>").fadeOut(500, function(){
    $(this).remove();   
});

show.haml (在列LG-4中添加了一个ID )

-@shopping_cart.in_shopping_carts.each do |i_sh|
       -product = i_sh.product       
       .col-lg-4{id: "in_shopping_cart_#{i_sh.id}"}
        .panel.panel-default
         .panel-title
          .pull-left
           %h1=product.name
           %span.label.label-success.no-padding.in-top
            ="#{product.stock} disponibles"  
          =render "delete_in_shopping_cart", product: product, i_sh: i_sh

到目前为止一切都很好！但这景色什么也做不了。如何刷新Show.haml视图？

  Started DELETE "/in_shopping_carts/108" for ::1 at 2017-04-27 20:30:04 -0500
Processing by InShoppingCartsController#destroy as JS
  Parameters: {"id"=>"108"}
  ShoppingCart Load (0.0ms)  SELECT  "shopping_carts".* FROM "shopping_carts" WH
ERE "shopping_carts"."id" = ? LIMIT 1  [["id", 112]]
  InShoppingCart Load (1.0ms)  SELECT  "in_shopping_carts".* FROM "in_shopping_c
arts" WHERE "in_shopping_carts"."id" = ? LIMIT 1  [["id", 108]]
   (1.0ms)  begin transaction
  SQL (4.0ms)  DELETE FROM "in_shopping_carts" WHERE "in_shopping_carts"."id" =
?  [["id", 108]]
   (213.2ms)  commit transaction
  Rendered in_shopping_carts/destroy.js.erb within layouts/application (0.0ms)
   (0.0ms)  SELECT COUNT(*) FROM "products" INNER JOIN "in_shopping_carts" ON "p
roducts"."id" = "in_shopping_carts"."product_id" WHERE "in_shopping_carts"."shop
ping_cart_id" = ?  [["shopping_cart_id", 112]]
  Rendered partials/_unlogged.haml (15.8ms)
  Rendered partials/_nav.haml (140.8ms)
Completed 200 OK in 1867ms (Views: 1609.7ms | ActiveRecord: 219.2ms)

我非常熟悉Rails& ajax，我可以用HTML做很多事情，但是当我使用ajax时，有些事情我无法完成。有什么建议？非常感谢我的朋友们

Answer 1

就像在您定义@in_shopping_cart的破坏方法中一样，您的destroy.js.erb文件将接收到这个文件，您需要使用该对象。

在回答最后一个问题时，您需要将“成功”后的“销毁”操作绑定到使用ajax:success回调触发事件的“销毁”按钮，如下所示：

$('.btn.btn-success.bold.bottom-space').bind('ajax:success', function() {  
  $("#in_shopping_cart_<%= @in_shopping_cart.id %>").fadeOut(500, function(){
    $(this).hide();
  });
});

通过这种方式，您可以根据您获得的响应来处理它，比如使用ajax:success、ajax:error或ajax:complete。