Нуждаюсь в помощи

[wolfio]

Здравствуйте.
В целях саморазвития колхозю сайт, попутно изучая все что это требует, и периодически психуя на вселенную.
с JavaScript у меня совсем печально. Пытаюсь сделать спойлер, который отправит запрос серверу, получит от него данные, и выведет в виде внутренней таблички.
И в общем-то мой код не работает. я не понимаю почему. Может кто помочь?

собственно, страничка(кусочек), с кнопкой "отклики(спойлер)":

<div class="b_ad" id="30">
            <div class="b_ad_right_side">
                <p><a href="https://test.test/$$$ACC_ID-$$$NICKNAME/">$$$NICKNAME</a></p>
            </div>
            <div class="b_ad_left_side">
                <div class="b_ad_text">
                    <p>$$$TEXT_MESS </p>
                </div>
                <div class="b_ad_time_cr" style="float: right">
                    <p>$$$TIME_AGO</p>
                </div>
                <button class="b-button_right_">Откликнуться</button>
                
                <a href="#" class="b_button_responds">
                    <span>Отклики(спойлер)</span>
                </a>
                <div class="spoiler-block"></div>
            </div>
        </div>

и мой код-колхоз на нее и вывод данных:

$(document).ready(function () {
    $(".b_button_responds").click(function () {
        alert("Respind_id!:"+ $(this).closest("div.b_ad").prop("id"));
        $.post("RespondsList"
            , {AdId: $(this).closest("div.b_ad").prop("id")}
            // , function (data) {alert("::responds_list::\t"+$(this).closest("div.b_ad").prop("id"))}
            , function (data) {
                $(this)
                    .parent()
                    .find('.spoiler-block')
                    .html(data);
                alert(data); 
                $(this).on('click','b_button_responds',function (e) {
                    $(this)
                        .parent()
                        .find('.spoiler-block')
                        .html(data)
                        .slideToggle(300);
                })
            }
        )
    });
});

Данные в алерте выводятся, но не загружаются в блок. Почему так несправедливо устроен мир?
По-возможности, подскажите, можно ли как-то упростить код на js? Цель, сделать кнопку, при клике по которой будет отправляться запрос на получение данные на сервер, и показать эти данные в виде таблицы, нне обновляя страничку (у меня на отдельном примере это получается, но по клику страничка всеровно вверх перескакивает).

[рони]

wolfio,
возможный вариант ...

$(function () {
    $(".b_ad").on("click", ".b_button_responds", function (event) {
        event.preventDefault();
        var parent = $(this).parent(),
        id = parent[0].id,
        spoiler = parent.find('.spoiler-block'),
        text = spoiler.text();
        if(text) spoiler.slideToggle(300);
        else $.post("RespondsList"
            , {AdId: id}
            , function (data) { spoiler.html(data);})
            })
});

[wolfio]

Рони, почему-то не работает ваш код
может я где-то в другом месте ошибку допустил? как ее выловить?

[рони]

как ее выловить?

смотреть консоль

[wolfio]

рони,
Поможете понять?

я не очень разбираюсь в консоли, пока что.
Ошибка возникает при клике. Сам скрипт валидный, и ошибок при загрузке страницы не имеет. Ошибка ведет куда-то в библиотку jQuery, как я понял. Но мне ни о чем не говорит. Я тут нарезал из браузера инфу.
Подскажете лекарство какое-нибудь?

https://i.paste.pics/3B2O0.png?trs=5...2d35dd1c8afd73

[рони]

wolfio,
неверно указал выше parent!

$(function () {
    $(".b_ad").on("click", ".b_button_responds", function (event) {
        event.preventDefault();
        var parent = event.delegateTarget,
        id = parent.id,
        spoiler = $('.spoiler-block', parent),
        text = spoiler.text(),
        str = "загрузка...";
        if(text) spoiler.slideToggle(300);
        else if(text != str){
        spoiler.text(str);
        $.post("RespondsList"
            , {AdId: id}
            , function (data) { spoiler.html(data);})
        }
            })
});

[рони]

wolfio,
смотрите пост №6 снова

[wolfio]

рони,
Просто красота)
большое спасибо)

[wolfio]

А можете подсказать еще такой вопрос подсказать, философо-канонический: как более правильно в вэб разработке принято делать, если ответ от сервера нужно из текста превратить в таблицу например? Обращать его на сервере в таблицу, или же на клиенте? или это не является важным критерием "..внокода"?)

[рони]

wolfio,
как вам удобнее или данные в виде JSON отправить на клиент и там сформировать таблицу или сразу html. чаще это строка JSON.