Yadalay
@Yadalay
Php, Mysql, Html, Css, Js/Jquery/Ajax, Laravel

Как написать грамотную единую ajax-пагинацию на сайте?

Доброго всем дня!
По сути, я написал единую ajax-пагинацию для сайта, но в ней есть 1 достаточно неприятный косяк. Ниже опишу подробнее.
1. К блоку пагинации я добавил новый класс - ajax-pagination.
2. С помощью jquery написал событие и функцию для работы с пагинацией.
$body.on('click', '.ajax-pagination .paginate a', function (e) {
    e.preventDefault();

    let url = $(this).attr('href'),
        $paginateBlock = $(this).closest('.list-paginated-items');

    paginationChangePage(url, $paginateBlock);
    window.history.pushState('', '', url);
});

function paginationChangePage(url, $paginateBlock)
{
    $.ajax({
        type: 'get',
        url: url,
        success: function (result) {
            $paginateBlock.html(result);

            $('html, body').animate({
                scrollTop: $paginateBlock.offset().top
            }, 500);

            $(window).off('popstate').on('popstate', function () {
                paginationChangePage(location.href, $paginateBlock);
            });
        }
    });
}

3. В методах контроллера я использую такую логику:
if (request()->ajax()) {
    return view('modules.chat.includes.messages', [
        'messages' => $messages
    ])->render();
} else {
    return view('modules.chat.index', [
        'messages' => $messages,
        'title' => 'Чат'
    ]);
}

Вроде бы, всё нормально и правильно, но у данного способа есть 1 неприятный косяк, который воспроизводится только в мобильных браузерах (по крайней мере, на десктоп не удалось воспроизвести). Подробнее о косяке с примером:
1. Зашёл на страницу чата.
2. Кликнул по 2 странице, потом по 3 и т.д.
3. Решил нажать ссылку на сайте для перехода на главную страницу.
4. Передумал, нажимаю кнопку "назад" в браузере.
5. Меня перекидывает на прошлую страницу, но выводится не она, а лишь тот кусок, который подгружался при смене страницы в пагинации. В итоге, разумеется, белая страница с только этим куском кода.
То есть мобильный браузер (юзал chrome последней версии) так, видимо, кеширует сильно, что выводит на прошлую страницу то, что отдавало в request()->ajax(). После раздумий пришёл к выводу, что использовать 1 метод для отображения страницы и только куска с сообщениями при помощи request()->ajax() - это совсем не вариант. Поэтому нужно разделять на 2 метода: 1 будет отвечать за отображение всей страницы, а 2 - для подгрузки нужных сообщений. Это сделать совсем не проблема, если бы мне нужна была ajax-пагинация в 1-2 местах, но её я использую много где, из-за чего хочется сделать единую ajax-пагинацию, которую я смогу прикручивать в любое место сайта.
  • Вопрос задан
  • 87 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы