В предыдущей статье мы с вами научились создавать ajax ссылку, по клику по которой срабатывала Ajax команда – AlertCommand(), по сути, она является аналогом команды alert() на JS.
Сегодня мы рассмотрим, какие еще существуют команды в Ajax API из ядра Drupal 8. Данную статью разделим на 2 части, ибо помимо базовых Jquery команд, в Drupal 8 появился новый Api – Modal API, которому будет посвящена отдельная статья.
Список Jquery команд Ajax API – Drupal 8
- AlertCommand()
- AddCssCommand()
- AfterCommand()
- AppendCommand()
- BeforeCommand()
- ChangedCommand()
- CssCommand()
- DataCommand()
- HtmlCommand()
- InsertCommand()
- InvokeCommand()
- PrependCommand()
- RedirectCommand()
- RemoveCommand()
- ReplaceCommand()
- RestripeCommand()
AlertCommand($text) – выводит окно предупреждения, аналог alert() на JavaScript.
Где:
- $text – Текст сообщения
класс - \Drupal\Core\Ajax\AlertCommand;
Пример:
<?php
# Commands Ajax - AlertCommand()
$response->addCommand(new AlertCommand('Hello World'));
AddCssCommand($style) - Добавляет в <head></head> необходимые inline стили.
Где:
- $style – CSS стили
класс - \Drupal\Core\Ajax\AddCssCommand;
Пример:
<?php
# Commands Ajax - AddCssCommand()
$style = '<style>.block{background-color:#000 !important;}</style>';
$response->addCommand(new AddCssCommand($style));
AfterCommand($selector, $html, $settings = NULL) – аналог метода after() на Jquery, добавляет содержимое после указанного элемента.
Где:
- $selector – селектор элемента, после которого необходимо вставить содержимое
- $html– контент, который необходимо вставить
- $settings – дополнительные настройки
класс - \Drupal\Core\Ajax\AfterCommand;
Пример:
<?php
# Commands Ajax - AfterCommand()
$selector = '.block';
$content = 'This new content';
$response->addCommand(new AfterCommand($selector, $content));
AppendCommand($selector, $html, $settings = NULL) – аналог append() на Jquery, добавляет содержимое после всех элементов, внутри выбранного селектора.
Где:
- $selector – селектор элементов, после которых необходимо вставить содержимое
- $html– контент, который необходимо вставить
- $settings – дополнительные настройки
класс - \Drupal\Core\Ajax\AppendCommand
Пример:
<?php
# Commands Ajax - AppendCommand()
$selector = '.block';
$content = 'This new content';
$response->addCommand(new AppendCommand($selector, $content));
BeforeCommand($selector, $html, $settings = NULL) – аналог before() на Jquery, добавляет содержимое перед указанным селектором.
Где:
- $selector – селектор, перед которым необходимо вставить содержимое
- $html– контент, который необходимо вставить
- $settings – дополнительные настройки
класс - \Drupal\Core\Ajax\BeforeCommand;
Пример:
<?php
# Commands Ajax - BeforeCommand()
$selector = '.block';
$content = 'This new content';
$response->addCommand(new BeforeCommand($selector, $content, $settings = NULL));
ChangedCommand($selector, $asterisk = NULL) – добавляет маркер элементам, которые были изменены после использования Ajax, путем добавления класса CSS - ajax-changed.
Где:
- $selector – селектор, к которому будет добавлен класс CSS – ajax-changed
- $asterisk – селектор, для которого необходимо вывести абревиатуру в виде звездочки «*»
класс - \Drupal\Core\Ajax\ChangedCommand;
Пример:
<?php
# Commands Ajax - ChangedCommand()
$selector = '.header';
$asterisk = '.block';
$response->addCommand(new ChangedCommand($selector, $asterisk));
CssCommand($selector, $css) – добавляет inline стили для выбранного селектора.
Где:
- $selector – селектор, для которого необходимо применить inline стили
- $css – массив, со стилями CSS
Хочу заметить, что массив $css, должен в качестве ключа содержать название стиля, а в качестве значение его свойство
класс - \Drupal\Core\Ajax\CssCommand;
Пример:
<?php
# Commands Ajax - CssCommand()
$selector = '.block';
$css = array(
'background-color' => '#ff0000',
'color' => '#fff',
);
$response->addCommand(new CssCommand($selector, $css));
DataCommand($selector, $name, $value) – аналог метода data() на Jquery, добавляет/изменяет значение атрибута data, для указанного селектора.
Где:
- $selector – селектор, для которого необходимо изменить аттрибут дата
- $name – имя data аттрибута
- $value – значение data аттрибута
класс - \Drupal\Core\Ajax\DataCommand;
Пример:
<?php
# Commands Ajax - DataCommand()
$selector = '.custom-link';
$name = 'year';
$value = '2017';
$response->addCommand(new DataCommand($selector, $name, $value));
HtmlCommand($selector, $data, $settings) – аналог метода html() на Jquery, заменяет содержимое выбранного селектора.
Где:
- $selector – селектор, содержимое которого необходимо заменить
- $data – контент для изменения
- $settings – дополнительные настройки
класс - \Drupal\Core\Ajax\HtmlCommand;
Пример:
<?php
# Commands Ajax - HtmlCommand()
$selector = '.header';
$data = 'Destroy for creation';
$settings = '';
$response->addCommand(new HtmlCommand($selector, $data, $settings = NULL));
InsertCommand($selector, $data, $settings) – заменяет указанный селектор на содержимое.
Где:
- $selector – селектор, который необходимо заменить
- $data – контент для изменения
- $settings – дополнительные настройки
класс - \Drupal\Core\Ajax\InsertCommand;
Пример:
<?php
# Commands Ajax - InsertCommand()
$selector = '.header';
$data = '<p>Destroy for creation</p>';
$response->addCommand(new InsertCommand($selector, $data, $settings = NULL));
InvokeCommand($selector, $method, $arguments) – Используется для вызова произвольного Jquery метода.
Где:
- $selector – селектор, для которого необходимо применить метод Jquery
- $method – метод Jquery
- $arguments – свойства (аргумента) метода
класс - \Drupal\Core\Ajax\InvokeCommand;
Пример:
<?php
# Commands Ajax - InvokeCommand()
$selector = '.block';
$method = 'css';
$arguments = array('color', '#ff0000');
$response->addCommand(new InvokeCommand($selector, $method, $arguments));
PrependCommand($selector, $data, $settings) – аналог метода prepend на Jquery, вставляет содержимое внутрь указанного селектора перед все содержимым.
Где:
- $selector – селектор, для которого необходимо произвести вставку содержимого
- $data – содержимое для вставки
- $settings – дополнительные настройки
класс - \Drupal\Core\Ajax\PrependCommand;
Пример:
<?php
# Commands Ajax - PrependCommand()
$selector = '.header';
$data = 'Destroy for creation';
$response->addCommand(new PrependCommand($selector, $data, $settings = NULL));
RedirectCommand($url) – Ajax команда для редиректа, на указанный URL, использует для этого window.location.
Где:
- $url – URL адрес для редиректа
класс - \Drupal\Core\Ajax\RedirectCommand;
Пример:
<?php
# Commands Ajax - RedirectCommand()
$url = '/node';
$response->addCommand(new RedirectCommand($url));
RemoveCommand($selector) – аналог метода remove() на Jquery, удаляет элементы, которые соответствуют данному селектору.
Где:
- $selector – селектор для удаления
класс - \Drupal\Core\Ajax\RemoveCommand;
Пример:
<?php
# Commands Ajax - RemoveCommand()
$selector = '.header';
$response->addCommand(new RemoveCommand($selector));
ReplaceCommand($selector, $data, $settings) – аналог метода replace() на Jquery, заменяет селектор на указанное содержимое.
Где:
- $selector – селектор, который необходимо заменить
- $data – содержимое для замены
- $settings – дополнительные настройки
класс - \Drupal\Core\Ajax\ReplaceCommand;
Пример:
<?php
# Commands Ajax - ReplaceCommand()
$selector = '.header';
$data = '<p>This new content</p>';
$response->addCommand(new ReplaceCommand($selector, $data, $settings = NULL));
RestripeCommand($selector) – команда обновляет CSS классы для таблицы odd/even.
Где:
- $selector – селектор таблицы, для которой необходимо обновить классы
класс - \Drupal\Core\Ajax\RestripeCommand;
Пример:
<?php
# Commands Ajax - RestripeCommand()
$selector = '.table';
$response->addCommand(new RestripeCommand($selector));
Комментарии (6)
Не понял разницу между InsertCommand и ReplaceCommand. Объясните пожалуйста
InsertCommand - используется в основном в Form API, где в качестве параметра 'method' - можно указать любой из методов Jquery, по умолчанию используется 'replaceWidth'.
ReplaceCommand - не может использовать указанный 'method' - он только заменяет содержимое
То есть, ниже вместо $data, мы можем не просто вставить контент, а указать какой-то jQuery метод?
InsertCommand($selector, $data, $settings) – заменяет указанный селектор на содержимое.
Где:
Нет, в data у вас всегда будет контент, метод передается отдельным параметром 'method', по сути это общая команда, которую используют другие методы:
Все из этих команд, содержат параметр 'method', который и забирает InsertCommand(), например команда AfterCommand() содержит метод 'after'. При вызове AfterCommand() далее команда передается InsertCommand(), та в свою очередь смотрит на 'method' и в зависимости от него определяет, что делать с контентом в data.
Наглядная схема работы
Но если вызвать саму InsertCommand(), то она по умолчанию просто воспользуется методом replaceWidth() Jquery.
Спасибо, вроде дошло.
Дайте пожалуйста совет где учить Drupal 8 новичку? Интересует написание кастомных модулей, темизация, препроцессы.
Документация на drupal.org сложная для понимания, да и нет толковых примеров.
Здесь сложно что-то советовать, сам использую Drupal.org - в принципе он сложностей у меня не вызывает. А для просмотра на конкретных примерах, как реализовать тот или иной интерфейс, то можно использовать модуль examples, он предоставляет модули, в коде которых можно разобраться, как что работает.