Rezer.net » Контент » Новости » AJAX загрузка страниц категорий новостей (как в твиттере)
Хак

AJAX загрузка страниц категорий новостей (как в твиттере)

(хаки для DLE)
Совместимость: DLE: 7.x DLE: 8.x DLE: 9.x Рейтинг:
 (голосов: 23)
Добавлен: 10 мая 2013 (13:34) Просмотров: 356183
Автор: REZER (http://www.rezer.net/) Комментариев: 13
Для того, чтобы посмотреть все версии хака, нажмите по следующей ссылке: Показать список версий
Плагин будет работать почти на всех версиях движка DLE. Он не изменяет код самого ядра, а устанавливается только в шаблон, не имеет ни одного файла в дистрибутиве, и при обнолении движка не возникнет проблем.

Суть работы модуля заключается в следующем:
  • Вы зашли на страницу, где выводится список новостей с навигацией.
  • После полной загрузки страницы начинает работать специальный javascript код.
    Код ищет на странице элемент навигации, и всё существующее заменяет на одну ссылку "Загрузить ещё".
  • При нажатии на эту самую кнопку, посылается AJAX запрос к сайту, идёт подгрузка полной версии следующей страницы.
  • После получения кода страницы, идёт выборка основного контента (из тега {content}).
  • После выборки контента, он добавляется к текущему, тем самым показывая новые новости.
  • Также плагин автоматически меняет адрес в строке браузера, чтобы при обновлении страницы, пользователь видел последние полученные новости.
  • Если движок посылает ошибку 404 или другую, тем самым кнопка становится не активной и на ней написано "Новостей больше нет".

Для установки плагина достаточно открыть файл шаблона main.tpl и перед закрывающимся тегом "</head>" вставить:

[aviable=main|cat]
<script language="javascript" type="text/javascript">

    var navAjaxUrlIE = /*@cc_on!@*/false;
    var lastExtNewsUrl = "";
    var lastExtNewsPage = 0;
    var mainClassNewsNavigation = "basenavi"; // navigation.tpl - название класса основного элемента
    function loadExtNews(){
        
        if( lastExtNewsUrl )
            {
                var url = lastExtNewsUrl.replace( "/page/" + lastExtNewsPage, "/page/" + ( lastExtNewsPage + 1 ) ) + "";
                lastExtNewsPage++;
            }
                else
            {
                var url = location.href;
                url = url.replace( new RegExp( "#(.*)", "g" ), "" ) + "";
                
                var RegExpC = new RegExp( "/page/([0-9]+)", "g" );
                if( url.match( RegExpC ) )
                    {
                        var page = url.match( /page\/[0-9]{1,50}/ ) + "";
                        page = parseInt( page.match( /[0-9]{1,50}/ ) );
                        var newPage = page + 1;
                        url = url.replace( "/page/" + page, "/page/" + newPage ) + "";
                        lastExtNewsPage = newPage;
                    }
                        else
                    {
                        url = url + "page/2/";
                        lastExtNewsPage = 2;
                    }
            }
        
        lastExtNewsUrl = url;
        
        $( "#dle-content ." + mainClassNewsNavigation + " a" ).html( "<span>Идёт загрузка...</span>" );
        
        $.ajax({
            url: url,
            data: "",
            success: function( data ){
                
                //var parser = new DOMParser();
                //var doc = parser.parseFromString( data, "text/html" );
                //$( "#dle-content ." + mainClassNewsNavigation ).remove();
                //$( "#dle-content" ).html( $( "#dle-content" ).html() + doc.getElementById( "dle-content" ).innerHTML );
                
                var cont = $( data ).find( "#dle-content" );
                $( "#dle-content ." + mainClassNewsNavigation ).remove();
                $( "#dle-content" ).html( $( "#dle-content" ).html() + $( cont[0] ).html() );   
                $( "#dle-content ." + mainClassNewsNavigation ).html( "<a href=\"#\" onclick=\"loadExtNews(); return false;\" class=\"loadExtNews\"><span>Загрузить ещё</span></a>" );
                
                if( !navAjaxUrlIE ) history.pushState( {}, "", lastExtNewsUrl );
            },
            error: function( xhr, ajaxOptions, thrownError ){
                // Можно по номеру ошибки определять, но в любом случае ответ не тот, показывать нечего, страхуемся )))
                $( "#dle-content ." + mainClassNewsNavigation ).html( "<a href=\"#\" onclick=\"return false;\" class=\"loadExtNews\"><span>Новостей больше нет</span></a>" );
            },
            dataType: "html",
            type: "POST"
        });
    }
    $( document ).ready(
        function(){
            $( "#dle-content ." + mainClassNewsNavigation ).html( "<a href=\"#\" onclick=\"loadExtNews(); return false;\" class=\"loadExtNews\"><span>Загрузить ещё</span></a>" );
        }
    );
</script>
[/aviable]

Если у вас имеются проблемы с кодировкой, то вам необходимо в файл .htaccess, который находится в корне сайта добавить следующую строчку:

#Кодировка сайта, если у вас другая, то поменяйте
AddDefaultCharset windows-1251

Ну и небольшие настройки модуля:

[aviable=main|cat] - собственно настраиваете страницы, на которых будет работать навигация (можно например добавить на закладки, теги, архив и т.д.)
var mainClassNewsNavigation = "basenavi"; - название класса основного элемента в файле шаблона navigation.tpl

Можно также переместить код в отдельный js файл, и на странице подгружать примерно так:
    
    [aviable=main|cat]<script language="javascript" type="text/javascript" src="{THEME}/js/navigation.js"></script>[/aviable]

Скрипт был проверен в 4 браузерах последних версиях на момент публикации: Mozilla Firefox, Google Chrome, Opera, Internet Explorer.

Ниже вы можете скачать файл с интрукцией по установке.

podgruzka-st...kak-v-tviter.zip
Вес: 1,9 Kb, cкачиваний: 482

Рекомендовать:

Комментарии  Rss комметарии

Автор  Vladimir, 29 мая 2013 00:38
Не выходит. В чём причина непойму даже
Ответить
Автор  Vladimir, 29 мая 2013 00:45
Норм, только работает в мозиле больше нигде и кодировка ломает всё
Ответить
   
Автор  REZER, 29 мая 2013 20:59
Поправил, сейчас работает во всех браузерах.
На счёт кодировки, также дополнена инструкция.
Ответить
Автор  Сергей из Омска, 1 июля 2013 22:39
А можно сделать так:
Первый раз мы кликаем по надписи или картинке, а все последующие разы будут загружаться автоматически?.. Было бы очень кстати...
Спасибо!
Ответить
Автор  venrom, 19 августа 2013 19:12
Можно как-то оставить еще и обычную навигацию по страницам?
Ответить
Автор  lxmk, 18 июля 2014 04:57
Так в твиттере же не нужно каждый раз кликать по кнопки, там происходит автоматическая загрузка контента, как только скроллинг опускается вниз.
А почему вы здесь пишите - как в твиттере?
Ответить
Автор  HolySong, 16 декабря 2014 19:45
Ребят не совсем понятно, я скрипт подключил. стоит на главной и в категориях как я понял должно работать. Теперь нужно как-то править файл navigation.tpl? или что делать? в категориях оно не работает
Ответить
   
Автор  ., 29 марта 2015 04:58
Нужно добавить в navigation.tpl линк с классом, указанным mainClassNewsNavigation
Ответить
   
Автор  djgelius, 24 мая 2015 10:08
можно пример написать, а то я что-то не понял
Ответить
Автор  swart, 24 июня 2015 22:30
в поиск не работает выводит пенгинацию страниц после первого нажатия.
Ответить
Автор  Елена, 16 июля 2015 06:19
Подскажите пож-та, а если мне дополнительно нужно вывести ещё подгрузку в custom что нужно дописать в коде, в данный момент отображает обычную навигацию,а не в кастоме с подгрузкой? Спасибо!
Ответить
Автор  nfjnerfj, 12 августа 2016 01:05
А можно на сайте ucoz ?
Ответить

 

Внимание! Обо всех ошибках необходимо писать на форуме (все комментарии с ошибками на сайте будут теперь удаляться).


Отправить
Авторизация Регистрация
Навигация
  Реклама
Сегодня без рекламы
  Важный опрос
Ваша версия DLE

(Ваш вариант)

   Результаты
  Последние новости
  Счётчики
Rambler's Top100
Мы принимаем
Проверить аттестат www.megastock.ru