Question posted in
You can find the official documentation here.

Execute Ajax request Only Once – Jquery ajax

$('#addToCart').click(function () {
                let csrf = $("input[name=csrfmiddlewaretoken]").val();
                let trTable = $(this).parents('div')[1];
                let customPrice = $($(trTable).children('div')[0]).find('#customPrice').val();
                let quantity = $($(trTable).children('div')[1]).find('#quantity').val();
                let productID = $('#addToCart').attr('data-product-id');
                $.ajax({
                    url: "{% url 'cart:cart_add' %}",
                    method: 'POST',
                    dataType: 'json',
                    data: {
                        'csrfmiddlewaretoken': csrf,
                        productID: productID,
                        quantity: quantity,
                        customPrice: customPrice
                    },
                    success: function (data) {
                        $('#exampleModal').modal('hide');
                        let cart = $('#cart').children('tr');
                        let id = null;
                        jTotal = $('#total')
                        let trTable = $(this).parents('td');
                        let quantityField = '';
                        for (let i = 0; i < cart.length; i++) {
                            let tds = $(cart[i]).children('td')
                            let td = $(cart[i]).children('td')[tds.length - 1];
                            let ID = $(td).children('button').attr('data-product-id');
                            if (ID == data.id) {
                                quantityField = $(cart[i]).children('td')[1];
                                totalPriceField = $(cart[i]).children('td')[2];
                                id = ID;
                            }
                        }
                        if (data.id == id) {
                            $(quantityField).text(data.quantity);
                            $(totalPriceField).text(data.total);
                            jTotal.find('.total').find('.num').html(data.totalPrice);
                        } else {
                            $('#cart').append(
                                `<tr>
                                <td class="jsgrid-cell productName">${data.name}</td>
                                <td class="jsgrid-cell productQuantity" >${data.quantity}</td>
                                <td class="jsgrid-cell totalPrice">${data.total}</td>
                                <td class="productID"">
                                    <button type="button"  data-product-id="${data.id}" class="btn btn-sm btn-danger remove mgt"><i class="fa fa-trash"></i></button>
                                </td>
                            </tr>
                            `);
                            jTotal.find('.total').find('.num').html(data.totalPrice);
                        }

                        $('.remove').one("click", function() {
                            const result = confirm('Вы точно хотите удалить этот товар из корзины?');
                            if (result) {
                                let csrf = $("input[name=csrfmiddlewaretoken]").val();
                                let trTable = $(this).parents('td');
                                $.ajax({
                                    url: "{% url "cart:cart_remove" %}",
                                    method: 'POST',
                                    dataType: 'json',
                                    data: {
                                        'csrfmiddlewaretoken': csrf,
                                        productID: data.id,
                                    },
                                    success: function (data) {
                                        sellPrice = $(trTable.parents('tr').find('.totalPrice')).html();
                                        absoluteTotalPrice = jTotal.find('.total').find('.num').html();
                                        totalCost = Number(absoluteTotalPrice) - Number(sellPrice);
                                        jTotal.find('.total').find('.num').html(totalCost);
                                        trTable.parents('tr').remove();
                                    }
                                });
                            }
                        });
                    }
                });
            });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Button .remove should work only once, how can i make this happen? It spawns multiple times. For example if click that addToCart button 2 times, this remove is spawning to times in a row, i need it so that it will just once.
My problem is that i have products and i add them via this button $(‘#addToCart’).click(function () using ajax, and i have cart that is storing products. This button $(‘.remove’).click(function () should be added to each product, but this button is in #addToCart button, and when multiple products is added, $(‘remove") button is working multiple times too.Sorry for bad english

Tags:

3

Answers


  1. 0

    You can use on and off to avoid a double click.

    $(".remove").on("click", function() {
  $(".remove").off("click");
  console.log("clicked");
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="remove">Remove</button>
    Login or Signup to reply.
  2. 0

    You can simply use jQuery one to call your ajax request once per element.

    Run snippet below to see it work only once.

    $(".click-me").one("click", function() {
  console.log("clicked");
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="click-me">Remove</button>
    Login or Signup to reply.
  3. 0

    You could use offto remove the event listener after your onclick event

    $('.remove').click(
function () {$('.remove').off("click")
//...
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search