За основу этой статьи взят текст для Drupal 6 на английском (http://viziontech.co.il/tutorial1), который был переведен на русский и адаптирован для Drupal 7.

Это пошаговое руководство покажет Вам преимущества использования AJAX в Drupal. Мы будем динамически обновлять страницу, считывая данные с сервера, без перезагрузки всей страницы в браузере. Мы попытаемся сделать это как можно проще, использую только самые базовые блоки, необходимые для выполнения AJAX. Опираясь на данное руководство, в дальнейшем Вы сможете сделать более сложную реализацию в соответствии с потребностями Вашего конкретного сайта.

Давайте начтем...... Когда-то я создал сайт электронной коммерции на Drupal 6 & Ubercart и теперь хочу для отображения продуктов использовать AJAX. Нужно, чтобы выбрав из списка категорию продуктов, пользователь получил список продуктов в этой категории.
Обратите внимание: рекомендуется, чтобы Вы были знакомы с разработкой модулей на Drupal (Оригинальное руководство можно найти здесь (анг.). Также можете посмотреть русский перевод руководства по созданию модулей в Drupal 7)

Создание “Модуля данных”

Для того чтобы предоставить данные клиенту, мы должны сначала создать модуль, который будет получать данные с сервера. Пусть наш новый модуль называется “dynamic_products”. Сначала создайте папку для него. Эта папка должна быть создана в каталоге “modules” Вашего сайта (Обычно это папка /sites/all/modules). Имя папки должно быть таким же, как и мя модуля (т.е. “dynamic_products”). Все файлы, о которых пойдет дальше речь, должны располагаться в этом каталоге. Теперь создайте файл .info для Вашего модуля. Этот файл предоставляет системе Drupal необходимую для работы модуля информацию.
Подробнее о создании файлов .info можно посмотреть здесь (анг.) или здесь (рус.).

Содержимое нашего файла .info:

; $Id$
name = "Dynamic Products"
description = "Формирует список продуктов по категориям."
package = Примеры модулей Ajax
core = 7.x

Скопируйте приведенный выше код в новый файл и сохраните его под именем “dynamic_products.info”. (Если Вы используете кириллицу в коде, то убедитесь в том, что сохраняете файл в формате “UTF-8 без BOM”.) После создания файла .info мы создадим файл .module. Этот файл содержит код, выполняемый на стороне сервера. Т.е. рядом с файлом “dynamic_products.info” в каталоге /sites/all/modules/dynamic_products мы создаем файл “dynamic_products.module”. Давайте сразу же подключим его в файле .info с помощью строки: files[] = dynamic_products.module. В результате наш файл .info будет выглягеть следующим образом:

; $Id$
name = "Dynamic Products"
description = "Формирует список продуктов по категориям."
package = Примеры модулей Ajax
core = 7.x

files[] = dynamic_products.module

Для того чтобы сделать обращение к серверу и доставить какие-то данные, сделаем хук меню, который будет использоваться для перехвата вызова AJAX. В качестве хука меню будем использовать следующую функцию:

<?php
function dynamic_products_menu() {

 

$items = array();

 

$items['products/get'] = array(
   
'title' => 'Dynamic Products',
   
'page callback' => 'dynamic_products_get_by_category_id',
   
'access arguments' => array('access dynamic_products content'),
   
'type' => MENU_CALLBACK
 
);

  return

$items;
}
?>

В результате Drupal буде перехватывать все обращения к “http://ваш_сайт.ru/?q=products/get” или http://ваш_сайт.ru/products/get и вызывать функцию обратного вызова dynamic_products_get_by_category_id.

Теперь необходимо учесть разрешения на доступ к нашему модулю. Для этого мы используем хук hook_permission()

<?php
function dynamic_products_permission() {
   return array(
'access dynamic_products content');
}
?>

Подробнее об установке разрешений смотрите здесь (анг.) или здесь (рус.).

Теперь самое время создать функцию обратного вызова, которая будет возвращать данные с сервера. В данном руководстве мы создадим для этого простой список продуктов. На реальном сайте такие данные могут быть выведены с помощью View или каким-либо другим способом, на Ваше усмотрение.

<?php
function dynamic_products_get_by_category_id($cat_id){
 
$items = '';
  switch(
$cat_id){
    case
12:
    
$items = '<ul><li>Product 1</li><li>Product 2</li></ul>';
     break;
    case
20:
    
$items = '<ul><li>Product 3</li><li>Product 4</li></ul>';
     break;
  }
// создание объекта JSON. Объект будет содержать свойство с именем “products” которое задается переменной $items.
 
return drupal_json_output(array('products'=>$items));
  exit;
}
?>

Наша функция обратного вызова принимает один параметр ($cat_id). В зависимости от его значения возвращаются разные списки. Функция может иметь столько параметров, сколько нам нужно. Drupal передает параметры в функцию через URL обращения к ней.

Как Вы помните, мы уже создали хук меню (dynamic_products_menu) и настроили наш модуль на перехват запросов к “http://ваш_сайт.ru/products/get”. Для того чтобы передать идентификатор (ID) категории в нашу функцию обратного вызова, мы просто добавляем его к запрашиваемому URL в строк адреса. Так например, если мы хотим в качестве идентификатора категории использовать значение 12, то просто формируем следующий URL “http://ваш_сайт.ru/products/get/12”.

Мы закончили с нашим файлом “dynamic_products.module”, не забудьте его сохранить.

Создание файла javascript

Теперь мы создадим файл javascript, который на клиентской стороне будет вызывать ajax. Создайте новый файл в каталоге модуля и назовите его “dynamic_products.js”. Следующий код задает обработку щелчка мыши по одному из html-элементов на нашей странице.

// $Id$
(function($){
Drupal.behaviors.dynamic_products =  {

attach: function (context, settings) {
      $('a.categoryLink:not(.categoryLink-processed)', context).click(function () {
  
// Эта функция будет выполняться после того, как ajax запрос на сервер был выполнен успешно
    var updateProducts = function(data) {
      // Параметр "data" является объектом JSON. Свойство “products” является списком товаров, который возвращается с сервера в ответ на запрос ajax.
      $('#divProducts').html(data.products);
    }
    $.ajax({
      type: 'POST',
      url: this.href, // Which url should be handle the ajax request. This is the url defined in the <a> html tag
      success: updateProducts, // The js function that will be called upon success request
      dataType: 'json', //define the type of data that is going to get back from the server
      data: 'js=1' //Pass a key/value pair
    });
    return false;  // return false so the navigation stops here and not continue to the page in the link
      }).addClass('categoryLink-processed');
}
}
})(jQuery);

Скопируйте этот код в новый файл и сохраните его под именем “dynamic_products.js”. Файл js готов.

Подключение файла javascript

В седьмой версии Drupal уже нет необходимости подключать скрипт функцией drupal_add_js(), используя для этого хук инициализации модуля hook_init. Мы просто добавляем в файл .info строку scripts[] = dynamic_products.js. Окончательный вид файла .info показан ниже:

; $Id$
name = "Dynamic Products"
description = "Формирует список продуктов по категориям."
package = Примеры модулей Ajax
core = 7.x

files[] = dynamic_products.module
scripts[] = dynamic_products.js

Теперь можно включить наш модуль на странице "admin/build/modules".

Создаем html-страницу для тестирования

Несмотря на то, что мы создали хук меню для перехвата обращений вида "http://ваш_сайт.ru/products/get/*", наш код не будет работать, если ввести этот url в строке адреса. Дело в том, что наш JS настроен на события щелчков мышью по ссылкам с классом "categoryLink". Создайте новую страницу Drupal и вставьте в неё следующий код:

<div id="”topDiv”">
    <a class="categoryLink" href="/products/get/12">Cat. 1</a>
    <a class="categoryLink" href="/products/get/20">Cat. 2</a>
</div>
<div id="divProducts">&nbsp;</div>

Здесь два блока DIV. Верхний включает в себя две ссылки для наших категорий. Когда происходит щелчок по одной из этих ссылок, выполняется запрос к серверу, и содержимое ответа (список продуктов этой категории) загружается в нижний блок.

Рубрики: 

Ярлыки: