В Drupal 7 впервые появился Ajax API, который достаточно удобен и к тому же был способен расширяться путем написания своих кастомных Ajax функций. В Drupal 8 Ajax API никуда не делся, но стал более информативным и еще более гибким.
Сейчас мы с вами создадим простую Ajax ссылку, которая будет возвращать alert() с переданным параметром.
Создание Ajax ссылки можно разбить на 2 основных этапа:
- Создание контроллера
- Определение Ajax комманд
Как всегда, будем создавать кастомный модуль, назовем его custom_ajax_link
Файл - custom_ajax_link.info.yml
name: 'Custom Ajax Link'
description: 'Простая реализация Ajax ссылки'
core: 8.x
type: module
package: 'Other'
version: '8.x-1.0'
Файл маршрутизации – custom_ajax_link.routing.yml
custom_ajax_link.routing:
path: '/custom_ajax_link/{name}'
defaults:
_title: 'Custom Ajax Link'
_controller: '\Drupal\custom_ajax_link\Controller\CustomAjaxLinkController::customAjaxLinkAlert'
requirements:
_permission: 'access content'
Как вы могли заметить в файле маршрутизации, в параметр path мы передали, помимо URL, еще параметр {name}. Данный параметр будет доступен в контроллере, в качестве переменной, с именем данного параметра, в данном случае $name.
Файл контроллера - CustomAjaxLinkController.php
<?php
namespace Drupal\custom_ajax_link\Controller;
use Drupal\Core\Ajax\AjaxResponse;
use Drupal\Core\Ajax\AlertCommand;
use Drupal\Core\Controller\ControllerBase;
class CustomAjaxLinkController extends ControllerBase{
public function customAjaxLinkAlert($name) {
# New response
$response = new AjaxResponse();
# Commands Ajax
$response->addCommand(new AlertCommand('Hello ' .$name));
# Return response
return $response;
}
}
Хочу заметить, что если вы передаете дополнительный параметр в контроллер из файла маршрутизации, то не забывайте его так же определить в методе класса контролера.
Как вы видите для работы с Ajax, мы используем 2 дополнительные библиотеки.
- AjaxResponse – основной класс Ajax API, возвращает объект в JSON формате для Ajax запросов;
- AlertCommand – команда Ajax API, выводит окно предупреждения – alert();
Далее активируем модуль, но у вас естественно ничего не произойдет. Теперь нам необходимо создать саму ссылку, по клику по которой мы будем получать ответ от Ajax.
Я для этого создам обычную статью с ссылкой вида
<a class="use-ajax" href="/custom_ajax_link/Pantey">open alert for ajax link testing</a>
Хочу заметить, что класс CSS - use-ajax для ссылки, – обязателен, этим классом мы даем понять Drupal, что для данной ссылки необходимо применить Ajax запрос.
Теперь смотрим, что у нас получилось
Как видите все работает, но здесь есть еще некоторая особенность (кстати в Drupal 7 она так же присутствовала), - в данном случае - это сработает только для администратора, для анонимного пользователя Ajax не сработает, - это связано с тем, что для администратора автоматически подключается библиотека drupal.ajax, в силу использования админской части сайта, а вот для анонима, по умолчанию, нет необходимости в данной библиотеки, поэтому исправляем это дело.
Создадим файл в корне модуля – custom_ajax_link.module
<?php
/**
* @param $variables
* Implements hook_preprocess_page()
*/
function custom_ajax_link_preprocess_page(&$variables) {
$logged_in = \Drupal::currentUser()->isAuthenticated();
if(!$logged_in){
# Add libraries for anonymous
$libraries['#attached']['library'][] = 'core/drupal.ajax';
render($libraries);
}
}
Далее чистим кэш сайта и смотри результат под анонимом.
Как вы видите, все теперь у нас работает, на этом можно закончить.
Скачать модуль используемый в примере
Комментарии (4)
Здравствуйте, а откуда берется имя Pantey? В коде строку которая генерирует это имя не увидел.
Это значение, которое вы передаете по Ajax ссылке, в аттрибуте href после custom_ajax_link
опечатка
Файл маршрутизации – custom_ajax_link.rouiting.yml
У меня почему-то по нажатию на ссылку возвращает страницу с текстом: [{"command":"alert","text":"Hello Pantey"}], а не модальное окно с надписью Hello Pantey