#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
.