Как исправить дублирование при автоматической пагинации? Есть шаблон home.html и home_list.html;
в home_list.html Json формат успешно передается, а вот Ajax хулиганит и при автоматической пагинации создает кучу повторных постов; как исправить?
Исправленное представление:
def load_posts(request):
# Получаем номер страницы из запроса
page_number = request.GET.get('page', 1) # Устанавливаем значение по умолчанию на 1
# Получаем ID пользователей, на которых подписан текущий пользователь
subscribed_user_ids = Subscription.objects.filter(subscriber=request.user).values_list('target_user', flat=True)
# Получаем все посты, на которых подписан текущий пользователь или которые он написал
all_posts = Userpublication.objects.filter(Q(author__in=subscribed_user_ids) | Q(author=request.user)).order_by('-time_create')
# Создаем объект Paginator
paginator = Paginator(all_posts, 5) # 5 постов на страницу
try:
# Получаем объекты для текущей страницы
current_page_posts = paginator.page(page_number)
except PageNotAnInteger:
# Если номер страницы не является целым числом, показываем первую страницу
current_page_posts = paginator.page(1)
except EmptyPage:
# Если номер страницы находится за пределами допустимого диапазона, возвращаем пустой ответ
return JsonResponse({'posts': [], 'next_page_url': None})
# Рендеринг HTML-разметки постов
html_posts = render_to_string('****/home_list.html', {'posts': current_page_posts})
# Формируем список постов для передачи в JSON
posts_list = [{'id': post.id, 'content': post.content} for post in current_page_posts]
# Получаем URL для следующей страницы, если она существует
next_page_url = None
if current_page_posts.has_next():
next_page_url = reverse('load_posts') + f'?page={current_page_posts.next_page_number()}'
# Возвращаем JSON-ответ с данными о постах, HTML-разметкой и URL следующей страницы
return JsonResponse({'posts': posts_list, 'html_posts': html_posts, 'next_page_url': next_page_url})
Исправленный js:
<script>
$(document).ready(function(){
var loadedPage = 1; // Переменная для хранения номера загруженной страницы
// Функция для загрузки следующей порции постов
function loadNextPage() {
// Выполняем AJAX-запрос к серверу
var nextPageUrl = '/load-posts/?page=' + loadedPage;
console.log("Next page URL:", nextPageUrl);
$.ajax({
url: nextPageUrl,
type: 'GET',
dataType: 'json',
success: function(response) {
console.log("Response from server:", response);
// Проверяем наличие данных о постах в JSON-ответе
if (response.posts) {
// Добавляем HTML с постами в конец контейнера
$('#post_contenter').append(response.html_posts);
// Проверяем, есть ли еще посты на следующей странице
if (response.next_page_url) {
// Увеличиваем значение переменной loadedPage
loadedPage++;
} else {
// Если следующей страницы нет, скрываем индикатор загрузки
$('#pagination-loader').hide();
}
} else {
// Если данных о постах нет, выводим сообщение об ошибке
console.error('Ошибка при загрузке постов: данные о постах отсутствуют в JSON-ответе');
}
},
error: function(jqXHR, textStatus, errorThrown) {
// Обрабатываем ошибку запроса, если она произошла
console.error('Ошибка при загрузке постов:', textStatus, errorThrown);
}
});
}
// Обработчик события прокрутки страницы
$(window).on('scroll', function() {
// Получаем текущую позицию скролла
var scrollPosition = $(window).scrollTop();
// Получаем высоту окна браузера
var windowHeight = $(window).height();
// Получаем высоту всего документа
var documentHeight = $(document).height();
// Если пользователь долистал до конца страницы
if (scrollPosition + windowHeight >= documentHeight) {
// Проверяем, виден ли индикатор загрузки
if ($('#pagination-loader').is(':visible')) {
// Загружаем следующую порцию постов
loadNextPage();
}
}
});
// Проверяем, нужно ли загрузить первую страницу постов при загрузке страницы
if($(window).scrollTop() + $(window).height() == $(document).height()) {
loadNextPage();
}
});
</script>
шаблон home_list:
{% block content %}
{% if posts %}
{% for post in posts %}
{% if not forloop.first and post.author != request.user %}
<!---вывод постов---->
{% endif %}
{% endfor %}
{% endif %}
{% endblock %}