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

Здравствуйте.
В целях саморазвития колхозю сайт, попутно изучая все что это требует, и периодически психуя на вселенную.
с 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);})
            })
});

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

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

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

я не очень разбираюсь в консоли, пока что.
Ошибка возникает при клике. Сам скрипт валидный, и ошибок при загрузке страницы не имеет. Ошибка ведет куда-то в библиотку 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,
как вам удобнее или данные в виде JSON отправить на клиент и там сформировать таблицу или сразу html. чаще это строка JSON.

Добрый день.
Рони, хотел бы попросить вас о помощи вновь.
Я в ходе тестирования кода, с которым вы мне помогли, понял, что не учел один нюанс: когда закрывается спойлер, то при повторном и последующем открытии я ожидал что будет формироваться новый запрос к серверу, для получения новых данных.

Вы не могли бы помочь с этим?
задача вроде бы простая, но я попробовал сам - поставил дебаг alert("sp_text:" + spoiler.text);
что за текст там записан? у меня такого кода нет.
Можете разъяснить в чем фокус тут с str переменной?
и что обозначает это логическое выражение "if(text) " ? проверка на пустоту?

Вот код, который я сделал:

$(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);
            spoiler.text("");
        }
        else if (text != str) {
            spoiler.text(str);
            $.post("RespondsList"
                , {AdId: id}
                , function (data) {
                    spoiler.html(data);
                })
        }
    })
});

Собственно я лишь добавил spoiler.text("");, для очистки, чтобы далее формировался запрос к серверу. Проблема в том, что после первого сворачивания, послеующие развертывания спойлера работают с третьего раза. Почему так?

и еще я бы хотел спросить, на далекое будущее - если я вдруг захочу сделать анимацию загрузки (крутящийся кружочек или еще что), правильно ли я понимаю, что вместо строки spoiler.text(str); мне следует вызывать эту самую анимацию?

wolfio,

$(function() {
    $(".b_ad").on("click", ".b_button_responds", function(event) {
        event.preventDefault();
        var parent = event.delegateTarget,
            id = parent.id,
            spoiler = $(".spoiler-block", parent),
            html = spoiler.html(),
            str = "загрузка...<img src='http://pampinta.com/imgs/img_loader.gif' alt=''>";
        if (html == str) return;
        if (html.trim()) spoiler.slideUp(300, function() {
            spoiler.html("")
        });
        else {
            spoiler.html(str).slideDown();
            $.post("RespondsList", {
                AdId: id
            }, function(data) {
                spoiler.html(data)
            })
        }
    })
});

Рони, я дико извиняюсь, за такое множество вопросов, но как пофиксить вот этот сдвиг блока при обратном сворачивании спойлера?
Я не знаю как это объяснить этот сдвиг, поэтому гифку сделал.


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

Стили в коде не меняются вроде бы

wolfio,
а если slideUp и slideDown заменить на hide и show;
или добавить css в строки 12 и 14

slideDown().css({position: "relative"});

или так

<style type="text/css">
  .b_ad_left_side{
       position: relative;
  }
  </style>

точнее надо смотреть на месте, где-то не хватает позиционирования или в самом блоке или выше по цепочке.