Ajaxを使用したフォーム要素の変更

Drupal6ではフォーム要素のうち、AHAHプロパティを
使うが、Drupal7ではAjaxを使用するようになっている。
以下の例では、Ajaxを使用してSubmitボタン押下時に
アニメーションを動かすようにする。

アニメアイコンを追加

１．Formの定義

<?php
/**
 * Hook_menuの実装
 */
 function ajax_test_menu(){
     $items['ajax_test'] = array(
        'title' => 'Ajaxのテスト',
        'page callback' => 'drupal_get_form',
        'page arguments' => array('ajax_test_form'),
        'access arguments' => array('access content'),
     );
     $items['ajax_test/fade_js'] = array(
        'page callback' => 'ajax_test_fade_js',
        'type' => MENU_CALLBACK,
        'access arguments' => array('access content'),
     );
     return $items;
 }
 
 /**
  * フォーム定義
  */
  function ajax_test_form(){
      $form['target'] = array(
        '#type' => 'markup',
        '#prefix' => '<div id="target">',
        '#markup' => t('ボタンをクリックすると幸せな気分になれますが、それは幻想です'),
        '#suffix' => '</div>',
      );
      $form['submit'] = array(
        '#type' => 'submit',
        '#value' => t('クリックしてね！'),
        '#ajax' => array(
            'path' => 'ajax_test/fade_js',
            'wrapper' => 'target',
            'method' => 'replace',
            'effect' => 'fade',
        )
      );
   
      return $form;
  }
?>

２．コールバック関数を定義

<?php
/**
 * Ajaxを追加するためのコールバック
 */
 function ajax_test_fade_js(){
     $output = t('FADE!');
     drupal_json_output(array('status' => TRUE,'data' => $output));
 }
?>