В чем ошибка аjax удаления комментария?

Question

[Iossarian]

Изучаю ajax и решил переделать на своем тестовом сайте удаление комментариев. Собственно данный код удаляет комментарий только после перезагрузки страницы. Подскажите, где моя ошибка? Может быть скрипт удаления не получает id коммента до перезагрузки?

<input type="hidden" value="<?=$comment['id'];?>" name="comId">
<button class="btn btn-sm btn-outline-light"  id="remove_<?=$comment['id']?>">Удалить</button>

$(".delete .btn").on('click', function(){
        var commentId = this.id.slice(7); 

        $.post("../delete.php", {id : commentId}, function( serverResponse ){
            if( serverResponse === 'ok' ) { 
                $this.hide();
            }
        })
    })

if($_SERVER[ 'REQUEST_METHOD' ] === 'POST') {
if( is_numeric($_POST['id']) ) {
    $commentId = (int)$_POST['id'];
    $sqlDel = 'DELETE FROM comments WHERE id = ' . $commentId;
    $result = $db->query($sqlDel);
    }
}

Comments

[edward_freedom]

для чего это? var commentId = this.id.slice(7)
Ты сразу из в атрибутах не можешь сохранить

[Iossarian]

edward_freedom, ну я только учусь и в примере увидел такое исполнение. На работе отрицательно это не сказывается. Суть вопроса остается актуальной.

[edward_freedom]

Iossarian, то что вопрос актуальный это понятно. Тебя учат не говнокодить, а ты продолжаешь стоять на своем. Ты можешь даже так сделать, событие на кнопку повесить
onClick="callFunction(<?=$comment['id'];?>)"

[Iossarian]

edward_freedom, для проверки срабатывания условия я добавил в блок

if( serverResponse === 'ok' ) { 
                alert('hi');
            }

Окно не вылетает и я так понимаю, что условие не выполняется. Тем не менее код из php скрипта срабатывает, не доходит лишь до исполнения функции serverResponse. Если вовсе функцию и проверку убрать, то alert вылетит, но комментарий без обновления все равно не пропадет. Из БД все сразу при клике удаляется.

[Андрей]

сервер не возвращает тебе ответ. Попробуй в цикле return 'ok'
P.S. Я тоже не шибко умен=)

Answer 1

[Iossarian]

Проблема была в классах кнопки. То ли из-за пробелов в нем, то ли из-за неточного указания класса.

Answer 2

[Илья]

Говоря "удаляет комментарий только после перезагрузки страницы" Вы имеете ввиду, что блок комментария пропадает со страницы только после перезагрузки?
Если так, то дело в следующем.
Замените код:

var commentId = this.id.slice(7); 

        $.post("../delete.php", {id : commentId}, function( serverResponse ){
            if( serverResponse === 'ok' ) { 
                $this.hide();
            }
        })

на следующий код:

var $this = $(this);
        var commentId = this.id.slice(7); 

        $.post("../delete.php", {id : commentId}, function( serverResponse ){
            if( serverResponse === 'ok' ) { 
                $this.hide();
            }
        })

У Вас $this не определен.

Comments

[Iossarian]

Все равно не помогает. Я вижу только как пропадает border у нажатой кнопки. Давайте я покажу полностью блок вывода комментариев, может быть ошибка где-то там.

<span class="commenting">Комментарии (<?=$count[0]['count'];?>)</span>
                <? foreach ($comments as $comment) : ?>
                <div class="comments">

                    <div class="row comtext">

                        <div class="comname">
                            <?=$comment['name'];?>
                            <br>
                            <?=formatTime($comment['date']);?>
                        </div>

                        <div class="comtent">
                            <?=$comment['text'];?>
                        </div>

                        <div class="delete">
                            <button class="btn btn-sm btn-outline-light"  id="remove_<?=$comment['id']?>">Удалить</button>
                        </div>

                    </div>
                </div>
                <? endforeach;?>

И в скрипте заменил $(".delete .btn") на $(".сomments .btn") так как, как я понял, первый параметр - блок, который должен удалять при выполнении. Или я не прав?

[Илья]

$(".сomments .btn").on('click', function(){
        var $currentComment = $(this).parents('.сomments');
        var commentId = this.id.slice(7); 

        $.post("../delete.php", {id : commentId}, function( serverResponse ){
            if( serverResponse === 'ok' ) { 
                $currentComment.hide();
            }
        })
    })

[Iossarian]

К сожалению, но срабатывает все также после обновления страницы.

Answer 3

[Андрей]

<div class="comments_<?= $comment['id']?>">
//тут код
</div>

$('body').on('click', '.btn', function () {
        var commentId = this.id.slice(7);
        $.ajax({
            type: "POST",
            url: "/export/post",
            data: {
                id: commentId
            },
            success: function (data) {
                if(data === 'ok'){
                    $(".comments_" + commentId).remove();
                } else {
                    console.log('Все плохо');
                }
            }
        })
    });

Сервер:

if($_SERVER[ 'REQUEST_METHOD' ] === 'POST') {
            if( $id = is_numeric($_POST['id']) ) {
                return 'ok';
            }
}