Доброго всем дня!
По сути, я написал единую 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-пагинацию, которую я смогу прикручивать в любое место сайта.
