• урок
  • pantey

Drupal 8 – Создание ajax ссылки

23.06.2017

В Drupal 7 впервые появился Ajax API, который достаточно удобен и к тому же был способен расширяться путем написания своих кастомных Ajax функций. В Drupal 8 Ajax API никуда не делся, но стал более информативным и еще более гибким.

Сейчас мы с вами создадим простую Ajax ссылку, которая будет возвращать alert() с переданным параметром.

Создание Ajax ссылки можно разбить на 2 основных этапа:

  1. Создание контроллера
  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 дополнительные библиотеки.

  1. AjaxResponse – основной класс Ajax API, возвращает объект в JSON формате для Ajax запросов;
  2. 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 запрос.

Теперь смотрим, что у нас получилось

custom_ajax_link_drupal_8.png

Как видите все работает, но здесь есть еще некоторая особенность (кстати в 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);
  }

}

Далее чистим кэш сайта и смотри результат под анонимом.

custom_ajax_link_drupal_8_1.png

Как вы видите, все теперь у нас работает, на этом можно закончить.

Скачать модуль используемый в примере

Скачать

-->
Узнавай о новых статьях сайта - первым. Просто подпишись на рассылку.

Комментарии (4)

Profile picture for user Егор
Александр
26.07.2017

Здравствуйте, а откуда берется имя Pantey? В коде строку которая генерирует это имя не увидел.

Profile picture for user pantey
pantey
26.07.2017

Это значение, которое вы передаете по Ajax ссылке, в аттрибуте href после custom_ajax_link

Profile picture for user Егор
andrew
30.10.2017

опечатка

Файл маршрутизации – custom_ajax_link.rouiting.yml

Profile picture for user Егор
Дмитрий
28.01.2019

У меня почему-то по нажатию на ссылку возвращает страницу с текстом: [{"command":"alert","text":"Hello Pantey"}], а не модальное окно с надписью Hello Pantey