• урок
  • pantey

Drupal 8 – Список команд в Ajax API (Jquery команды)

27.06.2017

В предыдущей статье мы с вами научились создавать ajax ссылку, по клику по которой срабатывала Ajax команда – AlertCommand(), по сути, она является аналогом команды alert() на JS.

Сегодня мы рассмотрим, какие еще существуют команды в Ajax API из ядра Drupal 8. Данную статью разделим на 2 части, ибо помимо базовых Jquery команд, в Drupal 8 появился новый Api – Modal API, которому будет посвящена отдельная статья.

Список Jquery команд Ajax API – Drupal 8

  1. AlertCommand()
  2. AddCssCommand()
  3. AfterCommand()
  4. AppendCommand()
  5. BeforeCommand()
  6. ChangedCommand()
  7. CssCommand()
  8. DataCommand()
  9. HtmlCommand()
  10. InsertCommand()
  11. InvokeCommand()
  12. PrependCommand()
  13. RedirectCommand()
  14. RemoveCommand()
  15. ReplaceCommand()
  16. 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)

Profile picture for user 1541
Александр
10.08.2017

Не понял разницу между InsertCommand и ReplaceCommand. Объясните пожалуйста 

Profile picture for user pantey
pantey
10.08.2017

InsertCommand - используется в основном в Form API, где в качестве параметра 'method' - можно указать любой из методов Jquery, по умолчанию используется 'replaceWidth'.

ReplaceCommand - не может использовать указанный 'method' - он только заменяет содержимое

Profile picture for user 1541
Александр
10.08.2017

То есть, ниже вместо $data, мы можем не просто вставить контент, а указать какой-то jQuery метод?

InsertCommand($selector, $data, $settings) – заменяет указанный селектор на содержимое.

Где:

  • $selector – селектор, который необходимо заменить
  • $data – контент для изменения
  • $settings – дополнительные настройки
Profile picture for user pantey
pantey
11.08.2017

Нет, в data у вас всегда будет контент, метод передается отдельным параметром 'method', по сути это общая команда, которую используют другие методы:

  • AfterCommand()
  • AppendCommand()
  • BeforeCommand()
  • HtmlCommand()
  • PrependCommand()
  • ReplaceCommand()

Все из этих команд, содержат параметр 'method', который и забирает InsertCommand(), например команда AfterCommand() содержит метод 'after'. При вызове AfterCommand() далее команда передается InsertCommand(), та в свою очередь смотрит на 'method' и в зависимости от него определяет, что делать с контентом в data.

Наглядная схема работы

Но если вызвать саму InsertCommand(), то она по умолчанию просто воспользуется методом replaceWidth() Jquery. 

Profile picture for user 1541
Александр
11.08.2017

Спасибо, вроде дошло. 

Дайте пожалуйста совет где учить Drupal 8 новичку? Интересует написание кастомных модулей, темизация, препроцессы.

Документация на drupal.org сложная для понимания, да и нет толковых примеров. 

Profile picture for user pantey
pantey
11.08.2017

Здесь сложно что-то советовать, сам использую Drupal.org - в принципе он сложностей у меня не вызывает. А для просмотра на конкретных примерах, как реализовать тот или иной интерфейс, то можно использовать модуль examples, он предоставляет модули, в коде которых можно разобраться, как что работает.