1

I'm updating prices in a shopping cart with a select drop-down quantity menu using Ajax and onchange event. It works fine, but I was wondering if there would be an alternative to my code as it doesn't seem to be practical and it's too long.

It's all in the success function

function updateQuantity(form) {
  const code = $(form).attr("id");
  const new_qty = $(form).val();
  $.ajax({
    method: "POST",
    data: {"code": code, "new_qty": new_qty},
    success: function(result) {
//Extract required content from result
      const price1 = $("<div />").append(result).find(".total-td-align").eq(0).text();
      const price2 = $("<div />").append(result).find(".total-td-align").eq(1).text();
      const price3 = $("<div />").append(result).find(".total-td-align").eq(2).text();
      const price4 = $("<div />").append(result).find(".total-td-align").eq(3).text();
// Update total price for individual product with content extracted from result
      $(".total-td-align").eq(0).text(price1); 
      $(".total-td-align").eq(1).text(price2);
      $(".total-td-align").eq(2).text(price3);
      $(".total-td-align").eq(3).text(price4);

      const totalPrice =  $("<div />").append(result).find(".total-amount").text();
      $(".total-amount").text(totalPrice); // Total price of all products

    },
    error: function () {
      alert("Problem in sending reply!")},
  });
}

I have only 4 products but what if I had 500?

A screenshot of the cart (names of products not displayed).

Cart

yendrrek
  • 191
  • 2
  • 12
  • what does `$("
    ").append(result).find(".total-td-align").eq(0).text()` do ? why do you need to append data and then get that appended data only ?     – Swati Jun 20 '20 at 12:44
  • It's just a way of getting the desired parts of the result. I got it from here: https://stackoverflow.com/a/18064824/12208549 , although, I did change it already to something simpler and letting you write less code:`$(".total-td-align").eq(0).html($(".total-td-align", result).eq(0).html());` etc. This code extracts necessary parts and updates the page right away (https://stackoverflow.com/a/50402995/12208549). – yendrrek Jun 22 '20 at 12:08
  • But the simpler code doesn't always work. To replace a header via AJAX I had to extract it from `result` by appending it to a `
    `, like this: `const header = $("
    ").append(result).find("header").html();`) and then `$("header").html(header);`
     – yendrrek Jun 23 '20 at 09:53
  • so what issue you are currently facing ? can you elaborate more ? – Swati Jun 23 '20 at 12:18
  • Now I've got this to update the price from the AJAX result: `$(".total-td-align").eq(0).html($(".total-td-align", response).eq(0).html());` .There are only four products, so it's just four lines of code (I just change the index, so it's eq(1), eq(2), etc) ) but what if there are many more products in the basket. Some kind of loop must be performed I guess to avoid a separate line of code for each product added to the basket. `total-td-align` is the element where a single total price is displayed for a product (which is price per unit times quantity). – yendrrek Jun 24 '20 at 10:55
  • yes you need to loop through your all element and add required values to each .Can you show your response which you got from ajax ? also the html structure of your code ? – Swati Jun 24 '20 at 12:09

0 Answers0