Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Все вопросы » Шаблоны (TPL) » Как сделать аякс кнопку "загрузить еще"?

Как сделать аякс кнопку "загрузить еще"?


     05.04.2020    аякс, загрузка, загрузить еще, кнопки, кнопка    Шаблоны (TPL), jQuery, Хаки, Ламерские вопросы    1299

вопрос
Добрый день.
Имеется ресурс, на котором есть определенный контент нелицензионного характера (киносайт).
Использую на нем модуль фильтра, есть необходимость именно в аякс загрузке новостей без изменения URL (для увлечения скорости загрузки контента со стороны пользователя).
К примеру, очень сильно интересует реализация кнопки "показать еще", по нажатию на которую происходит загрузка остального контента (опять же, именно без изменения в URL)
Возможно у кого то есть готовые решения/подсказка по реализации?

Ответил: Decart


В navigation.tpl вставляешь скрипт:

<script type="text/javascript">
$(document).ready(function(){
    
         $('body').on('click','#nav-load a',function(){
        var urlNext = $(this).attr('href');
        var scrollNext = $(this).offset().top - 200;
        if (urlNext !== undefined) {
            $.ajax({
                url: urlNext,
                beforeSend: function() {
                    ShowLoading('');
                },            
                success: function(data) {
                    $('#bottom-nav').remove();
                    $('#dle-content').append($('#dle-content', data).html());
                    $('#dle-content').after($('#bottom-nav'));
                    window.history.pushState("", "", urlNext);
                    $('html, body').animate({scrollTop:scrollNext}, 800);    
                    HideLoading('');
                },
                  error: function() {                
                    HideLoading('');
                    alert('что-то пошло не так');
                  }
            });
        };
        return false;
    });
    
});
</script>


и код вывода ниже:

<div class="nav-load" id="nav-load">[next-link]Загрузить еще[/next-link]</div>

1 комментарий

Shura0102
Юзер

Shura0102 - 22 февраля 2024 19:00 -

Метод рабочий, но кнопка
<div class="nav-load" id="nav-load">[next-link]Загрузить еще[/next-link]</div>

после её нажатия не исчезает, а остаётся на месте. Таким образом их на странице становиться много. Это как то можно исправить?

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы

наверх