Главная » FAQ » AJAX навигация: что это такое?

Полезен ли был этот мануал


 

AJAX навигация: что это такое?

19-03-2012, 01:04 n0wheremany Комментарии (51) Просмотры (20288)
AJAX навигация: что это такое? В связи с множественными вопросами касательно этого модуля, решил написать данную новость. Для разъяснение что же такое 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>

Другие новости по теме

Уважаемый посетитель

Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Добавление комментария


Коментарии

#11 18 августа 2012 13:47 pavel31

n0wheremany привет, подскажи пожалуйста вот у меня слайдер выводится с помошщью ссылки {include file="slider.tpl"} как мне его правильно прятать с других страниц кроме главной? что бы слайдер был только на главной странице.
Раньше он пряталлся с помощью тегов [aviable=main]{include file="slider.tpl"}[/aviable] но теперь после установки ajax он не прячется sad
Публикаций: 0 Комментариев: 16 [ цитировать ]

#10 17 августа 2012 18:18 n0wheremany

Код не валидный

<script type="text/javascript">
$('#mainsort').html('[not-aviable=showfull] <div id="sort"><div id="sort1"> <div id="sort2" style="text-align: center;">{jsort}</div></div> </div>[/not-aviable]'
);
</script>


--------------------
Публикаций: 69 Комментариев: 755 [ цитировать ]

#9 17 августа 2012 14:59 Quest1984

Цитата: n0wheremany
<script type="text/javascript">
$('#maincalendar').css('display', '[aviable=showfull]none[/aviable]');
</script>


И так, это получилось :)

Сортировка как не работала, так и не работает :(
Публикаций: 0 Комментариев: 9 [ цитировать ]

#8 17 августа 2012 14:43 n0wheremany

С сортировкой придётся править php
в engine/modules/function.php
найти
function news_sort($do) {

ниже там будет

    $sort .= <<<HTML
<input type="hidden" name="dlenewssortby" id="dlenewssortby" value="{$config['news_sort']}" />
<input type="hidden" name="dledirection" id="dledirection" value="{$config['news_msort']}" />
<input type="hidden" name="set_new_sort" id="set_new_sort" value="{$find_sort}" />
<input type="hidden" name="set_direction_sort" id="set_direction_sort" value="{$direction_sort}" />
<script type="text/javascript" language="javascript">
<!-- begin
...
// end -->
</script></form>
HTML;


вот <!-- begin и // end --> надо удалить


--------------------
Публикаций: 69 Комментариев: 755 [ цитировать ]

#7 17 августа 2012 13:15 Quest1984

n0wheremany, спасибо. Пока ваш пример еще не проверял. Но суть вроде та же, только здесь не выводится css свойство.

Почему не срабатывал мой пример? Вернее работал некорректно? (При переходе в полную новость, блок с модулем исчезал. А при переходе на главную - не появлялся...)

И еще, подключал сортировку новостей:

<script type="text/javascript">
$('#mainsort').html('[not-aviable=showfull]<div id='sort'><div id='sort1'><div id='sort2' style='text-align: center;'>{jsort}</div></div></div>[/not-aviable]'
);
</script>


Не работает... При нажатии на одну из ссылок сортировки - кидает вверх страницы и все. Если изменить {jsort} на {sort}, то происходит какой-то сдвиг по фазе и скорее всего где-то ошибка, потому что, вдруг, в блоке с сортировкой появляется такой знак ); и при нажатии на ссылки сортировки, также кидает наверх страницы и тишина...
Публикаций: 0 Комментариев: 9 [ цитировать ]

#6 17 августа 2012 12:27 n0wheremany

Сырой потому что некто не понимает устройство модуля и не знает JS

Почему вы считаете что main.tpl и mainajax.tpl одно и тоже? или каким-то чудом данные из main.tpl перейдут в mainajax.tpl? Напишите почему вы так считаете, я попытаюсь исправить это недопонимание или недочтение.

В вашем случае можно сделать так:
mainajax.tpl
<script type="text/javascript">
$('#maincalendar').css('display', '[aviable=showfull]none[/aviable]');
</script>


И в main.tpl так:
<div id="maincalendar" [aviable=showfull]style="display:none"[/aviablel] >
<div style="padding-top: 20px;">{include file="engine/modules/edCalendar/horizontal.php"}</div>

<div align="center" style="font-size: 11px; color: #595959; border-top:1px solid #79B1D4; padding-left: 15px; padding-top: 15px;">
Наша "пузомерка". Чтобы попасть сюда, надо проявить совсем немного активности. Смотрите фильмы или сериалы? Что-то вам понравилось, что-то нет. Ваше мнение важно для других пользователей. Помогите им сориентироваться в контенте.
</div>

<div align="center">{include file="engine/modules/utop/block.php"}</div>
</div>


--------------------
Публикаций: 69 Комментариев: 755 [ цитировать ]

#5 17 августа 2012 10:56 Quest1984

Сырой модуль, очень сырой!

- Сортировка новостей не работает! (Подключал согласно ФАКа.)
- Сторонние модули, которые выводятся на главной через разные [aviable], вообще не отображаются или отображаются некорректно.
Пример:


Это в mainajax.tpl

<script type="text/javascript">
[aviable=showfull]
$('#maincalendar').html('');
[/aviable]
</script>

Это в main.tpl

<div id="maincalendar">
[not-aviable=showfull]
<div style="padding-top: 20px;">{include file="engine/modules/edCalendar/horizontal.php"}</div>

<div align="center" style="font-size: 11px; color: #595959; border-top:1px solid #79B1D4; padding-left: 15px; padding-top: 15px;">
Наша "пузомерка". Чтобы попасть сюда, надо проявить совсем немного активности. Смотрите фильмы или сериалы? Что-то вам понравилось, что-то нет. Ваше мнение важно для других пользователей. Помогите им сориентироваться в контенте.
</div>

<div align="center">{include file="engine/modules/utop/block.php"}</div>
[/not-aviable]
</div>


Старался по разному и НИ-ФИ-ГА! Только надеюсь на помощь разработчика.

Сайт iTelepat.ru
Публикаций: 0 Комментариев: 9 [ цитировать ]

#4 15 августа 2012 22:30 n0wheremany

Почитайте внимательно эту тему.

Вы наверно из JS в main.tpl прописали, да? И почему он должен появиться в mainajax.tpl?


--------------------
Публикаций: 69 Комментариев: 755 [ цитировать ]

#3 15 августа 2012 17:47 Дмитрий

Я на странице категории под id 4 сделал выпадающие списки, option. Они стилизуются через js и css файл. Но при переходе на страницу этой категории, эти списки принимают стандартный обычный вид. После нажатия клавиши f5 становятся стилизованными. В чем проблема? Появилось это все после установки вашего модуля.
Публикаций: 0 Комментариев: 0 [ цитировать ]

#2 1 августа 2012 13:04 n0wheremany

Как сделать осветление фона страницы при навигации?

Довольно просто:
в main.tpl добавляем:
<style type="text/css" media="all">
.opacity{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
-moz-opacity: 0.6;
-khtml-opacity: 0.6;
opacity: 0.6;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$('body').bind('start.pjax',function(){ $('#dle-content').addClass('opacity') });
$('body').bind('end.pjax',function(){ $('#dle-content').removeClass('opacity') });
});
</script>


Все


--------------------
Публикаций: 69 Комментариев: 755 [ цитировать ]

#1 9 июля 2012 11:59 n0wheremany

Доработан фак под новую версию модуля, который появится сегодня - завтра


--------------------
Публикаций: 69 Комментариев: 755 [ цитировать ]