Ajax подгрузка новостей по кнопке или при скролле

redissx · 30 ноября 2018

8 часов назад, Shohxusrav сказал:

Здравствуйте!

У вас отличный хак. Но есть вопрос. Если новости показывает в main.tpl с помощью тег {content} работает без проблем.

А я пользуюсь с тег {custom}. Потому что мне нужно выводить определенный новости с категориями.

Мой вариант:

{custom category="5-6" template="shortstory" aviable="global" from="0" limit="20" order="date" navigation="yes"}

Как можно разобраться что хак работал тоже с {custom} тегам.

Спасибо!

Оберните свой кастом в <div id="dle-content"></div>

Изменено 30 ноября 2018 пользователем redissx

Shohxusrav · 30 ноября 2018

2 часа назад, redissx сказал:

Оберните свой кастом в <div id="dle-content"></div>

Большой спасибо! Помог.

kind_whale · 1 декабря 2018

Здравствуйте.

Отличный хак, спасибо.

Вопрос по существу:

У меня, в navigation.tpl, перед навигацией {pages}, на сайте загружается рекламный блок Яндекс.Директ:

Соответственно, в navigation.tpl добавлен код:

<div id="yandex_ad2_{page_now}"></div>

<script type="text/javascript">
        (function(w, d, n, s, t) {
            w[n] = w[n] || [];
            w[n].push(function() {
                Ya.Direct.insertInto(XXXXXX, "yandex_ad2_{page_now}", {
                    site_charset: "windows-1251",

............
</script>

<!-- стандартная навигация -->

В шаблон к рекламному блоку добавлена переменная с текущей страницей - {page_now}.

Так вот, на первой странице код Директа отрабатывается, реклама показывается.

На последующих подгруженных ajax-страницах эти рекламные div пустые.

Т.е.

id="yandex_ad2_1" - есть реклама

id="yandex_ad2_2" - пусто и т.д.

Вопрос: как это поправить?

Как подгружать рекламу в последующие, после первого div?

Пишут, что:

Цитата

На AJAX-сайтах с помощью асинхронного кода можно настроить обновление содержимого рекламного блока при изменении контента страницы или при другом указанном событии. Для этого необходимо повторно вызывать функцию:
Ya.Direct.insertInto( XXXX, "yandex_ad", { /*… Настройки вашего блока … */}) ;

Так вот, как и где повторно вызывать эту Ya.Direct.insertInto() ?

Заранее благодарю за ответ.

redissx · 2 декабря 2018

16 часов назад, kind_whale сказал:
Здравствуйте.

Отличный хак, спасибо.

Вопрос по существу:

У меня, в navigation.tpl, перед навигацией {pages}, на сайте загружается рекламный блок Яндекс.Директ:

Соответственно, в navigation.tpl добавлен код:
<div id="yandex_ad2_{page_now}"></div>

<script type="text/javascript">
        (function(w, d, n, s, t) {
            w[n] = w[n] || [];
            w[n].push(function() {
                Ya.Direct.insertInto(XXXXXX, "yandex_ad2_{page_now}", {
                    site_charset: "windows-1251",

............
</script>


В шаблон к рекламному блоку добавлена переменная с текущей страницей - {page_now}.

Так вот, на первой странице код Директа отрабатывается, реклама показывается.

На последующих подгруженных ajax-страницах эти рекламные div пустые.

Т.е.

id="yandex_ad2_1" - есть реклама

id="yandex_ad2_2" - пусто и т.д.

Вопрос: как это поправить?

Как подгружать рекламу в последующие, после первого div?

Пишут, что:

Так вот, как и где повторно вызывать эту Ya.Direct.insertInto() ?

Заранее благодарю за ответ.

1. скрипт тогда нужно помещать в маин.тпл перед </body>

2. перезапуск вставляется тут

         
                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('');
                }


                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('');
					Ya.Direct.insertInto(XXXXXX, "yandex_ad2_{page_now}", {
						site_charset: "windows-1251",
						.........
					};
                }

я не знаю как точно перезапускать, эту проблему уже решать вам.

Хотя не так все просто, {page_now}" же тоже меняется, выходит перед </body> не пойдет, возможно скрипт прямо в navigation.tpl в #bottom-nav, но тогда надо обязательно чтобы длешные скрипты подключались перед ним, то есть аккуратнее с {jsfiles}. Также выходит что подгрузку можно только при клике.

В общем, придется вам поломать голову.

Изменено 2 декабря 2018 пользователем redissx

kind_whale · 2 декабря 2018

Благодарю за ответ. Буду думать над реализацией.

kind_whale · 2 декабря 2018

Да, действительно не всё так просто.

Попробовал изменить код вызова на RTB, почитал "Показ рекламы в лентах с бесконечной прокруткой"

https://yandex.ru/support/partner2/web/products-rtb/partner-code.html

Пробовал добавлять код и в navigation.tpl и Вашу функцию:

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('');
					
		            Ya.Context.AdvManager.render({
		                blockId: "R-A-XXXXX-4",
		                renderTo: "yandex_rtb_R-A-XXXX-4-{page_now}",
		                pageNumber: {page_now},
		                async: true
		            });

                }

Но не работает.

На первой странице первый рекламный блок отображается. Его код в браузере:

<div id="yandex_rtb_R-A-XXX-4-1">код рекламы</div>
<script type="text/javascript">
		    (function(w, d, n, s, t) {
		        w[n] = w[n] || [];
		        w[n].push(function() {
		            Ya.Context.AdvManager.render({
		                blockId: "R-A-XXX-4",
		                renderTo: "yandex_rtb_R-A-XXX-4-1",
		                pageNumber: 1,
		                async: true
		            });
		        });
		        t = d.getElementsByTagName("script")[0];
		        s = d.createElement("script");
		        s.type = "text/javascript";
		        s.src = "//an.yandex.ru/system/context.js";
		        s.async = true;
		        t.parentNode.insertBefore(s, t);
		    })(this, this.document, "yandexContextAsyncCallbacks");
		</script>

А код остальных блоков не содержит <script>...</script>:

<div id="yandex_rtb_R-A-XXX-4-2"></div>
(нет <script>)

Вопрос: как для второго и последующих блоков добавить js-код вызова <script>...</script>?

Спасибо заранее.

Изменено 2 декабря 2018 пользователем kind_whale

redissx · 3 декабря 2018

18 часов назад, kind_whale сказал:

Да, действительно не всё так просто.

Попробовал изменить код вызова на RTB, почитал "Показ рекламы в лентах с бесконечной прокруткой"

https://yandex.ru/support/partner2/web/products-rtb/partner-code.html

Пробовал добавлять код и в navigation.tpl и Вашу функцию:


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('');
					
		            Ya.Context.AdvManager.render({
		                blockId: "R-A-XXXXX-4",
		                renderTo: "yandex_rtb_R-A-XXXX-4-{page_now}",
		                pageNumber: {page_now},
		                async: true
		            });

                }

Но не работает.

На первой странице первый рекламный блок отображается. Его код в браузере:


<div id="yandex_rtb_R-A-XXX-4-1">код рекламы</div>
<script type="text/javascript">
		    (function(w, d, n, s, t) {
		        w[n] = w[n] || [];
		        w[n].push(function() {
		            Ya.Context.AdvManager.render({
		                blockId: "R-A-XXX-4",
		                renderTo: "yandex_rtb_R-A-XXX-4-1",
		                pageNumber: 1,
		                async: true
		            });
		        });
		        t = d.getElementsByTagName("script")[0];
		        s = d.createElement("script");
		        s.type = "text/javascript";
		        s.src = "//an.yandex.ru/system/context.js";
		        s.async = true;
		        t.parentNode.insertBefore(s, t);
		    })(this, this.document, "yandexContextAsyncCallbacks");
		</script>

А код остальных блоков не содержит <script>...</script>:


<div id="yandex_rtb_R-A-XXX-4-2"></div>
(нет <script>)

Вопрос: как для второго и последующих блоков добавить js-код вызова <script>...</script>?

Спасибо заранее.

Если бы я знал точный ответ, то сразу бы и ответил. Но я его не знаю. Перезапуск функций или если что-то нужно сделать, то это ставится здесь

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('');
					/* здесь мы выполняем все свои действия после того, как все загрузилось и добавилось */
                }

Как именно это сделать с рекламой я не знаю и за вас не сделаю. Попробуйте обратиться в тех. поддержку рекламной сети, им виднее, как это сделать.

kind_whale · 3 декабря 2018

Хорошо. Спасибо за помощь.

footballhd · 4 декабря 2018

redissx у меня картинки не загружаются из-за этого скрипта.

Что нужно сделать, чтоб срабатывал и этот скрипт и фотографии тоже появлялись?

redissx · 6 декабря 2018

В 04.12.2018 в 15:14, footballhd сказал:

<img src="{THEME}/images/no_foto.gif" data-src="{fullimage-1}" alt="">

redissx у меня картинки не загружаются из-за этого скрипта.

<script>
function init() {
var imgDefer = document.getElementsByTagName('img');
for (var i=0; i<imgDefer.length; i++) {
if(imgDefer.getAttribute('data-src')) {
imgDefer.setAttribute('src',imgDefer.getAttribute('data-src'));
} } }
window.onload = init;
</script>

Что нужно сделать, чтоб срабатывал и этот скрипт и фотографии тоже появлялись?

Не из-за этого скрипта, а потому что в принципе так работают скрипты. Все что связано с манипуляцией с DOM нужно перезапускать. Где вписать перезапуск написано чуть выше.

footballhd · 6 декабря 2018

redissx

Как сделать так чтоб в тегах тоже загружались так новости?

redissx · 6 декабря 2018

5 часов назад, footballhd сказал:

redissx

Как сделать так чтоб в тегах тоже загружались так новости?

По идее так

[aviable=main|cat|tags]
<div class="bottom-nav ignore-select" id="bottom-nav">
	    <div class="nav-load" id="nav-load">[next-link]Загрузить еще[/next-link]</div>
    
    <!-- сюда можете вставить дополнительно обычную навигацию -->
    
</div>
[/aviable]
	[not-aviable=main|cat|tags]
<!-- обычная навигация -->
[/not-aviable]

footballhd · 6 декабря 2018

redissx

Нет так не работает. Я уже пробовал делать так.

[aviable=cat|tags]
<div class="bottom-nav ignore-select" id="bottom-nav">
    <div class="nav-load" id="nav-load">[next-link]Загрузить еще[/next-link]</div>
</div>
[/aviable][not-aviable=cat|tags]{pages}[/not-aviable]

В такой ситуации просто показывают столько новостей сколько на 1 странице. Дальше ничего не происходит. Пишет что идет загрузка, но так можно ждать долго.

redissx · 7 декабря 2018

21 час назад, footballhd сказал:
redissx

Нет так не работает. Я уже пробовал делать так.
[aviable=cat|tags]
<div class="bottom-nav ignore-select" id="bottom-nav">
    <div class="nav-load" id="nav-load">[next-link]Загрузить еще[/next-link]</div>
</div>
[/aviable][not-aviable=cat|tags]{pages}[/not-aviable]
В такой ситуации просто показывают столько новостей сколько на 1 странице. Дальше ничего не происходит. Пишет что идет загрузка, но так можно ждать долго.

Загрузка начинает идти, но что-то ее останавливает. Смотрите консоль браузера. Думаю, перезапуск функции вы вставили, а саму функцию на странице тегов потеряли.

footballhd · 7 декабря 2018

redissx

Спасибо! Я наколдовал с тегами и не заметил проблему с навигацией

Shohxusrav · 13 декабря 2018

В 30.11.2017 в 15:30, redissx сказал:
Приветствую. Для ajax подгрузки новостей существует множество плагинов с кучей разных настроек. Но если вам требуется только подгрузка и ничего более, то предлагаю не грузить лишнего и воспользоваться этим небольшим решением.

Загрузка при клике по кнопке

В итоге мы получим это

1. В navigation.tpl вашего шаблона
<div class="bottom-nav ignore-select" id="bottom-nav">
	    <div class="nav-load" id="nav-load">[next-link]Загрузить еще[/next-link]</div>
    
    
    
</div>
2. В конец css файла вашего шаблона
.bottom-nav {clear: both; padding-top: 60px;}
.nav-load {text-align: center;}
.nav-load a {padding: 0 60px; display: inline-block; height: 60px; line-height: 60px; border-radius: 30px;
font-weight: 700; font-size: 18px; background-color: #2980b9; color: #fff;}
.nav-load a:hover {background-color: #00a652; color: #fff;}
.nav-load span {display: none;}
3. В конец js файла вашего шаблона
$(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;
    });
    
});
Автоматическая загрузка при скролле

В итоге по мере прокрутки к нижним новостям следующие новости будут автоматически загружаться.

1. В navigation.tpl вашего шаблона
<div class="bottom-nav ignore-select" id="bottom-nav">
	    <div class="nav-load" id="nav-load">[next-link]Загрузить еще[/next-link]</div>
    
</div>
2. В конец css файла вашего шаблона
.bottom-nav {clear: both; opacity:0;}
3. В конец js файла вашего шаблона
$(document).ready(function(){
    
    var loadLink = $('#nav-load'), loadStatus = 0;
    $(window).scroll (function () {
        if ($(this).scrollTop() + $(this).height() + 50 > loadLink.offset().top) {
            var urlNext = loadLink.find('a').attr('href');
            if (urlNext !== undefined && loadStatus == 0) {
                loadStatus = 1;
                $.ajax({
                    url: urlNext,
                    beforeSend: function() {
                        ShowLoading();
                    },            
                    success: function(data) {
                        $('#bottom-nav').remove();
                        $('#dle-content').append($('#dle-content', data).html()).after($('#bottom-nav'));
                        window.history.pushState("", "", urlNext);
                        HideLoading();
                        loadStatus = 0, loadLink = $('#nav-load');
                    }
                });
            } else {
                loadLink.remove();
            };
        };
    });  
    
});
здесь в строке
        if ($(this).scrollTop() + $(this).height() + 50 > loadLink.offset().top) {
цифра 50 - это расстояние до нижнего края новостей при котором начинается загрузка. То есть вы можете немного заранее загружать, пока юзер не доскроллил до конца, меняя эту цифру. Например, 250 - новости будут загружаться раньше.

Также замечу, что рекомендуется использовать загрузку только на главной и в категории во избежание проблем. Обычно я делаю так в navigation.tpl
[aviable=main|cat]
<div class="bottom-nav ignore-select" id="bottom-nav">
	    <div class="nav-load" id="nav-load">[next-link]Загрузить еще[/next-link]</div>
    
    
    
</div>
[/aviable]
	[not-aviable=main|cat]

[/not-aviable]

Еще раз здравствуйте!

А как можно сделать что бы рекламный баннеры показался между контентом после каждый 20 новость.

Мой конф:

<div id="dle-content">{custom category="11,13-20" template="shortstory" aviable="main" from="0" limit="20" order="date" navigation="yes"}</div>

Спасибо!

Изменено 13 декабря 2018 пользователем Shohxusrav

redissx · 13 декабря 2018

9 часов назад, Shohxusrav сказал:

А как можно сделать что бы рекламный баннеры показался между контентом после каждый 20 новость.

Вставить можно в shortstory.tpl с помощью тега newscount. А будет ли показываться - это уже другой вопрос.

Mark456 · 19 декабря 2018

Установил первый пример по клику на кнопку. Но при нажатии на "загрузить еще" просто перекидывает на след страницу, а не подгружает ее. Крч, работает как обычная кнопка "далее". Подскажите что не так может быть?

redissx · 20 декабря 2018

17 часов назад, Mark456 сказал:

Установил первый пример по клику на кнопку. Но при нажатии на "загрузить еще" просто перекидывает на след страницу, а не подгружает ее. Крч, работает как обычная кнопка "далее". Подскажите что не так может быть?

Значит не срабатывает скрипт. Раз не срабатывает, значит жс ошибка. Раз ошибка, значит ошиблись в установке. Вероятно, скрипты движка ({headers}, {jsfiles}) находятся ниже по коду страницы, чем скрипт погрузки.

Ошибку можете посмотреть в консоли браузера.

jeka66 · 30 декабря 2018

В 20.12.2018 в 15:42, redissx сказал:

Значит не срабатывает скрипт. Раз не срабатывает, значит жс ошибка. Раз ошибка, значит ошиблись в установке. Вероятно, скрипты движка ({headers}, {jsfiles}) находятся ниже по коду страницы, чем скрипт погрузки.

Ошибку можете посмотреть в консоли браузера.

такая же ситуация, при установке первого варианта, работает как кнопка "далее". Если установить второй вариант, то проблем нет, все работает и правильно подгружает.

Подскажите где копать? (сам не спец, но навык небольшой есть)

redissx · 2 января 2019

В 30.12.2018 в 17:50, jeka66 сказал:

такая же ситуация, при установке первого варианта, работает как кнопка "далее". Если установить второй вариант, то проблем нет, все работает и правильно подгружает.

Подскажите где копать? (сам не спец, но навык небольшой есть)

Смотрите консоль браузера, там все пишет.

jeka66 · 5 января 2019

В 02.01.2019 в 18:57, redissx сказал:

Смотрите консоль браузера, там все пишет.

ставил эксперименты на локальной версии (12.1-1251), после обновления до 13.1-utf8, проблема исчезла. Возможно некорректно скачал с хостинга файлы перед экспериментом... В общем все работает сейчас нормально.

Возник вопрос: после достижения последней новости, кнопка "ЗАГРУЗИТЬ ЕЩЕ" становится неактивная, но остается. Есть возможность ее отключать по достижении конца списка?

Изменено 5 января 2019 пользователем jeka66

jeka66 · 5 января 2019

1 час назад, jeka66 сказал:

ставил эксперименты на локальной версии (12.1-1251), после обновления до 13.1-utf8, проблема исчезла. Возможно некорректно скачал с хостинга файлы перед экспериментом... В общем все работает сейчас нормально.

Возник вопрос: после достижения последней новости, кнопка "ЗАГРУЗИТЬ ЕЩЕ" становится неактивная, но остается. Есть возможность ее отключать по достижении конца списка?

вопрос решился полной очисткой кеша на сайте и в браузере...

alexpsp · 19 марта 2019

DLE 13.2 с использованием lazy загрузки. При нажатие на "Загрузить ещё", картинки не грузятся.

Gameer · 20 марта 2019

12 часов назад, alexpsp сказал:

DLE 13.2 с использованием lazy загрузки. При нажатие на "Загрузить ещё", картинки не грузятся.

$(window).on('ajaxComplete', function() {
  setTimeout(function() {
    $(window).lazyLoadXT();
  }, 50);
});

После этого скрипта.

https://github.com/ressio/lazy-load-xt#ajax

Ajax подгрузка новостей по кнопке или при скролле

Рекомендованные сообщения

redissx 251

Ссылка на сообщение

Поделиться на других сайтах

Shohxusrav 0

Ссылка на сообщение

Поделиться на других сайтах

kind_whale 0

Ссылка на сообщение

Поделиться на других сайтах

redissx 251

Ссылка на сообщение

Поделиться на других сайтах

kind_whale 0

Ссылка на сообщение

Поделиться на других сайтах

kind_whale 0

Ссылка на сообщение

Поделиться на других сайтах

redissx 251

Ссылка на сообщение

Поделиться на других сайтах

kind_whale 0

Ссылка на сообщение

Поделиться на других сайтах

footballhd 1

Ссылка на сообщение

Поделиться на других сайтах

redissx 251

Ссылка на сообщение

Поделиться на других сайтах

footballhd 1

Ссылка на сообщение

Поделиться на других сайтах

redissx 251

Ссылка на сообщение

Поделиться на других сайтах

footballhd 1

Ссылка на сообщение

Поделиться на других сайтах

redissx 251

Ссылка на сообщение

Поделиться на других сайтах

footballhd 1

Ссылка на сообщение

Поделиться на других сайтах

Shohxusrav 0

Ссылка на сообщение

Поделиться на других сайтах

redissx 251

Ссылка на сообщение

Поделиться на других сайтах

Mark456 0

Ссылка на сообщение

Поделиться на других сайтах

redissx 251

Ссылка на сообщение

Поделиться на других сайтах

jeka66 0

Ссылка на сообщение

Поделиться на других сайтах

redissx 251

Ссылка на сообщение

Поделиться на других сайтах

jeka66 0

Ссылка на сообщение

Поделиться на других сайтах

jeka66 0

Ссылка на сообщение

Поделиться на других сайтах

alexpsp 30

Ссылка на сообщение

Поделиться на других сайтах

Gameer 310

Ссылка на сообщение

Поделиться на других сайтах

Присоединяйтесь к обсуждению