@Togzi

Временная кнопка отмены удаления DOM элемента?

Всем доброго времени суток.
Есть таблица, связанная с SQL. При нажатии на кнопку удаления, которая есть в каждой строке, необходимо скрывать строку и на её месте создавать кнопку с обратным отсчётом и возможностью отмены действия(возвращать строку на место). В случае если кнопка отмены не была нажата, должен отправляться ajax-запрос на удаление этой записи из бд.
Перепробовал множество вариантов и пока остановился на этом, но не совсем то, что нужно.
.on('click', '.-deleteItem', function (e) {
            e.preventDefault();
            let $tr = $(this).closest('tr');
            let id = $tr.data('id');
            let tr = document.getElementById('tr' + id);
            let but = document.getElementById('but' + id);

            console.log(but);
            $tr.remove();
            let rows = $('.-itemsTable > tbody > tr');
            rows.each(function (i) {
                $(this).find('.drag-num').text(i + 1);

            });
            let is = document.getElementById('button');
            is.style = 'cursor: pointer;;display: inline-block';

            let timeleft = 29;
            let sleft = 3;
            let downloadTimer = setInterval(function(){
                if(timeleft <= 0){
                    clearInterval(downloadTimer);

                } else {
                    document.getElementById("countdown").innerHTML ="(" + Math.round(sleft) + " c)";
                }
                sleft -= 0.1;
                timeleft -= 1;
            }, 100);

            let data = {token: get_token(), id: $tr.data('id')};
            let min = 3000;
            let timer = setTimeout(time_end, min);

            function time_end()
            {
                clearTimeout(timer);
                let ist = document.getElementById('button').className.indexOf("press");
                if ( ist === -1 )
                {
                    is.style = 'display:none';
                    console.log('Deleted');
                    $.ajax({
                        url: 'orders/deleteItem/',
                        type: 'post',
                        data: data,
                        dataType: 'json',
                    }).done(function () {$tr.remove();
                        updateTotalSum();
                    }).fail(function () {
                        alert('Возникла ошибка');
                    });
                }
                else
                {
                    is.style = 'display:none';
                    console.log('Returned');
                    let profile = document.getElementById('profile');
                    console.log(tr);
                    profile.appendChild(tr);
                    rows.each(function (i) {
                        $(this).find('.drag-num').text(i + 1);

                    });
                }
            }


        })
        ;
  • Вопрос задан
  • 27 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы