Блог n0wheremany

В связи с множественными вопросами касательно этого модуля, решил написать данную новость. Для разъяснение что же такое AJAX навигация и почему у некоторых не хочет работать. Также приведу некоторые примеры и решения некоторых тривиальных задач на примере данного сайта.

Итак основная информация находится в Википедии.
AJAX, Ajax (от англ. Asynchronous javascript and XML — «асинхронный javascript и XML») — подход к построению интерактивных пользовательских интерфейсов веб-приложений, заключающийся в «фоновом» обмене данными браузера с веб-сервером. В результате, при обновлении данных, веб-страница не перезагружается полностью, и веб-приложения становятся более быстрыми и удобными. Т. е. Элементы страницы DOM (объектная модель документ) уже сформированы, и при AJAX мы лишь изменяем содержимое страницы. С непониманием данного факта, в основном, и возникают проблемы при настройке модуля.

Объясню что же происходит при обновлении страницы. Java Script Скрипт получает данные от PHP о содержании запрашиваемой страницы с учетом данных в mainajax.tpl, и заменяет на странице внутри {content} (элемент с id равным dle-content).

Основная проблема - с недонастройкой шаблонов, у которых используется aviable.
Пример недонастроенного кода:

[aviable=main]
{custom ...}
[/aviable][not-aviable=main]
{content}
[/not-aviable]

Результат - контент не меняется, из-за чего? Из-за того что нет элемента dle-content, т. к. он прописан внутри {content}.
Как исправить? Нужно его прописать таким образом (причем не только в main.tpl, но и в mainajax.tpl)
main.tpl

[aviable=main]
<div id="dle-content">
{custom ...}
</div>
[/aviable][not-aviable=main]
{content}
[/not-aviable]

mainajax.tpl

[aviable=main]
{custom ...}
[/aviable][not-aviable=main]
{content}
[/not-aviable]

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

Итак main.tpl - Необходимо обернуть тэги в элементы DOM

<div id="mainspeedbar">[not-aviable=main]{speedbar}[/not-aviable]</div>

и в mainajax.tpl делаем так

<script type="text/javascript">
$('#mainspeedbar').html('[not-aviable=main]{jspeedbar}[/not-aviable]');
</script>

В итоге получаем: На главной нет speedbar, но на остальных он есть

Появился новых тэг {jspeedbar} - этот тэг работает только в такой конструкции: $(...).html('{jspeedbar}'); - также можно сделать и для других блоков - {jlogin}, {jsort}, {jtopnews}, {jcalendar} и тп. Однако также можно использовать и обычные тэги {login}, {sort}, {topnews}, {calendar} и тп.

Немного сложнее со слайдерами, в основном структура такая:

[aviable=main]
//1
<script type="text/javascript" src=".../slider.js"></script>
//2
<script type="text/javascript">
$('#slederid').sliderinit();
</script>
<div id="slederid"></div>
[/aviable]

Итак первую строчку необходимо вставить в main.tpl, т. к. нужно загрузить функции слайдера. А вот вторую строку необходимо описать в main.tpl и в mainajax.tpl, т. к. мы переинициализуем работу слайдера. К примеру так:
В main.tpl

<script type="text/javascript" src=".../slider.js"></script>
[aviable=main]
<script type="text/javascript">
$('#slederid').sliderinit();
</script>
[/aviable]
<div id="slidid"></div>

В mainajax.tpl

<script type="text/javascript">
[aviable=main]
$('#slederid').sliderinit();
[/aviable]
[not-aviable=main]
$('#slederid').html('');
[/not-aviable]
</script>

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

Теперь хотелось бы затронуть один якобы баг модуля: при заходе на url, по которому возникает ошибка, к примеру "К сожалению, данная страница для Вас не доступна, возможно был изменен ее адрес или она была удалена. Пожалуйста, воспользуйтесь поиском.", при переходе на другие страницы по AJAX сообщение остаётся.
Как исправляем? пишем такое:
в main.tpl

<div id="maininfo">{info}</div>
{content}

в mainajax.tpl

<script type="text/javascript">
$('#maininfo').html('');
</script>
{content}

Теперь нововведение - AJAX навигация форм: Т. к. не для всех форм на сайте возможно реализовать AJAX навигацию - их необходимо указывать самумо вручную, делается это в main.tpl так:

<script type="text/javascript">
$(document).ready(function(){
  $('form#news_set_sort').ajaxForm(); // Для сортировки
  $('form#entryform').ajaxForm(); // Для добавления новости
  $('form#dlemasscomments').ajaxForm(); // Для массовых действия над комментариями
  $('form#dle-comments-form').ajaxForm(); // Для отправки ПМ
  $('form#fullsearch').ajaxForm(); // Для полного поиска
  $('form#fastsearch').ajaxForm(); // Для быстрого поиска
});
</script>

Но можно сделать проще:

<script type="text/javascript">
$(document).ready(function(){
  $('form').ajaxForm(); // Для всех форм
});
</script>

И протестировать все формы - какие не походят исключить так

<script type="text/javascript">
$(document).ready(function(){
  $('form:not(form#fastsearch,form#fullsearch)').ajaxForm(); // Для всех форм, кроме полного и быстрого поиска
});
</script>

Так вроде все аспекты изложил. Пишите если есть вопросы или неточности, постараюсь поправить.
Т. к. ещё не протестирована работа с рекламой, её пока тут не выкладываю.

Фитчи:
Как изменить содержимое окна прогресса?
в main.tpl вставляем такое

<script type="text/javascript">
$('#pjax-loading-layer-text').html('Html Текст окна');
</script>