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

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

-- 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 CALL ДЛЯ ПОЛУЧЕНИЯ ИНФОРМАЦИИ ИЗ БАЗЫ ДАННЫХ --

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.info идентификатор промо, он приходит как 0, а не фактический номер, поэтому он забывает информация о картах вынесена и не знаю, что удалить.

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

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
3
0
80
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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. 
        }
    });

Я не подумал об этом, я попробую, спасибо!! Только один вопрос: удаление элемента из DOM будет таким же, как '$(#promotion-container .promo${i}).remove()'? Извините, я все еще немного новичок в работе с базами данных.

MCM 22.02.2019 18:22

Другие вопросы по теме