0

Как исправить дублирование при автоматической пагинации? Есть шаблон 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 %}
5
  • Это не аякс. Что приходит с бэка, то и рисуется. Скорее всего в запросе вам надо передавать номер страницы, бэк должен отбирать данные в заданном диапазоне и возвращать "новые", а не все записи. У вас получается, что вы отрисовали исходные, допустим, 10 элементов, и при аякс запросе получили их-же + что то новое(возможно). Аякс, все что получил, добавляет в контейнер
    – SwaD
    Commented 27 мар. в 16:57
  • Переписал js код, но дублирование осталось. Commented 29 мар. в 17:25
  • Покажите нам его, может там есть что интересное. Так же вы проверяли, что приходит на фронт с бэка по вашему запросу? Уверены, что там нет записей, которые дублируются?
    – SwaD
    Commented 29 мар. в 17:31
  • С учетом приведенного JS, ищите проблему на бэке. JS только добавляет данные, не удаляя предыдущие значения. Если есть дубли, они приходят с бэка
    – SwaD
    Commented 29 мар. в 17:45
  • Исправил заметку вопроса, добавил исправленный JS, представление и шаблон, из которого выводится Json. Добавил условие {% if not forloop.first and post.author != request.user %}, теперь текущего аккаунта, с которого осуществлена авторизация, исчезли дубликаты. Не могу догнать как прописать, чтобы для других пользователей тоже исчезли дубликаты. Commented 29 мар. в 18:08

1 ответ 1

0

Всё, я понял в чём дело, дважды загружал первую страницу , поэтому и отображались дубликаты первых 5 постов. вместо:

var nextPageUrl = '/load-posts/?page=' + loadedPage;

нужно было прописать

var nextPageUrl = '/load-posts/?page=' + (loadedPage + 1);

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.