1. Документация
  2. Для разработчика сайта
  3. Файлы шаблона
  4. Различные статьи, касающиеся разработки шаблонов
  5. Вывод отдельного блока
  6. Ajax — обновление контента без перезагрузки страницы

Простые примеры использования Ajax

Общий пример

Ниже приведен самый общий пример использования Ajax.

test.tpl 
<?php
    # Подключение файла blox.ajax.js в заголовке страницы 
    Blox::addToHead(Blox::info('cms','url').'/assets/blox.ajax.js');

    # Кнопка управления
    echo "<span onclick='Blox.ajax(\"templates/src.htm\", \"dst\");'>Заменить</span>";
?>

dst.tpl 
<?php
    . . .
    # Контейнер назначения
    echo "<div id='dst'>Содержимое по умолчанию</div>";
    . . .
?>

src.htm (источник контента) 
Этот html-код будет вставлен<br />
в элемент <i>dst</i><br />
блока с шаблоном <i>dst.tpl</i>.

В данном примере источник выдает статичный контент. На практике для генерации контента лучше использовать php-файлы. Однако, если в этом php-файле нужно обращаться к базе данных или сессии, то придется писать скрипты для подключения базы данных и сессии, а также учесть другие мелочи (в частности, учесть особенности кодировки UTF-8).

В таких случаях в качестве источника контента лучше использовать обычный блок, о чем читайте ниже.

Блок, как источник контента

Обратиться можно к любому блоку сайта, даже к блокам на других страницах (кроме скрытых).

test.tpl 
<?php
    Blox::addToHead(Blox::info('cms','url').'/assets/blox.ajax.js');
    echo "<span onclick='Blox.ajax(\"?block=2\", \"dst\");'>Заменить</span>";
?>

dst.tpl 
<?php
    . . .
    echo "<div id='dst'>Содержимое по умолчанию</div>";
    . . .
?>

Как использовать блок в качестве источника, читайте в статье Вывод отдельного блока.

Блок, как назначение контента
(содержимое блока заменяется другим блоком)

В приведенном ниже примере содержимое блока 24 заменяется блоком 25.

test.tpl 
<?php
    echo "<span onclick='Blox.ajax(\"?block=25\", \"24\");'>Заменить</span>";
?>

dst.tpl

dst.tdd
<?php
    # Это блок 24
    echo "Содержимое по умолчанию";
?>

<?php
    $params['dst'] = true;
?>

Чтобы назначением сделать весь блок, нужно:
  • в дескриптор шаблона добавить параметр $params['dst']=true;
  • во втором параметре функции Blox.ajax() указать номер блока, а не id

О параметре $params['dst']

  • Когда в дескрипторе шаблона объявлен параметр $params['dst'], блок при выводе автоматически помещается в контейнер вида <div id='blox-dst-24'>...</div>, где, 24 - номер блока. То есть, специально создавать элемент назначения не требуется.

  • Параметр $params['dst'] можно использовать для создания контейнера и при работе с ajax из других библиотек, например jQuery.ajax().

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

    Можно обойтись и без параметр $params['dst'], если в качестве назначения применять div из родительского блока.

  • При объявлении параметра $params['dst'], не требуется специально инициализировать функцию Blox.ajax(), это будет сделано автоматически.

Обновление блока (источник и назначение совпадают)

Наиболее простой и одновременно наиболее полезный пример применения Ajax в системе Blox CMS демонстрирует следующий код:

test.tpl 
<?php
    echo "
    <span onclick='Blox.ajax(\"?block=$block&sort[1]\");'>Сортировать</span>
    ";
?>

test.tdd 
<?php
    $types[1] = 'varchar(255)';
    $params['dst'] = true;
?>

Как Вы, наверное, заменили, у функции Blox.ajax() здесь используется только один параметр, который является обычным запросом к блоку.

Как обновлять блок с помощью Ajax

  1. В дескрипторе шаблона блока, который должен обновляться сделайте запись: $params['dst'] = true;
  2. В шаблоне управляющего блока создайте элемент, вызывающий JavaScript функцию Blox.ajax('?block=...'). В качестве параметра этой функции используйте обычный запрос* к блоку, который должен обновляться.

Одновременное обновление нескольких блоков

test0.tpl 
<?php echo "
    <span
    onclick='Blox.ajax(\"?block=2&sort[1]=asc\"); Blox.ajax(\"?block=3&pick[1]=Иванов\")'
    >Кликни</span>
"; ?>

test1.tdd

test2.tdd
<?php
    $types[1] = 'varchar(255)';
    $params['dst'] = true;
?>

<?php
    $types[1] = 'varchar(255)';
    $params['dst'] = true;
?>

Примечания

  • Во всех примерах управляющим элементов служит тег <span>, в стиль которого необходимо добавить свойства курсора. Впрочем, на практике используется другой код, приведенный в следующей статье – там используется тег <a>.