Запомните состояние нажатой кнопки с AJAX

Question

В приложении отображаются разные карточки, информация поступает из базы данных в цикле.У меня есть возможность поставить «кнопку погашения» на карту, если пользователь может использовать ее только один раз.Когда пользователь нажимает кнопку погашения, я получаю в базе данных информацию (имя карты, clientID).Затем я сделал еще один AJAX-вызов, чтобы получить информацию из базы данных, и я хочу проверить, есть ли clientID и carndame, уже в базе данных, а затем удалить его только для этого пользователя.Я не хочу использовать localStorage или куки, потому что если пользователь удалит куки, он снова увидит карту, и я не хочу, чтобы это произошло.

- AJAX CALL TO POST -

$(`#promotion-container .promo${i} .redddButt`).click(function(e){
    e.stopPropagation();
    var esc = $.Event("keyup", { keyCode: 27 });
    $(document).trigger(esc);

    $('#deletePromo').on('click', function(){
        if (eventName && customerID)
        $(`#promotion-container .promo${i}`).remove() // this removes it but if you reload the page it appears again.
    })

    $('#just-claimed-popup2').addClass('reveal');
    var theDiv = document.getElementById("card-just-claimed");
    var content = document.createTextNode(eventName);
    theDiv.appendChild(content);

    $.ajax({
        type: 'POST',
        url: '/api/promotions_redemption',
        crossDomain: true,
        dataType: 'json',
        data: {
            eventName : eventName,
            dateReedem : dateReedem,
        }
    });
})

- AJAX ВЫЗЫВАЕТ, ЧТОБЫ ПОЛУЧИТЬ ИНФОРМАЦИЮ ИЗ БАЗЫ ДАННЫХ -

let success = function(res, eventName) {
    let cardData = res['cardData'] //cardData is the info from database

    for(i=0; i<cardData.length; i++){
        let nameEvent = cardData[i]['event_name']
        let customerID = cardData[i]['customer_id']
        let clicked_button = cardData[i]['clicked_button']

        let eventName1 = promotions['event_name'] // getting the names of all cards displayed

        if(customerID && nameEvent == eventName1){
            $(`#promotion-container .promo${i}`).remove(); // HERES THE PROBLEM
        }
}
}

$.ajax({
    type: 'GET',
    url: '/api/promotions-check',
    crossDomain: true,
    dataType: 'json',
    success: success,
});

Проблема заключается в том, что мое условие на мой вызов GET выполнено успешно, но оно забывает идентификатор карты, что означает, что когда япопробуйте console.log с идентификатором промо, он идет как 0, а не фактическое число, поэтому он забывает информацию об отображенных картах и ​​не знает, что удалить.

Что будет лучшимспособ добиться удаления карты?Нужно ли делать это и в событии click?и если да, могу ли я иметь 2 вызова Ajax в одной и той же функции?

Answer 1

Если вы измените подход, вы сможете достичь этого легче.Когда вы отправляете почтовый запрос на удаление элемента или выкупаете код в вашем случае, в случае успеха верните те же данные и при некоторых условиях просто удалите элемент из DOM.При загрузке страницы он не должен загружаться в зависимости от того, что было погашено.

Лично я не вижу смысла делать еще один GET для удаления кода, который был погашен.

$.ajax({
        type: 'POST',
        url: '/api/promotions_redemption',
        crossDomain: true,
        dataType: 'json',
        data: {
            eventName : eventName,
            dateReedem : dateReedem,
        },
        success: function(result){
        //on success, ie when the item is deleted -> delete from the DOM. 
        }
    });