Блог

Главная - Вопросы по программированию - Div показывает / скрывает после второго щелчка с помощью ajax и django

Div показывает / скрывает после второго щелчка с помощью ajax и django

#ajax #django-views #django-templates

#ajax #django-просмотры #django-шаблоны

Вопрос:

я хочу иметь простую функциональность в своем приложении. Когда пользователь нажимает на кнопку «Показать ответы», появится div с классом «ответы», затем кнопка изменится на «скрыть ответы», и при повторном нажатии на нее div исчезнет. Я близок, но проблема в том, что когда я нажимаю на кнопку в первый раз (после перезагрузки страницы), кнопка меняется на «скрыть», данные не отображаются. Пока я не нажму на него во второй раз, он не отобразится, а затем у меня будут данные и кнопка «показать ответы». Другими словами: вызов ajax не работает в первый раз, данные печатаются правильно даже при первом щелчке. Пожалуйста, помогите мне понять, что не так.

ajax

 $(document).ready(function () {
    $(".showReplies").click(function () {
        let id = $(this).attr('id');
        $.ajax({
            url: $(this).attr("data-href"),
            type: 'get',
            success: function (data) {
                console.log(data);
                $(`#${id}.replies`).html(data);
                let text = $(`#${id}.showReplies`).text()
                if (text == 'Show replies') {
                    text = 'Hide replies'
                    $(`#${id}.showReplies`).text(text)
                } else {
                    text = 'Show replies'
                    $(`#${id}.showReplies`).text(text)
                }
            }
        })
    });
});

шаблон

 <button type="button" id="{{ comment.id }}" class="showReplies btn btn-link" data-href="{% url 'comment_replies' comment.id %}">Show replies</button>
    <div class="replies" id="{{ comment.id }}" style="margin-left: 30px;">
        {% include 'blog/comment_replies.html' %}
    </div>

URL-адреса

 path('comment_replies/<int:comment_id>/', comment_replies, name='comment_replies')

Вид

 def comment_replies(request, comment_id):
    comment = Comment.objects.get(id=comment_id)
    replies = Reply.objects.filter(comment=comment)
    context = {'replies': replies}
    return render(request, 'blog/comment_replies.html', context)

Комментарии:

1. можете ли вы создать оповещение внутри своего if и посмотреть, отображается ли это оповещение?

2. Я должен сказать, что я удалил строку $( # $ {id}.replies ).toggle(); справа над ajax, и она все еще переключалась, но когда я запускаю код сегодня, он остановился, и когда я вернул строку, переключение перестало работать, и div отображается при первом нажатии…

3. data имеет .showReplies ли текст, к которому вы обращаетесь здесь $('#${id}.showReplies').text() ?

4. Нет, это не так, у него есть содержимое шаблона с ответами

5. ваш код мне кажется нормальным. Может быть проблема в другом месте. Также убедитесь, что text имеет правильное значение.

Ответ №1:

Хорошо, @Swati нашел решение:

 $(document).ready(function () {
    $(".showReplies").click(function () {
        let id = $(this).attr('id');
        $.ajax({
            url: $(this).attr("data-href"),
            type: 'get',

            success: function (data) {
                console.log(data);

                $(`#${id}.replies`).html(data);
                let text = $(`#${id}.showReplies`).text();
                console.log(text);
                if (text == 'Show replies') {
                    text = 'Hide';
                    $(`#${id}.showReplies`).text(text);
                    $(`#${id}.replies`).show();
                } else {
                    text = 'Show replies';
                    $(`#${id}.showReplies`).text(text);
                    $(`#${id}.replies`).hide();
                }
            }
        })
    });
});

Мне пришлось добавить $( # $ {id}.replies ).show(); и $( # $ {id}.replies ).hide(); в if и else .