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

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

вопрос

Добрый день.
Имеется ресурс, на котором есть определенный контент нелицензионного характера (киносайт).
Использую на нем модуль фильтра, есть необходимость именно в аякс загрузке новостей без изменения 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>

2 комментария

Юзер

Shura0102 - 2020-04-0522 февраля 2024 19:00 - #82761

Метод рабочий, но кнопка

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

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

Юзер

Graf - 2020-04-0523 октября 2024 16:03 - #82973

Вот рабочий пример со скрытие пагинатора и кнопки.
Полный код файла navigation.tpl

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

<nav class="navigation"[available=lastcomments] style="padding: 4% 8%;"[/available]>
	<div class="page_next-prev">
		<span class="page_prev" title="Предыдущая страница">
			[prev-link]<svg class="icon icon-left"><use xlink:href="#icon-left"></use></svg>[/prev-link]
		</span>
		<span class="page_next" title="Следующая страница">
			[next-link]<svg class="icon icon-right"><use xlink:href="#icon-right"></use></svg>[/next-link]
		</span>
	</div>
	<ul class="pagination">
		{pages}
	</ul>
</nav>
<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) {
                    $('.navigation').remove();
                    $('#nav-load').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>
[/not-available]

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

Реализация одного момента с ТОПом новостей

15.04.2013 Гость Все вопросы, Шаблоны (TPL)

Разделение контента по категориям

22.10.2014 readman42 Шаблоны (TPL)

Возможно ли изменять значение дополнительного поля не входя в редактирование новости?

24.03.2018 lRailgun Общие вопросы по вёрстке, Шаблоны (TPL), Стили (CSS)

Как вывести теги из СТАТИСТИКИ сайта в main.tpl?

12.07.2019 krasgaming Общие вопросы, Шаблоны (TPL)

Как почистить кеш у пользователя?

05.10.2019 Levinson Dmitriy Шаблоны (TPL), Ламерские вопросы

Последние события

Darkzone | Выбор категории для доп. поля? ⁴

Darkzone
Выбор категории для доп. поля?
Вчера, 17:08

Разъясните как вытащить id?
lutskboy | Вытащить все данные из определенного доп ... ¹

lutskboy
Вытащить все данные из определенного доп поля?
Вчера, 16:17

в adminer можно.

lutskboy | Выбор категории для доп. поля? ⁴

lutskboy
Выбор категории для доп. поля?
Вчера, 16:14

выбрать все кроме такого нет. можно с бд достать все ид через запятую и вставить в xfields.txt
js скрипт можно написать


<script>
    window.addEventListener('load', ()=> {
        $('#category').on('change', function() {
            var value = $(this).val();
            if ($.isArray(value)) {
            	ShowOrHideEx("xfield_holder_year", jQuery.inArray('1', value) != -1 || jQuery.inArray('2', value) != -1 );
            } else {
            	ShowOrHideEx("xfield_holder_year", value == 1 || value==2);
            }
        })
    });
</script>
year доп поле . 1 и 2 катег

Darkzone | Выбор категории для доп. поля? ⁴

Darkzone
Выбор категории для доп. поля?
Вчера, 14:39

Смотрите, Нужно чтоб обязательное к заполнению доп. поле при добавлении новости, выводилось во всех категориях, кроме двух. Так как количество категорий довольно большое, есть ли способ, не тыкать каждую категорию в которой будет отображаться доп.поле. Надеюсь я смог разъяснить.
lutskboy | Выбор категории для доп. поля? ⁴

lutskboy
Выбор категории для доп. поля?
Вчера, 13:52

где выводить? админка или сайт
TeraMoune | Как отключить миниатюры стандартной гале ...
TeraMoune
Как отключить миниатюры стандартной галереи Fancybox?
21-11-2024, 06:00
В файле engine/classes/fancybox/fancybox.js искать нужную инициализацию и добавлять соответствующие параметры, весь список параметров и их описание можно найти на этой странице https://fancyapps.com/fancybox/api/options/

Например: параметр Thumbs: false отключает миниатюры.
```
Fancybox.bind("[data-highslide]", {
	groupAttr: 'data-highslide',
	idle:2000,
	Thumbs: false,
	caption: (fancybox, slide) => {
		if(  slide.thumbEl && slide.thumbEl.alt ) {
			return slide.thumbEl.alt
		}
	}
});
```
derebas | Как реализовать шифрование трафика? ³

derebas
Как реализовать шифрование трафика?
18-11-2024, 16:52

Ну в теории, можно использовать src на site.com разместить прокси на site2.com а выдавать видео с site3.com, при этом прямой доступ на site3.com закрыть, отдача будет только если запрос с site2.com, таким образом палится только site2.com, НО источник потокового видео, все равно можно увидеть если захотеть, а ссылки, ну купить домен dsac-43efew-csdds.uz как пример
Gordi | Перенёс сайт - не работают кнопки, не от ... ⁸

Gordi
Перенёс сайт - не работают кнопки, не отображаются новости. Как вылечить?
18-11-2024, 14:46

я уже делал. Пользователь 1000 (это я так понимаю root) и chmod 777
Так и было...
lutskboy | Перенёс сайт - не работают кнопки, не от ... ⁸

lutskboy
Перенёс сайт - не работают кнопки, не отображаются новости. Как вылечить?
18-11-2024, 14:39

чтоб не удалять выстави права и пользователя какие там идут на файлы. .
Gordi | Перенёс сайт - не работают кнопки, не от ... ⁸

Gordi
Перенёс сайт - не работают кнопки, не отображаются новости. Как вылечить?
18-11-2024, 14:37

т.е. мне снести всё, что я уже загрузил как root, зайти под юзером и закачать снова?
Видосы в директории upload можно хоть оставить? их там 80 Гб

наверх