AJAX загрузка страниц категорий новостей (как в твиттере) » Techno-Co — Всё для вебмастера, для создание сайтов с нуля. {title}

Компактный хак, для создания AJAX загрузки страниц на вашем сайте.Плагин будет работать почти на всех версиях движка DLE. Он не изменяет код самого ядра, а устанавливается только в шаблон, не имеет ни одного файла в дистрибутиве, и при обнолении движка не возникнет проблем.

На 9,8 полет нормальный.

Суть работы модуля заключается в следующем:

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

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


[aviable=main|cat]


    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( "Идёт загрузка..." );

        $.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( "Загрузить ещё" );

                if( !navAjaxUrlIE ) history.pushState( {}, "", lastExtNewsUrl );
            },
            error: function( xhr, ajaxOptions, thrownError ){
                // Можно по номеру ошибки определять, но в любом случае ответ не тот, показывать нечего, страхуемся )))
                $( "#dle-content ." + mainClassNewsNavigation ).html( "Новостей больше нет" );
            },
            dataType: "html",
            type: "POST"
        });
    }
    $( document ).ready(
        function(){
            $( "#dle-content ." + mainClassNewsNavigation ).html( "Загрузить ещё" );
        }
    );

[/aviable]

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


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

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


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

Можно также переместить код в отдельный js файл, и на странице подгружать примерно так:

    [aviable=main|cat][/aviable]
[b]Скрипт был проверен в 4 браузерах последних версиях на момент публикации: [color=#CC6600]Mozilla Firefox, Google Chrome, Opera, Internet Explorer[/color].[/b]