xandeadx.ru Блог музицирующего веб-девелопера

Drupal → Простейший калькулятор на AHAH

Опубликовано в

AHAH нужен прежде всего для создания динамических форм, когда по определённым событиям в форму добавляются/удаляются элементы. Поэтому если по хорошему, то калькулятор следовало бы писать на javascript с использованием AJAX. Но если AHAH позволяет сократить код, то почему бы и не воспользоваться им, ведь по идее "ответ" это тоже элемент формы, у него даже имя есть "answer" :)

Калькулятор в работе

Регистрируем адрес по которому будет выводится калькулятор:

/**
 * Реализация hook_menu()
 */
function simplecalc_menu()
{
    $items['calc'] = array(
        'title' => 'Simple Calc',
        'page callback' => 'drupal_get_form',
        'page arguments' => array('simplecalc_form'),
        'access arguments' => array('access content'),
        'type' => MENU_CALLBACK,
    );
 
    return $items;
}

Описание формы:

/**
 * Форма калькулятора
 */
function simplecalc_form()
{
    $form['wrapper'] = array(
        '#prefix' => '<div class="container-inline">',
        '#suffix' => '</div>',
    );
 
    $form['wrapper']['number1'] = array(
        '#type' => 'textfield',
        '#size' => 3,
        '#suffix' => '+',
    );
 
    $form['wrapper']['number2'] = array(
        '#type' => 'textfield',
        '#size' => 3,
    );
 
    $form['wrapper']['answer'] = array(
        '#value' => '= <div id="answer">?</div>',
    );
 
    $form['submit'] = array(
        '#type' => 'submit',
        '#value' => 'Посчитать',
        '#ahah' => array(
            'path' => 'calc/ahah', // адрес по которому будет отправлен AJAX запрос
            'wrapper' => 'answer', // id элемента в который вернёться результат AJAX запроса
        ),
    );
 
    return $form;
}

В параметре ['#ahah']['path'] указан адрес, на который будут отправлены данные формы и который должен вернуть результат, поэтому нужно зарегистрировать его в hook_menu:

...
$items['calc/ahah'] = array(
    'title' => 'Calculate',
    'page callback' => 'simplecalc_ahah',
    'access arguments' => array('access content'),
    'type' => MENU_CALLBACK,
);
...

Последний штрих, кэлбак меню, который обрабатывает форму и возвращает ответ:

/**
 * AHAH callback
 */
function simplecalc_ahah()
{
    // по хорошему, тут мы должны достать форму из кэша, добавить новый
    // элемент (поле ответ), сохранить форму в кэш, отрендерить новый элемент
    // и вернуть его html код. Подробнее по ссылкам ниже.
 
    $number1 = isset($_POST['number1']) ? (int)$_POST['number1'] : 0;
    $number2 = isset($_POST['number2']) ? (int)$_POST['number2'] : 0;
 
    drupal_json(array('status' => true, 'data' => $number1 + $number2));
}

Исходники модуля.

Ссылки по теме:

AHAH: добавление элементов в форму (eng).
Getting going with AHAH and Drupal 6.
Cooler forms with Drupal's AHAH (Asynchronous HTML and HTTP).
Простейшая реализация AHAH в Drupal.
Что такое AHAH и что он может делать?.

Замечу, что в Drupal 7 работа с AJAX упростилась и вышла на новый уровень — Простейший калькулятор на AJAX для Drupal 7.

Написанное актуально для Drupal 6.x
Похожие записи

Комментарии RSS

Очень не хватает простых уроков по AHAH. Т.е. именно простой грамотный вывод пост-данных, без всяких приблуд типа динамического изменения формы. А то что-то туго доходит пока. :)

Спасибо за пример, кстати если не поставить 'event' => 'click', то калькулятор после ответа перегружается

$form['submit'] = array(
....
'#ahah' => array(
'event' => 'click',
...

Здравствуйте!
В 7-ке всё просто: ajax_command_invoke($selector, $method, array $arguments = array())
6-ка уже стареет... но интересно кое что доделать:
нужен метод 'val'
здесь http://api.drupal.ru/api/file/developer/topics/forms_api_reference.html/...
Написано: 'Кроме того, можно использовать любые методы операций с DOM в JQuery.'
Но как? Заранее спасибо за ответ.

#ahah['method'] = 'любой метод'

Да разумеется так попробовал, но он вставляет - [object Object]
а replace - нормально заменяет на текст -

drupal_json(array('status' => TRUE, 'data' => 'текст вставили'));

Localization client yandex_translate сделал на 6-ке
http://ssvm.ru/sites/default/files/modules/l10n_client_yandex_translate-...
то что здесь на 7-ке
Конечно AHAH на 6-ке ни в какое сравнение с AJAX на 7-ке не идёт!
Жаль что ни кто не попробовал, не прокомментировал...(((

Оставить комментарий

Содержимое этого поля является приватным и не будет отображаться публично. Если у вас есть аккаунт в Gravatar, привязанный к этому e-mail адресу, то он будет использован для отображения аватара.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Доступные HTML теги: <a> <i> <b> <strong> <code> <ul> <ol> <li> <blockquote> <em> <s>
  • Строки и параграфы переносятся автоматически.
  • Подсветка кода осуществляется с помощью тегов: <code>, <css>, <html>, <ini>, <javascript>, <sql>, <php>. Поддерживаемые стили выделения кода: <foo>, [foo].

Подробнее о форматировании