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

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


 

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

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

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

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

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

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


Коментарии

#31 5 ноября 2012 22:12 Artyom91

n0wheremany,

1. icefm.ru

Вот скрипт

<script type="text/javascript">
$(function(){
$('.hidden-comment h3').click(function(){
$('.hidden-comment-form').slideToggle();
});
$('.full-news-content img:first').hide();

});
</script>

2. Вообщем реклама обновляется, но при обновлении съезжает, реализовывал с помощью примера ниже.



<div id="catface_hide" style="display:none">[aviable=cat]{include file="engine/modules/catface.php"}[/aviable]</div>
<script type="text/javascript">
$(document).ready(function(){
$('#catface').html( $('#catface_hide').html()); $('#catface_hide').empty();
});
</script>
Публикаций: 0 Комментариев: 14 [ цитировать ]

#30 4 ноября 2012 15:16 n0wheremany

Artyom91,
1 Пишите сайт.
2 Значит какие-то скрипты не подключил


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

#29 4 ноября 2012 10:00 Artyom91

Здравствуйте, у меня на сайте при нажатии на картинку добавить комментарий выезжает форма на java скрипте. При использовании этого модуля форма не работает если переходить по сайту на аяксе, если обновить страницу работает, что делать?

Еще вопрос, как сделать рекламу от Adsense что бы она обновлялась при переходе по страницам.
Публикаций: 0 Комментариев: 14 [ цитировать ]

#28 27 октября 2012 18:29 SheFF

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

#27 26 октября 2012 10:24 n0wheremany

Electric,
Делается следующим образом
В main.tpl
<div id="catface">[aviable=cat]{include file="engine/modules/catface.php"}[/aviable]</div>

В mainajax.tpl
<div id="catface_hide" style="display:none">[aviable=cat]{include file="engine/modules/catface.php"}[/aviable]</div>
<script type="text/javascript">
$(document).ready(function(){
  $('#catface').html( $('#catface_hide').html()); $('#catface_hide').empty();
});
</script>


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

#26 30 сентября 2012 11:59 Electric

Ни как не получается выводить [aviable=cat]{include file="engine/modules/catface.php"}[/aviable] Нужно чтоб выводилось только в категориях. Вариант с display:none не нужен.
Публикаций: 0 Комментариев: 5 [ цитировать ]

#25 23 сентября 2012 13:33 Quest1984

Цитата: n0wheremany
'do=games(.*)'
не работает. Ссылки обрабатываются...
А добавить rel="nourlajax" я не могу, потому что этих ссылок около 800 шт.

Что еще можно сделать?
Публикаций: 0 Комментариев: 9 [ цитировать ]

#24 23 сентября 2012 13:16 n0wheremany

Цитата: Quest1984
Конструкция в $ADRESS_NOAJAX = array( типа
'/index.php?do=games(.*)' мне ничего не дала.

Можно прописать
'do=games(.*)'

Также можно в ссылку добавить к примеру rel="nourlajax", ссылка обработана не будет


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

#23 22 сентября 2012 14:48 Quest1984

Не смог разобраться вот с этим:

Как мне не обрабатывать переходы по всем ссылкам начинающимся с
index.php?do=games

Конструкция в $ADRESS_NOAJAX = array( типа
'/index.php?do=games(.*)' мне ничего не дала.

Т.е. у меня есть такие ссылки:
http://мойсайт.ру/index.php?do=games&a#genre=new и т.д.
Все что дальше games и сам переход на эту страницу - не должны обрабатываться вашим модулем. Как это сделать?
Публикаций: 0 Комментариев: 9 [ цитировать ]

#22 14 сентября 2012 18:06 n0wheremany

Цитата: Quest1984
Все бы хорошо, блок обновляется, но если в этом блоке есть собственные теги, например, {my_tag}, то вместо нормального отображения этого тега, отображается сам тег, т.е. не происходит его обработки. Как быть?


Никак. свои тэги не обрабатываются. Ищите способ их прописывать не в index.php либо пользуйтесь инклудом


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

#21 14 сентября 2012 17:35 Quest1984

Как обновить определённый блок (custom, include etc), при обновлении страницы?

Все бы хорошо, блок обновляется, но если в этом блоке есть собственные теги, например, {my_tag}, то вместо нормального отображения этого тега, отображается сам тег, т.е. не происходит его обработки. Как быть?
Публикаций: 0 Комментариев: 9 [ цитировать ]

#20 14 сентября 2012 14:40 n0wheremany

Почему на у странице меняется URL адрес, но не меняется контент?
На это влияет 301 редирект. Многие исправляют под хаки Алаичъ, которые он не совсем доделал, а именно не используется настройка в админке - исправление неверных ЧПУ. Выход в таких ситуациях - допиливать работу под эту настройку (т.к. при работе скрипта он её отключает) либо убирать хаки


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

#19 14 сентября 2012 14:17 Quest1984

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

#18 14 сентября 2012 14:02 n0wheremany

Как обновить определённый блок (custom, include etc), при обновлении страницы?
main.tpl
<div id="custom1">{custom ...}</div>

mainajax.tpl
<div id="custom1-hide" style="display:none">{custom ...}</div>
<script type="text/javascript">
$(document).ready(function(){
$('#custom1').html( $('#custom1-hide').html());
$('#custom1-hide').remove()
});
</script>


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

#17 22 августа 2012 17:26 pavel31

Проблема решена, причиной было отсутствие закрывающего тега в шаблоне модуля lasttopics smile
Публикаций: 0 Комментариев: 16 [ цитировать ]

#16 21 августа 2012 17:33 pavel31

n0wheremany,
Привет, у меня опять проблема :( если я этот код вставляю в файлы то у меня сразу же пропадает вывод полной ноовсти и статистики, в чем ошибка??


это в main.tpl
<div id="stroka" [not-aviable=main]style="display:none"[/not-aviable]>
<marquee scrollamount="4" onmouseover="this.stop();" onmouseout="this.start();" style="font-size:20px; bgcolor:white; height:20px; width:750px;" direction="left">
<font color="blue"><b>ДОБРО ПОЖАЛОВАТЬ НА НАШ САЙТ!</b></font>
</marquee><br>
</div>
<div id="mainslider" [not-aviable=main]style="display:none"[/not-aviable]>{include file="slider.tpl"}</div>
<div id="forumblock" [not-aviable=main]style="display:none"[/not-aviable]>{include file="engine/modules/lasttopics/block.php"}</div>
<div id="maininfo">{info}</div>
{content}

это в mainajax.tpl
<script type="text/javascript">
$('#mainspeedbar').html('{jspeedbar}');
$('#stroka').css('display', '[not-aviable=main]none[/not-aviable]');
$('#mainslider').css('display', '[not-aviable=main]none[/not-aviable]');
$('#forumblock').css('display', '[not-aviable=main]none[/not-aviable]');
$('#maininfo').html('');
</script>
{content}
Публикаций: 0 Комментариев: 16 [ цитировать ]

#15 18 августа 2012 14:23 Quest1984

n0wheremany, ну если слайдер без доп. инициализации, то в mainajax.tpl можно просто прописать:
<script type="text/javascript" src="{THEME}/js/slider.js"></script>
так?

У себя я так и прописывал, правда не для слайдера, но в целом очень похоже.

Кстати, заметил такой баг:
Заходишь в какую-либо категорию, там список новостей. Заходишь в полную новость, снизу остается этот список. Возвращаешься на главную страницу, там высвечиваются новости главной и снизу еще добавляется список из посещенной категории.

Когда этот баг проявляется, я отловить не могу. Всегда получается случайно (спонтанно), сейчас вроде все нормально...
Публикаций: 0 Комментариев: 9 [ цитировать ]

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

n0wheremany Спасибо большое все получилось wink
Публикаций: 0 Комментариев: 16 [ цитировать ]

#13 18 августа 2012 14:05 n0wheremany

Quest1984,
В целом правильно, но со слайдерами значительно сложнее т.к. там присутствует JS и его надо активировать, скажем так. Каждый слайдер со своими заморочками


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

#12 18 августа 2012 13:55 Quest1984

pavel31, вы бы получше комменты почитали и обратили свой взор на это:

В main.tpl пропишите так:

<div id="mainslider" [not-aviable=main]style="display:none"[/not-aviable] >{include file="slider.tpl"}</div>


В mainajax.tpl пропишите так:

<script type="text/javascript">
$('#mainslider').css('display', '[not-aviable=main]none[/not-aviable]');
</script>
Публикаций: 0 Комментариев: 9 [ цитировать ]