my remove button is not working. ( $.ajax) for removing the product from the cart how solve?-CodePudding

this is my product remove button for removing the product from the cart, I am used here ajax :

cart.hbs

<button
  href="/remove-product"
  id="{{this.product._id}}"
  
  onclick="removeProduct ,('{{this.product._id}}'), confirm('Are you sure you want to remove the product   {{this.product.Name}} ?')"
>
  remove
</button>

function removeProduct(cartId, proId) {
  $.ajax({
    url: '/remove-product',
    data: {
      product: proId,
      cart: cartId,
    },
    method: 'post',
    success: (response) => {
      if (response.removeProduct) {
        alert('Product Removed Successfully');
        location.reload();
      } else {
        document.getElementById(proId).innerHTML = response.removeProduct;
      }
    },
  });
}

user.js this is my js file

router.post('/remove-product', (req, res) => {
  userHelpers.removeProduct(req.body).then((response) => {
    res.json(response);
  });
});

for removing the product, this is the cord for removing the product from the cart here , I passed proId and cartId user-helpers.js

removeProduct: (details) => {
  return new Promise((resolve, reject) => {
    db.get()
      .collection(collection.CART_COLLECTION)
      .updateOne(
        { _id: objectId(details.cart) },
        {
          $pull: { products: { item: objectId(details.product) } },
        }
      )
      .then((response) => {
        resolve({ removeProduct: true });
      });
  });
};

CodePudding user response：

When using Ajax, we have to be very conscious about how the data is sending. I mean here we sending the data

data: {
  product: proId,
  cart: cartId,
},

this is the data and sending method is post so, in js file also need to use post method, I have solved this problem myself here is the code,

here is the button, cart.hbs

<button id=" Remove"  onclick=" removeProduct
  ('{{this._id}}','{{this.product._id}}')"> remove</button>
                                

<script>
    function removeProduct(cartId, proId) {
        $.ajax({
            url: '/remove-product',
            data: {
                product: proId,
                cart: cartId,
            },
            method: 'post',
            success: (response) => {
                if (response.removeProduct) {
                    alert("Product Removed Successfully")
                    location.reload()

                } else {
                    document.getElementById(proId).innerHTML =  response.removeProduct
                                         
                }
            }
        });

    };


</script>

user.js

router.post('/remove-product',(req,res)=>{
  userHelpers.removeProduct(req.body).then(async(response)=>{
      res.json(response)  

   })
})

and this is the code for removing the product from the cart

user-helpers.js

removeProduct:(details)=>{
    return new Promise ((resolve,reject)=>{
        db.get().collection(collection.CART_COLLECTION)
        .updateOne({_id:objectId(details.cart)}, 
    {

        $pull:{products:{item:objectId(details .product)}}
    }
        ).then((response)=>{

            resolve({removeProduct:true})
        })
    
  })
}