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

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


 

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

19-03-2012, 01:04 n0wheremany Комментарии (51) Просмотры (17261)
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>

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

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

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

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


Коментарии

#51 27 февраля 2014 22:43 cefgroup

как сделать что бы комментарии от вконтакте были только на главной странице, пытался всеми способами что описаны выше, не помогает... помогите пожалуйста
Публикаций: 0 Комментариев: 1 [ цитировать ]

#50 16 февраля 2014 17:13 serega1994s

n0wheremany,
спасибо. действительно[aviable] конечно работает. а вот [category] нет. он его видит но отображает все неверно. это возможно поправить?
Публикаций: 0 Комментариев: 8 [ цитировать ]

#49 16 февраля 2014 13:42 n0wheremany

serega1994s,
почитай комменты. на основе speedbar можно сделать


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

#48 16 февраля 2014 11:48 serega1994s

Не подскажите как можно сделать что бы определенные шаблоны перезагружались?
А именно, чтобы работали теги [aviable] [category] и т.д. Здесь написано про контент в этих тегах. А как сделать что бы теги работали в пунктах меню?
Публикаций: 0 Комментариев: 8 [ цитировать ]

#47 5 января 2014 05:21 imoto

При авторизации нажатием на кнопку Войти выходит окошко ошибки "SyntaxError: Unexpected token :" При этом если перезагрузить страницу, то авторизация успешна и отображается панель пользователя.
В чем может быть проблема?
Публикаций: 0 Комментариев: 1 [ цитировать ]

#46 5 января 2014 04:25 Remind

При авторизации нажатием на Вход - выходит окно с ошибкой "SyntaxError: Unexpected token :", при этом если нажать ОК и обновить страницу, то вход произведен успешно.
Как быть с данной проблемой ?
Публикаций: 0 Комментариев: 0 [ цитировать ]

#45 4 декабря 2013 22:36 BoJIk

Как убрать AJAX навигацию в smartphone шаблоне???
Публикаций: 0 Комментариев: 1 [ цитировать ]

#44 9 июля 2013 00:35 theBeknazar

У меня такая проблема...

Я использовал разные шаблоны для категорий и нужно было в main.tpl
Дать стили для шаблонов категорий в таком виде, использую тег ДЛЕ [category]:

[not-aviable=main]
[category=1,8]<ul class="grid cs-style-1" style="overflow: hidden;">[/category]
[category=2]<ul class="grid cs-style-2">[/category]
[category=3]<ul class="grid cs-style-5">[/category]
[category=4]<ul class="grid cs-style-4" style="overflow: hidden;">[/category]
{content}
[category=1-4,8]</ul>[/category]
[/not-aviable]


И в mainajax.tpl задал такой же параметр. И после перехода не видит не читает тег [category] в общем нету стилей.

А когда убираю [category] работает.
Публикаций: 0 Комментариев: 7 [ цитировать ]

#43 2 июня 2013 16:27 kirov

У меня такая проблема, в main стоят банеры выведены через "Рекламные материалы"

к примеру {banner_1} выводится только на главной,{banner_2} в 1 и 2 категории и т.д.

Если зашел на сайт на главную появляется {banner_1}, при переходе в категорию 2 {banner_1} остается а {banner_2} не появляется.

Что не делал как не пробовал не получается, помогите пожалуйста.
Публикаций: 0 Комментариев: 6 [ цитировать ]

#42 30 марта 2013 06:08 Zlodar

Если нажать Ctrl+Enter, то не выйдет отправить уведомление о грамматической ошибке!
Большая просьба указать, как это реализовать.
Публикаций: 0 Комментариев: 8 [ цитировать ]

#41 6 марта 2013 08:57 Ali-man

я новичок в этом, кое как разобрался и сделал, всё работало прекрасно, спустя час, снова всё кашой стало... хотя я ничего не трогал.
Как такое возможно ?...
Пытался сюда скинуть то что прописывал в мейне и в мейнажаксе, пишет слишком длинный комментарии... В аське не могу достучаться до вас. Написал в личку на dle-faq.ru
Публикаций: 0 Комментариев: 17 [ цитировать ]

#40 28 января 2013 09:45 n0wheremany

Цитата: Слава
Проблеме заключается в том что переходя по ссылки например
сай.ру/категория/новость.хтмл
отображаются коментарии и форма добавления коментарий, после чего переходя по страницам, это форма остается на всех страницах, пока не перезагрузишь страницу.

Она у вас в main.tpl выкинута чтоли? по идее в mainajax.tpl надо её убирать


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

#39 26 января 2013 13:46 Слава

Помогите исправить положения.
Проблеме заключается в том что переходя по ссылки например
сай.ру/категория/новость.хтмл
отображаются коментарии и форма добавления коментарий, после чего переходя по страницам, это форма остается на всех страницах, пока не перезагрузишь страницу.
Публикаций: 0 Комментариев: 3 [ цитировать ]

#38 17 января 2013 18:13 Слава

n0wheremany.
Ок я нашел как сделать через инклюд пхп вот по этой ссылки www.makak.ru/2011/09/22/kak-dobavit-kod-sape-v-dle-9-4 а далее как Вы мне сегодня писали про спидбар, но все равно не получается.
Получается что у меня есть сейчас вот такой код {include file="engine/modules/mod_sape.php"} как дальше быть, сами ссылки выводятся при перегрузке страниц, но когда "гуляешь" по сайту ссылка не обновляется.
Публикаций: 0 Комментариев: 3 [ цитировать ]

#37 17 января 2013 17:07 n0wheremany

Слава,
Любые тэги, которые вы сами добавили в index.php - работать не будут. Ищите другой способ их выводить, к примеру через inlude php файла


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

#36 17 января 2013 12:07 Слава

Люди помогите реализовать код сапы. Дело в том что у меня при переходе по страницам на ajax ссылки бирж не перезагружаются, т.е стоит одна и та же ссылка которая была загружена при в ходе на сайт. Автор скрипта сказал что нужно инклюдить, я сделал так. Создал tpl занес туда {sape_ links} и {mainlink_code} что делать дальше, что куда писать и какие коды. Выручайте.
Публикаций: 0 Комментариев: 3 [ цитировать ]

#35 16 декабря 2012 22:23 n0wheremany

DRON136,
У меня работает.
Все конечно интересно, но такие малоинформативные комментарии прошу не оставлять, лишний раз напоминаете о своём образовании


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

#34 16 декабря 2012 15:29 DRON136

Кнопки социальных сетей не показываются при аякс переходах.
Публикаций: 0 Комментариев: 1 [ цитировать ]

#33 7 декабря 2012 17:10 hatchees

timurtt, в ссылке target="_blank" Пропиши
Публикаций: 0 Комментариев: 12 [ цитировать ]

#32 26 ноября 2012 06:39 timurtt

c rss ссылкой не дружит жму и показывает SyntaxError: Unexpected token <
Публикаций: 0 Комментариев: 10 [ цитировать ]