メインコンテンツに移動

メインナビゲーション

  • ホーム
  • サイトマップ
  • ビデオ
  • ご連絡

パンくず

  • ホーム
  • Drupalのフォーム(FromAPI)でのajaxの実装

Drupalのフォーム(FromAPI)でのajaxの実装

drupal
development
form

やりたいこと:Drupalのフォーム(FormAPI)でajaxを実装して各フォーム要素を動的に制御したいです

  • 環境:Drupal7.54
  • フォーム(FormAPI)で各要素の表示/非表示などの制御が簡単にできます(Drupalのフォーム(Form API)の「#states」で各フォーム要素の動作制御が可能)。
    • フォームを作成時にJavascriptを意識しなくてよい
    • 事前にフォームの要素を用意して表示/非表示のようなお動作制御
    • データ取得するなどの動作制御はできません
  • ajaxで高等な動作(データ取得など)制御ができるので、FormAPIもこれ基盤を用意して、簡単に実装できます。

FormAPIで「#ajax」の記述(ポイント:callback、wrapper)だけで良いのでJavascriptの意識必要はありません

  • FormAPIがajaxのインターフェースを用意しています。Form記述で「#ajax」要素を追加すれば、Javascriptなどのコーティングはいらないです
    • callbak:ajaxのリクエストが来た時に呼び出される関数
    • wrapper:ajaxのサーバー処理完了後に結果を画面に表示させる場所の指定
  • 簡単の例:テキスト入力フォームを生成して、入力したメッセージを画面のどこかに再表示させるajax処理
    FormAPIのajaxの実装方法
  • ajaxの記述はFormAPIの実装時に追加します。
    /**
     *  Implementation of hook_menu()
     *  新規フォームを表示するページのメニュー設定
     */
    function my_module_name_menu() {
      $items['test/form'] = array(
          'title' => 'Ajaxテスト',
          'page callback' => 'drupal_get_form',
          'page arguments' => array('my_sample_form'),
          'access arguments' => array('access content'),
      );
    }
    
    /**
     * フォームの各要素の記述
     */
    function my_sample_form($form, &$form_state){
      // メッセージ入力フィールド
      $form['message'] = array(
          '#type' => 'textfield',
          '#title' => t('メッセージを入力'),
      );
    
      // 入力されたメッセージをajaxで表示する場所
      $form['msg_wrapper'] = array(
          '#type' => 'markup',
          '#markup' => "",
          '#prefix' => '<div id="msg-wrapper">',
          '#suffix' => '</div>',
      );
    
      // サブミットボタン
      $form['submit'] = array(
          '#type' => 'submit',
          '#value' => '送信',
          '#ajax' => array(
              'callback' => 'test_sample_form_ajax_callback',
              'wrapper' => 'msg-wrapper',
              'effect' => 'fade',
          ),
      );
    
      return $form;
    }
    
    /**
     * ajaxに呼び出される関数
     */
    function test_sample_form_ajax_callback($form, $form_state) {
      // 入力されたメッセージを指定した場所にセット
      $form['msg_wrapper']['#markup'] = '入力されたメッセージ:' .
                  check_plain($form_state['values']['message']) ;
      // 置換する部品を返す
      return $form['msg_wrapper'] ;
    }

     
drupal
development
drupal
form

Drupalのフォーム(From API)が各要素の動作制御(JavaScript)が可能です

  • FormAPIで簡単に要素間の動作制御(JavaScriptの拡張)ができます。
  • 例えば、2選択肢の一方が選択された、その選択肢に応じるよう別の要素を表示させたい場合、Javascriptで実現する必要があります。ここで、Drupalのform配列にJavaScriptの拡張を記述する「states」を利用すれば良いです

 

FormAPIでフォーム作成記述に「#states」でjavascriptの拡張を自動的に行います

  • 上記コードは以下のとなります
/**
 * Implement hook_form
 */
function your_custom_form($node, &$form_state) {
  $form['type'] = array(
    '#type' => 'radios',
    '#options' => array(
      'agree' => t('賛成'),
      'disagree' => t('反対'),
    ),
    '#title' => t('投票してください'),
  );
  $form['survey'] = array(
    '#type' => 'fieldtext',
    '#title' => t('反対意見'),
    '#states' => array(
      'visible' => array(
        ':input[name="type"]' => array('value' => 'disagree'),
      ),
    ),
  );
}
  • 実際に、「states」部分の記述はjQueryのセレクターを利用して、参照先の動きをキャッチし、要素の属性を制御します。
  • jQueryのセレクターとその属性のキャッチ方法は以下のようなに行います
  • 「states」の記述で二つの要素(ラジオボタンと入力テキストボックス)の制御ができるようになります。
  • 以下の要素属性が「states」に記述することが可能です:
    • enabled
    • disabled
    • required
    • optional
    • visible
    • invisible
    • checked
    • unchecked
    • expanded
    • collapsed
drupal
development
form

やりたいこと:Drupalのフォーム(FormAPI)でajaxを実装して各フォーム要素を動的に制御したいです

  • 環境:Drupal7.54
  • フォーム(FormAPI)で各要素の表示/非表示などの制御が簡単にできます(Drupalのフォーム(Form API)の「#states」で各フォーム要素の動作制御が可能)。
    • フォームを作成時にJavascriptを意識しなくてよい
    • 事前にフォームの要素を用意して表示/非表示のようなお動作制御
    • データ取得するなどの動作制御はできません
  • ajaxで高等な動作(データ取得など)制御ができるので、FormAPIもこれ基盤を用意して、簡単に実装できます。

FormAPIで「#ajax」の記述(ポイント:callback、wrapper)だけで良いのでJavascriptの意識必要はありません

  • FormAPIがajaxのインターフェースを用意しています。Form記述で「#ajax」要素を追加すれば、Javascriptなどのコーティングはいらないです
    • callbak:ajaxのリクエストが来た時に呼び出される関数
    • wrapper:ajaxのサーバー処理完了後に結果を画面に表示させる場所の指定
  • 簡単の例:テキスト入力フォームを生成して、入力したメッセージを画面のどこかに再表示させるajax処理
    FormAPIのajaxの実装方法
  • ajaxの記述はFormAPIの実装時に追加します。
    /**
     *  Implementation of hook_menu()
     *  新規フォームを表示するページのメニュー設定
     */
    function my_module_name_menu() {
      $items['test/form'] = array(
          'title' => 'Ajaxテスト',
          'page callback' => 'drupal_get_form',
          'page arguments' => array('my_sample_form'),
          'access arguments' => array('access content'),
      );
    }
    
    /**
     * フォームの各要素の記述
     */
    function my_sample_form($form, &$form_state){
      // メッセージ入力フィールド
      $form['message'] = array(
          '#type' => 'textfield',
          '#title' => t('メッセージを入力'),
      );
    
      // 入力されたメッセージをajaxで表示する場所
      $form['msg_wrapper'] = array(
          '#type' => 'markup',
          '#markup' => "",
          '#prefix' => '<div id="msg-wrapper">',
          '#suffix' => '</div>',
      );
    
      // サブミットボタン
      $form['submit'] = array(
          '#type' => 'submit',
          '#value' => '送信',
          '#ajax' => array(
              'callback' => 'test_sample_form_ajax_callback',
              'wrapper' => 'msg-wrapper',
              'effect' => 'fade',
          ),
      );
    
      return $form;
    }
    
    /**
     * ajaxに呼び出される関数
     */
    function test_sample_form_ajax_callback($form, $form_state) {
      // 入力されたメッセージを指定した場所にセット
      $form['msg_wrapper']['#markup'] = '入力されたメッセージ:' .
                  check_plain($form_state['values']['message']) ;
      // 置換する部品を返す
      return $form['msg_wrapper'] ;
    }

     
drupal
development
form

やりたいこと:FormAPIよい定義されたフォームを必要な時にphpコードより呼び出したいです

  • 環境:Drupal7.54
  • FormAPIでフォームを定義すると、通常はhook_menuよりページとして呼び出されます(一般的な使い方)
  • Drupalのモジュールを改造するときに、HTMLタグでフォームを作成するより、FormAPIでフォームを生成するのは楽で、修正にも簡単でできます

関数:drupal_get_formでFormAPIより定義したフォームを簡単に呼び出し、レンダリングすることができます

  • 例:Panelsでページを構成するときに、PanelsPHPを利用してフォームを作成したいです
    drupalの関数(drupal_get_form)の使用
  • カスタムモジュールのどこか(module_load_includeでフォーム定義のファイルをロード)にフォームが定義すれば呼び出すことができます
      module_load_include('inc', 'node', 'node.pages');  // フォームの定義場所指定    
      $form = drupal_get_form('text_module_form');
      print drupal_render( $form );

     

drupal
development
ajax

やりたいこと:Drupalのプログラムレベルで簡単にajaxを利用してクライアント側でデータ交信をしたいです

  • 環境:Drupal7.54
  • DrupalのFormAPIで簡単にajaxの実装ができます(Drupalのフォーム(FromAPI)でのajaxの実装 )
  • FormAPIだけではなく、Drupalをカスタマイズ時にいろいろなところでajaxを実装したいことがあります

ポイント1:Drupalでajaxに必要なライブラリをロードし、クライアント側にjquery.form.jsファイルをセット

  • サーバー側でdrupal.ajaxのライブラリをロードする必要があります
  • クライアント側にjquery.form.jsファイルを設置する必要があります
  • この処理はajax処理するページをロード時に行えれば良いです。
    • 例:hook_init()内で処理する
      /**
       * Implements hook_init().
       */
      function YOUR_MODULE_NAME_init()
      {
        drupal_add_js('misc/jquery.form.js');
        drupal_add_library('system','drupal.ajax');
      }
  • クライアント側のブラウザのプロパティでjquery.form.jsがセットされたことの確認ができます

ポイント2:クライアント側のajax起動リンク内にajax対応可否のパラメーター「nojs」とクラス属性「use-ajax」のセット

  • ajaxの起動リンクの作成基本パターン: 
    <a href="text/ajax/nojs/1234" class="use-ajax">ajaxリンク</a>
    • hrefにある「nojs」が決まりの文字
    • hrefにある「1234」はサーバー側に転送したい必要なパラメーター
    • class="use-ajax"はこのリンクがajax用に決める
  • クライアント側のjsで使用しているブラウザがajax対応可能かを判断して、ajax起動リンクに「nojs」のパラメーターを書き換え(利用可能:nojs⇒ajax)てサーバー側に転送
  • サーバー側がajax利用可否よりクライアント側にajax対応有無の結果を返します
    Drupalのajaxフレームワークの利用
  • 上記例のプログラムは以下のようで
    /**
     * Implements hook_init().
     */
    function test_module_init()
    {
      drupal_add_js('misc/jquery.form.js');
      drupal_add_library('system','drupal.ajax');
    }
    
    /**
     *  Implementation of hook_menu()
     */
    function test_module_menu() {
      $items['test/ajax/%/%']=array(     // URLの2,3番目がクライアント側で生成
          'page callback' => 'ajax_node_response',
          'page arguments' => array(2,3),   // URLの2,3番目の引数をコールバック関数に渡す
          'access callback' => 'user_access',
          'access arguments' => array('access content'),
          'type' => MENU_CALLBACK,
      );
      return $items;
    }
    
    function ajax_node_response($type="ajax", $nid=0){
      $node = node_load( $nid, NULL, false );
      $vnode = node_view($node);
      $output = theme('node', $vnode);
      if( $type="ajax" ){
        $commands=array();
        $commands[]=ajax_command_replace( '#block-system-main','<section id="block-system-main">'.$output.'</section>' ) ;
        $page = array(
          '#type' => 'ajax',
          '#commands' => $commands,
        );
        ajax_deliver( $page ) ;   // ajax対応ブラウザの結果
      } else {
        $output = '<div id="content">'.$output.'</div>';  // ajax非対応ブラウザの結果
        return $output;
      }
    }
    

ポイント3:クライアント側で実行させたい部分はajax_commandを使用します

  • クライアント側で処理結果をどこに入り替えはajax_command_replaceで指定します
  • 結果の挿入、入れ替え、削除、css処理などがいろいろあります。詳細は本家のajax_command一覧を参考してください

 

javascript
development
ctools
ajax

やりたいこと:AJAXで動的に別のJSファイルをクライアント側に追加します

  • 環境:Drupal7.54、ctools7.x-1.12
  • Drupalのajax(ctoolsモジュールに含まれている)のコマンド(ajax_command_append)で動的にクライアント側にJSファイルをHTMLのheadに追加します
    ・・・・・・ // ここで、ajax_commandの使用方法を省略
    $commands[] = ajax_command_append("head", "<script type='text/javascript' src='/your/module/path/test.js"></script>" );
    return array('#type' => 'ajax', '#commands' => $commands);

    DrupalのAJAXで動的にJSファイルをクライアント側に追加します

  • Drupalのajaxの利用は「Drupalのフォーム(FromAPI)でのajaxの実装」、「Drupalでajaxのフレームワークが簡単に作成できる」をご参考ください
  • 上記追加されたJSファイルが正常に動作しています

問題点:動的に追加したJSファイルがブラウザの開発ツールのソースから見つからないです(デバッグはできない)

  • なぜか、追加されたJSファイルが正常に動作しているにも関わらず、ブラウザの開発ツールのソースから見つからにです
  • デバッグのブレイクポイントを入れて、動作を確認したいが、ソースファイルが見つからなくて、デバッグはできないです。

解決:動的に追加されたJSファイルに「debugger」命令を入れて強制的にブレイクポイントを入れます

  • いろいろ調べてみたが、なぜJSファイルがソースから見つからない原因は分からないです
  • javascriptデバッグのために「debugger」命令がありまして、それは強制的にブレイクポイントを入れたこと同じです
  • 実際にdebugger命令を入れて、追加されたJSファイルが現れて、JSファイル名が変わりました
    debugger命令でJSファイルの実行を強制的に止める
  • 結果として、JSファイルのデバッグができるようになりました
drupal
development
form

やりたいこと:Drupalのフォーム(FormAPI)でajaxを実装して各フォーム要素を動的に制御したいです

  • 環境:Drupal7.54
  • フォーム(FormAPI)で各要素の表示/非表示などの制御が簡単にできます(Drupalのフォーム(Form API)の「#states」で各フォーム要素の動作制御が可能)。
    • フォームを作成時にJavascriptを意識しなくてよい
    • 事前にフォームの要素を用意して表示/非表示のようなお動作制御
    • データ取得するなどの動作制御はできません
  • ajaxで高等な動作(データ取得など)制御ができるので、FormAPIもこれ基盤を用意して、簡単に実装できます。

FormAPIで「#ajax」の記述(ポイント:callback、wrapper)だけで良いのでJavascriptの意識必要はありません

  • FormAPIがajaxのインターフェースを用意しています。Form記述で「#ajax」要素を追加すれば、Javascriptなどのコーティングはいらないです
    • callbak:ajaxのリクエストが来た時に呼び出される関数
    • wrapper:ajaxのサーバー処理完了後に結果を画面に表示させる場所の指定
  • 簡単の例:テキスト入力フォームを生成して、入力したメッセージを画面のどこかに再表示させるajax処理
    FormAPIのajaxの実装方法
  • ajaxの記述はFormAPIの実装時に追加します。
    /**
     *  Implementation of hook_menu()
     *  新規フォームを表示するページのメニュー設定
     */
    function my_module_name_menu() {
      $items['test/form'] = array(
          'title' => 'Ajaxテスト',
          'page callback' => 'drupal_get_form',
          'page arguments' => array('my_sample_form'),
          'access arguments' => array('access content'),
      );
    }
    
    /**
     * フォームの各要素の記述
     */
    function my_sample_form($form, &$form_state){
      // メッセージ入力フィールド
      $form['message'] = array(
          '#type' => 'textfield',
          '#title' => t('メッセージを入力'),
      );
    
      // 入力されたメッセージをajaxで表示する場所
      $form['msg_wrapper'] = array(
          '#type' => 'markup',
          '#markup' => "",
          '#prefix' => '<div id="msg-wrapper">',
          '#suffix' => '</div>',
      );
    
      // サブミットボタン
      $form['submit'] = array(
          '#type' => 'submit',
          '#value' => '送信',
          '#ajax' => array(
              'callback' => 'test_sample_form_ajax_callback',
              'wrapper' => 'msg-wrapper',
              'effect' => 'fade',
          ),
      );
    
      return $form;
    }
    
    /**
     * ajaxに呼び出される関数
     */
    function test_sample_form_ajax_callback($form, $form_state) {
      // 入力されたメッセージを指定した場所にセット
      $form['msg_wrapper']['#markup'] = '入力されたメッセージ:' .
                  check_plain($form_state['values']['message']) ;
      // 置換する部品を返す
      return $form['msg_wrapper'] ;
    }

     
drupal
development
ajax

やりたいこと:Drupalのプログラムレベルで簡単にajaxを利用してクライアント側でデータ交信をしたいです

  • 環境:Drupal7.54
  • DrupalのFormAPIで簡単にajaxの実装ができます(Drupalのフォーム(FromAPI)でのajaxの実装 )
  • FormAPIだけではなく、Drupalをカスタマイズ時にいろいろなところでajaxを実装したいことがあります

ポイント1:Drupalでajaxに必要なライブラリをロードし、クライアント側にjquery.form.jsファイルをセット

  • サーバー側でdrupal.ajaxのライブラリをロードする必要があります
  • クライアント側にjquery.form.jsファイルを設置する必要があります
  • この処理はajax処理するページをロード時に行えれば良いです。
    • 例:hook_init()内で処理する
      /**
       * Implements hook_init().
       */
      function YOUR_MODULE_NAME_init()
      {
        drupal_add_js('misc/jquery.form.js');
        drupal_add_library('system','drupal.ajax');
      }
  • クライアント側のブラウザのプロパティでjquery.form.jsがセットされたことの確認ができます

ポイント2:クライアント側のajax起動リンク内にajax対応可否のパラメーター「nojs」とクラス属性「use-ajax」のセット

  • ajaxの起動リンクの作成基本パターン: 
    <a href="text/ajax/nojs/1234" class="use-ajax">ajaxリンク</a>
    • hrefにある「nojs」が決まりの文字
    • hrefにある「1234」はサーバー側に転送したい必要なパラメーター
    • class="use-ajax"はこのリンクがajax用に決める
  • クライアント側のjsで使用しているブラウザがajax対応可能かを判断して、ajax起動リンクに「nojs」のパラメーターを書き換え(利用可能:nojs⇒ajax)てサーバー側に転送
  • サーバー側がajax利用可否よりクライアント側にajax対応有無の結果を返します
    Drupalのajaxフレームワークの利用
  • 上記例のプログラムは以下のようで
    /**
     * Implements hook_init().
     */
    function test_module_init()
    {
      drupal_add_js('misc/jquery.form.js');
      drupal_add_library('system','drupal.ajax');
    }
    
    /**
     *  Implementation of hook_menu()
     */
    function test_module_menu() {
      $items['test/ajax/%/%']=array(     // URLの2,3番目がクライアント側で生成
          'page callback' => 'ajax_node_response',
          'page arguments' => array(2,3),   // URLの2,3番目の引数をコールバック関数に渡す
          'access callback' => 'user_access',
          'access arguments' => array('access content'),
          'type' => MENU_CALLBACK,
      );
      return $items;
    }
    
    function ajax_node_response($type="ajax", $nid=0){
      $node = node_load( $nid, NULL, false );
      $vnode = node_view($node);
      $output = theme('node', $vnode);
      if( $type="ajax" ){
        $commands=array();
        $commands[]=ajax_command_replace( '#block-system-main','<section id="block-system-main">'.$output.'</section>' ) ;
        $page = array(
          '#type' => 'ajax',
          '#commands' => $commands,
        );
        ajax_deliver( $page ) ;   // ajax対応ブラウザの結果
      } else {
        $output = '<div id="content">'.$output.'</div>';  // ajax非対応ブラウザの結果
        return $output;
      }
    }
    

ポイント3:クライアント側で実行させたい部分はajax_commandを使用します

  • クライアント側で処理結果をどこに入り替えはajax_command_replaceで指定します
  • 結果の挿入、入れ替え、削除、css処理などがいろいろあります。詳細は本家のajax_command一覧を参考してください

 

drupal
development
system_management
ajax

DrupalのFormAPIでフォーム内でAJAXを扱うのは基本です

  • DrupalのFormAPIがAJAXを実装しています
  • FormAPIでのAJAXの扱う:「Drupalのフォーム(FromAPI)でのajaxの実装」を参考してください
  • FormAPIでのAJAXでの扱う利点:
    • フォームを作成しているときに簡単にAJAXの実装が可能
    • AJAXの仕組みを知らなくても、手順通りに実装すればよいです
  • 大半のケースでFormAPIで解決できるので、AJAXをFormAPIで実装するのは一般的となります

FormAPI以外にAJAXの実装はDrupal.ajaxオブジェクトで行います

  • DrupalのAJAXのフレームワークは「misc/ajax.js」にあります
  • AJAXを実装する場合、このjsファイルを必ずインポートする必要があります
    drupal_add_js("/misc/ajax.js") ;  // ajaxのjsファイルをインポート
  • ここで、あるフォーム(text_form)のボタンを押してajaxを通じてサーバーとの交信を行う例とします
    Drupalのajaxの仕組みと扱い方法
  • フォームはDrupalのFormAPIで生成、または別の方法で生成します
    // 例: DrupalのAPIでフォームを作成
    //     送信ボタンを押して、"test message"の文字列でフォームを置換します
      $form['card_last']=array(
          "#type" => "markup",
          "#markup" => "",
          "#prefix" => "<div id='card-last-result-div'>",  // ajaxで置換したいエリア
          "#suffix" => "</div>",
      );
    
      $form['card_last']['submit'] = array(
          '#type' => 'submit',
          '#value' => '送信',
          '#attributes' => array( 'id'=>'test-form-submit' ),  // ajaxのIDを指定します
          "#ajax" => array(
            "callback" => "_ajax_callback_form",  // ajaxのコールバック
            'wrapper' => 'card-last-result-div',
            'method' => 'replace',
            'effect' => 'fade',
          ),
      );
    
    // カスタムJSファイルをフォームと一緒に添付
      $form['#attached']['js'] = array( "file_path/custom_ajax.js" );

DrupalのAJAXオブジェクトを生成してサーバーとの交信を用意します

  • 一つカスタムjsファイルを用意して(例:custom_ajax.js)、フォーム生成と同時にクライアント側に渡します
  • Drupal.ajaxオブジェクトを生成します
    (function($){
      Drupal.behaviors.custom_module_name={
        attach:function(cotext,settings){
          $("#test-form-submit").once("test-form-submit",function(){ //指定したフォームのみ
            var base = $(this).attr('id');  //フォームIDの使用
            var element_settings = {
              url: window.location.protocol + "//"+ window.location.hostname + settings.basePath + settings.pathPrefix + "system/ajax",
              event: 'click',
              progress: { type: 'throbber', },
            };
        // Drupalのajaxオブジェクトを生成します
            Drupal.ajax[base] = new Drupal.ajax(base, this, element_settings);
    
        // 送信ボタンにListenerを追加
            $("#test-form-submit").on( 'click',function(){
              $(this).click();  // ajaxを作動させます
            });
          });
        }
      };
    })(jQuery)
    
    • base(必須): ajaxの識別、ここでフォームID(test-form-submit)で指定
    • url(必須): サイトのパス/system/ajax
    • event: ajaxを作動させるイベントの指定
    • progress: ajaxでデータ交信中にロードの動画アイコンの表示
  • サーバーサイトでajaxに呼び出されるファンクションを用意します、"test message"をajaxに返還します
    function _ajax_callback_card_last_form($form, &$form_state){
      $commands[] = ajax_command_replace('#card-last-result-div', "test message"); 
      return array('#type' => 'ajax', '#commands' => $commands);
    }
  • ここで、ajax_commandを利用しなくても、ajax_deliverでメッセージの返還もできます
drupal
development
form

やりたいこと:Drupalのフォーム(FormAPI)でajaxを実装して各フォーム要素を動的に制御したいです

  • 環境:Drupal7.54
  • フォーム(FormAPI)で各要素の表示/非表示などの制御が簡単にできます(Drupalのフォーム(Form API)の「#states」で各フォーム要素の動作制御が可能)。
    • フォームを作成時にJavascriptを意識しなくてよい
    • 事前にフォームの要素を用意して表示/非表示のようなお動作制御
    • データ取得するなどの動作制御はできません
  • ajaxで高等な動作(データ取得など)制御ができるので、FormAPIもこれ基盤を用意して、簡単に実装できます。

FormAPIで「#ajax」の記述(ポイント:callback、wrapper)だけで良いのでJavascriptの意識必要はありません

  • FormAPIがajaxのインターフェースを用意しています。Form記述で「#ajax」要素を追加すれば、Javascriptなどのコーティングはいらないです
    • callbak:ajaxのリクエストが来た時に呼び出される関数
    • wrapper:ajaxのサーバー処理完了後に結果を画面に表示させる場所の指定
  • 簡単の例:テキスト入力フォームを生成して、入力したメッセージを画面のどこかに再表示させるajax処理
    FormAPIのajaxの実装方法
  • ajaxの記述はFormAPIの実装時に追加します。
    /**
     *  Implementation of hook_menu()
     *  新規フォームを表示するページのメニュー設定
     */
    function my_module_name_menu() {
      $items['test/form'] = array(
          'title' => 'Ajaxテスト',
          'page callback' => 'drupal_get_form',
          'page arguments' => array('my_sample_form'),
          'access arguments' => array('access content'),
      );
    }
    
    /**
     * フォームの各要素の記述
     */
    function my_sample_form($form, &$form_state){
      // メッセージ入力フィールド
      $form['message'] = array(
          '#type' => 'textfield',
          '#title' => t('メッセージを入力'),
      );
    
      // 入力されたメッセージをajaxで表示する場所
      $form['msg_wrapper'] = array(
          '#type' => 'markup',
          '#markup' => "",
          '#prefix' => '<div id="msg-wrapper">',
          '#suffix' => '</div>',
      );
    
      // サブミットボタン
      $form['submit'] = array(
          '#type' => 'submit',
          '#value' => '送信',
          '#ajax' => array(
              'callback' => 'test_sample_form_ajax_callback',
              'wrapper' => 'msg-wrapper',
              'effect' => 'fade',
          ),
      );
    
      return $form;
    }
    
    /**
     * ajaxに呼び出される関数
     */
    function test_sample_form_ajax_callback($form, $form_state) {
      // 入力されたメッセージを指定した場所にセット
      $form['msg_wrapper']['#markup'] = '入力されたメッセージ:' .
                  check_plain($form_state['values']['message']) ;
      // 置換する部品を返す
      return $form['msg_wrapper'] ;
    }

     
drupal
development
ajax

やりたいこと:Drupalのプログラムレベルで簡単にajaxを利用してクライアント側でデータ交信をしたいです

  • 環境:Drupal7.54
  • DrupalのFormAPIで簡単にajaxの実装ができます(Drupalのフォーム(FromAPI)でのajaxの実装 )
  • FormAPIだけではなく、Drupalをカスタマイズ時にいろいろなところでajaxを実装したいことがあります

ポイント1:Drupalでajaxに必要なライブラリをロードし、クライアント側にjquery.form.jsファイルをセット

  • サーバー側でdrupal.ajaxのライブラリをロードする必要があります
  • クライアント側にjquery.form.jsファイルを設置する必要があります
  • この処理はajax処理するページをロード時に行えれば良いです。
    • 例:hook_init()内で処理する
      /**
       * Implements hook_init().
       */
      function YOUR_MODULE_NAME_init()
      {
        drupal_add_js('misc/jquery.form.js');
        drupal_add_library('system','drupal.ajax');
      }
  • クライアント側のブラウザのプロパティでjquery.form.jsがセットされたことの確認ができます

ポイント2:クライアント側のajax起動リンク内にajax対応可否のパラメーター「nojs」とクラス属性「use-ajax」のセット

  • ajaxの起動リンクの作成基本パターン: 
    <a href="text/ajax/nojs/1234" class="use-ajax">ajaxリンク</a>
    • hrefにある「nojs」が決まりの文字
    • hrefにある「1234」はサーバー側に転送したい必要なパラメーター
    • class="use-ajax"はこのリンクがajax用に決める
  • クライアント側のjsで使用しているブラウザがajax対応可能かを判断して、ajax起動リンクに「nojs」のパラメーターを書き換え(利用可能:nojs⇒ajax)てサーバー側に転送
  • サーバー側がajax利用可否よりクライアント側にajax対応有無の結果を返します
    Drupalのajaxフレームワークの利用
  • 上記例のプログラムは以下のようで
    /**
     * Implements hook_init().
     */
    function test_module_init()
    {
      drupal_add_js('misc/jquery.form.js');
      drupal_add_library('system','drupal.ajax');
    }
    
    /**
     *  Implementation of hook_menu()
     */
    function test_module_menu() {
      $items['test/ajax/%/%']=array(     // URLの2,3番目がクライアント側で生成
          'page callback' => 'ajax_node_response',
          'page arguments' => array(2,3),   // URLの2,3番目の引数をコールバック関数に渡す
          'access callback' => 'user_access',
          'access arguments' => array('access content'),
          'type' => MENU_CALLBACK,
      );
      return $items;
    }
    
    function ajax_node_response($type="ajax", $nid=0){
      $node = node_load( $nid, NULL, false );
      $vnode = node_view($node);
      $output = theme('node', $vnode);
      if( $type="ajax" ){
        $commands=array();
        $commands[]=ajax_command_replace( '#block-system-main','<section id="block-system-main">'.$output.'</section>' ) ;
        $page = array(
          '#type' => 'ajax',
          '#commands' => $commands,
        );
        ajax_deliver( $page ) ;   // ajax対応ブラウザの結果
      } else {
        $output = '<div id="content">'.$output.'</div>';  // ajax非対応ブラウザの結果
        return $output;
      }
    }
    

ポイント3:クライアント側で実行させたい部分はajax_commandを使用します

  • クライアント側で処理結果をどこに入り替えはajax_command_replaceで指定します
  • 結果の挿入、入れ替え、削除、css処理などがいろいろあります。詳細は本家のajax_command一覧を参考してください

 

drupal
form
ajax

Drupalのajax_commandの基本:登録されているコマンド(例:ajax_command_invokeなど)でクライアント側に実行コマンドを送ります

  • 背景:Drupal7.54、コアーモジュールajaxの利用
  • Drupalのajax利用は別の記事を参考してください
    • Drupalでajaxのフレームワークが簡単に作成できる
    • Drupalのajaxの仕組みおよびプログラム上での扱う
  • サーバーサイトの処理結果をクライアント側に送る方法:
    • FormAPIに"#ajax"セットにある"wrapper"に指定されたエレメントに処理結果の置換 <-  'replaceWith', 'append', 'prepend', 'before', 'after', or 'html'
    • ajax_commadよりクライアント側の要素挿入、置換、削除などの操作ができます
  • ajax_commandがサーバー側での処理結果をクライアント側により柔軟に操作することができます
    • ajax_commandに登録されている関数が本家のページを参考してください
    • クライアント側の要素挿入、置換、削除、javascript実行などができます

処理結果をクライアント側に実行させるためカスタムajaxコマンドの作成

  • クライアント側でjQueryのセレクターで選択できる要素の操作にはajax_commandに登録された関数で行うことができます
  • 複雑なjascript実行、複数のセレクターなどの場合、カスタムajax_commandの作成が必要となります
    • クライアント側のjavascript関数を呼び出します
    • サーバーサイトの処理ロジックをクライアント側で行います

jQueryで登録さた関数をajax_command_invokeで呼び出します

  • クライアント側で事前にjQueryのjavascript関数を定義します
  • ajax_command_invokeで定義された関数を呼び出します
    ajax_command_invokeでカスタムajax関数の呼び出し

Drupal.ajaxネームスペースのプロトタイプに登録されたjavascript関数をajax_commandで呼び出します

  • Drupal.ajaネームスペースのプロトタイプを利用して、javascript関数を事前に登録します
  • ajax_command(登録済みの関数ではない)でjavascript関数を呼び出します
    ajax_commandに登録されていないjs関数の呼び出し
drupal
development
ajax

やりたいこと:Drupalのプログラムレベルで簡単にajaxを利用してクライアント側でデータ交信をしたいです

  • 環境:Drupal7.54
  • DrupalのFormAPIで簡単にajaxの実装ができます(Drupalのフォーム(FromAPI)でのajaxの実装 )
  • FormAPIだけではなく、Drupalをカスタマイズ時にいろいろなところでajaxを実装したいことがあります

ポイント1:Drupalでajaxに必要なライブラリをロードし、クライアント側にjquery.form.jsファイルをセット

  • サーバー側でdrupal.ajaxのライブラリをロードする必要があります
  • クライアント側にjquery.form.jsファイルを設置する必要があります
  • この処理はajax処理するページをロード時に行えれば良いです。
    • 例:hook_init()内で処理する
      /**
       * Implements hook_init().
       */
      function YOUR_MODULE_NAME_init()
      {
        drupal_add_js('misc/jquery.form.js');
        drupal_add_library('system','drupal.ajax');
      }
  • クライアント側のブラウザのプロパティでjquery.form.jsがセットされたことの確認ができます

ポイント2:クライアント側のajax起動リンク内にajax対応可否のパラメーター「nojs」とクラス属性「use-ajax」のセット

  • ajaxの起動リンクの作成基本パターン: 
    <a href="text/ajax/nojs/1234" class="use-ajax">ajaxリンク</a>
    • hrefにある「nojs」が決まりの文字
    • hrefにある「1234」はサーバー側に転送したい必要なパラメーター
    • class="use-ajax"はこのリンクがajax用に決める
  • クライアント側のjsで使用しているブラウザがajax対応可能かを判断して、ajax起動リンクに「nojs」のパラメーターを書き換え(利用可能:nojs⇒ajax)てサーバー側に転送
  • サーバー側がajax利用可否よりクライアント側にajax対応有無の結果を返します
    Drupalのajaxフレームワークの利用
  • 上記例のプログラムは以下のようで
    /**
     * Implements hook_init().
     */
    function test_module_init()
    {
      drupal_add_js('misc/jquery.form.js');
      drupal_add_library('system','drupal.ajax');
    }
    
    /**
     *  Implementation of hook_menu()
     */
    function test_module_menu() {
      $items['test/ajax/%/%']=array(     // URLの2,3番目がクライアント側で生成
          'page callback' => 'ajax_node_response',
          'page arguments' => array(2,3),   // URLの2,3番目の引数をコールバック関数に渡す
          'access callback' => 'user_access',
          'access arguments' => array('access content'),
          'type' => MENU_CALLBACK,
      );
      return $items;
    }
    
    function ajax_node_response($type="ajax", $nid=0){
      $node = node_load( $nid, NULL, false );
      $vnode = node_view($node);
      $output = theme('node', $vnode);
      if( $type="ajax" ){
        $commands=array();
        $commands[]=ajax_command_replace( '#block-system-main','<section id="block-system-main">'.$output.'</section>' ) ;
        $page = array(
          '#type' => 'ajax',
          '#commands' => $commands,
        );
        ajax_deliver( $page ) ;   // ajax対応ブラウザの結果
      } else {
        $output = '<div id="content">'.$output.'</div>';  // ajax非対応ブラウザの結果
        return $output;
      }
    }
    

ポイント3:クライアント側で実行させたい部分はajax_commandを使用します

  • クライアント側で処理結果をどこに入り替えはajax_command_replaceで指定します
  • 結果の挿入、入れ替え、削除、css処理などがいろいろあります。詳細は本家のajax_command一覧を参考してください

 

drupal
development
system_management
ajax

DrupalのFormAPIでフォーム内でAJAXを扱うのは基本です

  • DrupalのFormAPIがAJAXを実装しています
  • FormAPIでのAJAXの扱う:「Drupalのフォーム(FromAPI)でのajaxの実装」を参考してください
  • FormAPIでのAJAXでの扱う利点:
    • フォームを作成しているときに簡単にAJAXの実装が可能
    • AJAXの仕組みを知らなくても、手順通りに実装すればよいです
  • 大半のケースでFormAPIで解決できるので、AJAXをFormAPIで実装するのは一般的となります

FormAPI以外にAJAXの実装はDrupal.ajaxオブジェクトで行います

  • DrupalのAJAXのフレームワークは「misc/ajax.js」にあります
  • AJAXを実装する場合、このjsファイルを必ずインポートする必要があります
    drupal_add_js("/misc/ajax.js") ;  // ajaxのjsファイルをインポート
  • ここで、あるフォーム(text_form)のボタンを押してajaxを通じてサーバーとの交信を行う例とします
    Drupalのajaxの仕組みと扱い方法
  • フォームはDrupalのFormAPIで生成、または別の方法で生成します
    // 例: DrupalのAPIでフォームを作成
    //     送信ボタンを押して、"test message"の文字列でフォームを置換します
      $form['card_last']=array(
          "#type" => "markup",
          "#markup" => "",
          "#prefix" => "<div id='card-last-result-div'>",  // ajaxで置換したいエリア
          "#suffix" => "</div>",
      );
    
      $form['card_last']['submit'] = array(
          '#type' => 'submit',
          '#value' => '送信',
          '#attributes' => array( 'id'=>'test-form-submit' ),  // ajaxのIDを指定します
          "#ajax" => array(
            "callback" => "_ajax_callback_form",  // ajaxのコールバック
            'wrapper' => 'card-last-result-div',
            'method' => 'replace',
            'effect' => 'fade',
          ),
      );
    
    // カスタムJSファイルをフォームと一緒に添付
      $form['#attached']['js'] = array( "file_path/custom_ajax.js" );

DrupalのAJAXオブジェクトを生成してサーバーとの交信を用意します

  • 一つカスタムjsファイルを用意して(例:custom_ajax.js)、フォーム生成と同時にクライアント側に渡します
  • Drupal.ajaxオブジェクトを生成します
    (function($){
      Drupal.behaviors.custom_module_name={
        attach:function(cotext,settings){
          $("#test-form-submit").once("test-form-submit",function(){ //指定したフォームのみ
            var base = $(this).attr('id');  //フォームIDの使用
            var element_settings = {
              url: window.location.protocol + "//"+ window.location.hostname + settings.basePath + settings.pathPrefix + "system/ajax",
              event: 'click',
              progress: { type: 'throbber', },
            };
        // Drupalのajaxオブジェクトを生成します
            Drupal.ajax[base] = new Drupal.ajax(base, this, element_settings);
    
        // 送信ボタンにListenerを追加
            $("#test-form-submit").on( 'click',function(){
              $(this).click();  // ajaxを作動させます
            });
          });
        }
      };
    })(jQuery)
    
    • base(必須): ajaxの識別、ここでフォームID(test-form-submit)で指定
    • url(必須): サイトのパス/system/ajax
    • event: ajaxを作動させるイベントの指定
    • progress: ajaxでデータ交信中にロードの動画アイコンの表示
  • サーバーサイトでajaxに呼び出されるファンクションを用意します、"test message"をajaxに返還します
    function _ajax_callback_card_last_form($form, &$form_state){
      $commands[] = ajax_command_replace('#card-last-result-div', "test message"); 
      return array('#type' => 'ajax', '#commands' => $commands);
    }
  • ここで、ajax_commandを利用しなくても、ajax_deliverでメッセージの返還もできます
drupal
development
form

やりたいこと:Drupalのフォーム(FormAPI)でajaxを実装して各フォーム要素を動的に制御したいです

  • 環境:Drupal7.54
  • フォーム(FormAPI)で各要素の表示/非表示などの制御が簡単にできます(Drupalのフォーム(Form API)の「#states」で各フォーム要素の動作制御が可能)。
    • フォームを作成時にJavascriptを意識しなくてよい
    • 事前にフォームの要素を用意して表示/非表示のようなお動作制御
    • データ取得するなどの動作制御はできません
  • ajaxで高等な動作(データ取得など)制御ができるので、FormAPIもこれ基盤を用意して、簡単に実装できます。

FormAPIで「#ajax」の記述(ポイント:callback、wrapper)だけで良いのでJavascriptの意識必要はありません

  • FormAPIがajaxのインターフェースを用意しています。Form記述で「#ajax」要素を追加すれば、Javascriptなどのコーティングはいらないです
    • callbak:ajaxのリクエストが来た時に呼び出される関数
    • wrapper:ajaxのサーバー処理完了後に結果を画面に表示させる場所の指定
  • 簡単の例:テキスト入力フォームを生成して、入力したメッセージを画面のどこかに再表示させるajax処理
    FormAPIのajaxの実装方法
  • ajaxの記述はFormAPIの実装時に追加します。
    /**
     *  Implementation of hook_menu()
     *  新規フォームを表示するページのメニュー設定
     */
    function my_module_name_menu() {
      $items['test/form'] = array(
          'title' => 'Ajaxテスト',
          'page callback' => 'drupal_get_form',
          'page arguments' => array('my_sample_form'),
          'access arguments' => array('access content'),
      );
    }
    
    /**
     * フォームの各要素の記述
     */
    function my_sample_form($form, &$form_state){
      // メッセージ入力フィールド
      $form['message'] = array(
          '#type' => 'textfield',
          '#title' => t('メッセージを入力'),
      );
    
      // 入力されたメッセージをajaxで表示する場所
      $form['msg_wrapper'] = array(
          '#type' => 'markup',
          '#markup' => "",
          '#prefix' => '<div id="msg-wrapper">',
          '#suffix' => '</div>',
      );
    
      // サブミットボタン
      $form['submit'] = array(
          '#type' => 'submit',
          '#value' => '送信',
          '#ajax' => array(
              'callback' => 'test_sample_form_ajax_callback',
              'wrapper' => 'msg-wrapper',
              'effect' => 'fade',
          ),
      );
    
      return $form;
    }
    
    /**
     * ajaxに呼び出される関数
     */
    function test_sample_form_ajax_callback($form, $form_state) {
      // 入力されたメッセージを指定した場所にセット
      $form['msg_wrapper']['#markup'] = '入力されたメッセージ:' .
                  check_plain($form_state['values']['message']) ;
      // 置換する部品を返す
      return $form['msg_wrapper'] ;
    }

     
drupal
development
ajax

やりたいこと:Drupalのプログラムレベルで簡単にajaxを利用してクライアント側でデータ交信をしたいです

  • 環境:Drupal7.54
  • DrupalのFormAPIで簡単にajaxの実装ができます(Drupalのフォーム(FromAPI)でのajaxの実装 )
  • FormAPIだけではなく、Drupalをカスタマイズ時にいろいろなところでajaxを実装したいことがあります

ポイント1:Drupalでajaxに必要なライブラリをロードし、クライアント側にjquery.form.jsファイルをセット

  • サーバー側でdrupal.ajaxのライブラリをロードする必要があります
  • クライアント側にjquery.form.jsファイルを設置する必要があります
  • この処理はajax処理するページをロード時に行えれば良いです。
    • 例:hook_init()内で処理する
      /**
       * Implements hook_init().
       */
      function YOUR_MODULE_NAME_init()
      {
        drupal_add_js('misc/jquery.form.js');
        drupal_add_library('system','drupal.ajax');
      }
  • クライアント側のブラウザのプロパティでjquery.form.jsがセットされたことの確認ができます

ポイント2:クライアント側のajax起動リンク内にajax対応可否のパラメーター「nojs」とクラス属性「use-ajax」のセット

  • ajaxの起動リンクの作成基本パターン: 
    <a href="text/ajax/nojs/1234" class="use-ajax">ajaxリンク</a>
    • hrefにある「nojs」が決まりの文字
    • hrefにある「1234」はサーバー側に転送したい必要なパラメーター
    • class="use-ajax"はこのリンクがajax用に決める
  • クライアント側のjsで使用しているブラウザがajax対応可能かを判断して、ajax起動リンクに「nojs」のパラメーターを書き換え(利用可能:nojs⇒ajax)てサーバー側に転送
  • サーバー側がajax利用可否よりクライアント側にajax対応有無の結果を返します
    Drupalのajaxフレームワークの利用
  • 上記例のプログラムは以下のようで
    /**
     * Implements hook_init().
     */
    function test_module_init()
    {
      drupal_add_js('misc/jquery.form.js');
      drupal_add_library('system','drupal.ajax');
    }
    
    /**
     *  Implementation of hook_menu()
     */
    function test_module_menu() {
      $items['test/ajax/%/%']=array(     // URLの2,3番目がクライアント側で生成
          'page callback' => 'ajax_node_response',
          'page arguments' => array(2,3),   // URLの2,3番目の引数をコールバック関数に渡す
          'access callback' => 'user_access',
          'access arguments' => array('access content'),
          'type' => MENU_CALLBACK,
      );
      return $items;
    }
    
    function ajax_node_response($type="ajax", $nid=0){
      $node = node_load( $nid, NULL, false );
      $vnode = node_view($node);
      $output = theme('node', $vnode);
      if( $type="ajax" ){
        $commands=array();
        $commands[]=ajax_command_replace( '#block-system-main','<section id="block-system-main">'.$output.'</section>' ) ;
        $page = array(
          '#type' => 'ajax',
          '#commands' => $commands,
        );
        ajax_deliver( $page ) ;   // ajax対応ブラウザの結果
      } else {
        $output = '<div id="content">'.$output.'</div>';  // ajax非対応ブラウザの結果
        return $output;
      }
    }
    

ポイント3:クライアント側で実行させたい部分はajax_commandを使用します

  • クライアント側で処理結果をどこに入り替えはajax_command_replaceで指定します
  • 結果の挿入、入れ替え、削除、css処理などがいろいろあります。詳細は本家のajax_command一覧を参考してください

 

drupal
form
ajax

Drupalのajax_commandの基本:登録されているコマンド(例:ajax_command_invokeなど)でクライアント側に実行コマンドを送ります

  • 背景:Drupal7.54、コアーモジュールajaxの利用
  • Drupalのajax利用は別の記事を参考してください
    • Drupalでajaxのフレームワークが簡単に作成できる
    • Drupalのajaxの仕組みおよびプログラム上での扱う
  • サーバーサイトの処理結果をクライアント側に送る方法:
    • FormAPIに"#ajax"セットにある"wrapper"に指定されたエレメントに処理結果の置換 <-  'replaceWith', 'append', 'prepend', 'before', 'after', or 'html'
    • ajax_commadよりクライアント側の要素挿入、置換、削除などの操作ができます
  • ajax_commandがサーバー側での処理結果をクライアント側により柔軟に操作することができます
    • ajax_commandに登録されている関数が本家のページを参考してください
    • クライアント側の要素挿入、置換、削除、javascript実行などができます

処理結果をクライアント側に実行させるためカスタムajaxコマンドの作成

  • クライアント側でjQueryのセレクターで選択できる要素の操作にはajax_commandに登録された関数で行うことができます
  • 複雑なjascript実行、複数のセレクターなどの場合、カスタムajax_commandの作成が必要となります
    • クライアント側のjavascript関数を呼び出します
    • サーバーサイトの処理ロジックをクライアント側で行います

jQueryで登録さた関数をajax_command_invokeで呼び出します

  • クライアント側で事前にjQueryのjavascript関数を定義します
  • ajax_command_invokeで定義された関数を呼び出します
    ajax_command_invokeでカスタムajax関数の呼び出し

Drupal.ajaxネームスペースのプロトタイプに登録されたjavascript関数をajax_commandで呼び出します

  • Drupal.ajaネームスペースのプロトタイプを利用して、javascript関数を事前に登録します
  • ajax_command(登録済みの関数ではない)でjavascript関数を呼び出します
    ajax_commandに登録されていないjs関数の呼び出し
drupal
development
ajax

やりたいこと:Drupalのプログラムレベルで簡単にajaxを利用してクライアント側でデータ交信をしたいです

  • 環境:Drupal7.54
  • DrupalのFormAPIで簡単にajaxの実装ができます(Drupalのフォーム(FromAPI)でのajaxの実装 )
  • FormAPIだけではなく、Drupalをカスタマイズ時にいろいろなところでajaxを実装したいことがあります

ポイント1:Drupalでajaxに必要なライブラリをロードし、クライアント側にjquery.form.jsファイルをセット

  • サーバー側でdrupal.ajaxのライブラリをロードする必要があります
  • クライアント側にjquery.form.jsファイルを設置する必要があります
  • この処理はajax処理するページをロード時に行えれば良いです。
    • 例:hook_init()内で処理する
      /**
       * Implements hook_init().
       */
      function YOUR_MODULE_NAME_init()
      {
        drupal_add_js('misc/jquery.form.js');
        drupal_add_library('system','drupal.ajax');
      }
  • クライアント側のブラウザのプロパティでjquery.form.jsがセットされたことの確認ができます

ポイント2:クライアント側のajax起動リンク内にajax対応可否のパラメーター「nojs」とクラス属性「use-ajax」のセット

  • ajaxの起動リンクの作成基本パターン: 
    <a href="text/ajax/nojs/1234" class="use-ajax">ajaxリンク</a>
    • hrefにある「nojs」が決まりの文字
    • hrefにある「1234」はサーバー側に転送したい必要なパラメーター
    • class="use-ajax"はこのリンクがajax用に決める
  • クライアント側のjsで使用しているブラウザがajax対応可能かを判断して、ajax起動リンクに「nojs」のパラメーターを書き換え(利用可能:nojs⇒ajax)てサーバー側に転送
  • サーバー側がajax利用可否よりクライアント側にajax対応有無の結果を返します
    Drupalのajaxフレームワークの利用
  • 上記例のプログラムは以下のようで
    /**
     * Implements hook_init().
     */
    function test_module_init()
    {
      drupal_add_js('misc/jquery.form.js');
      drupal_add_library('system','drupal.ajax');
    }
    
    /**
     *  Implementation of hook_menu()
     */
    function test_module_menu() {
      $items['test/ajax/%/%']=array(     // URLの2,3番目がクライアント側で生成
          'page callback' => 'ajax_node_response',
          'page arguments' => array(2,3),   // URLの2,3番目の引数をコールバック関数に渡す
          'access callback' => 'user_access',
          'access arguments' => array('access content'),
          'type' => MENU_CALLBACK,
      );
      return $items;
    }
    
    function ajax_node_response($type="ajax", $nid=0){
      $node = node_load( $nid, NULL, false );
      $vnode = node_view($node);
      $output = theme('node', $vnode);
      if( $type="ajax" ){
        $commands=array();
        $commands[]=ajax_command_replace( '#block-system-main','<section id="block-system-main">'.$output.'</section>' ) ;
        $page = array(
          '#type' => 'ajax',
          '#commands' => $commands,
        );
        ajax_deliver( $page ) ;   // ajax対応ブラウザの結果
      } else {
        $output = '<div id="content">'.$output.'</div>';  // ajax非対応ブラウザの結果
        return $output;
      }
    }
    

ポイント3:クライアント側で実行させたい部分はajax_commandを使用します

  • クライアント側で処理結果をどこに入り替えはajax_command_replaceで指定します
  • 結果の挿入、入れ替え、削除、css処理などがいろいろあります。詳細は本家のajax_command一覧を参考してください

 

drupal
development
system_management
ajax

DrupalのFormAPIでフォーム内でAJAXを扱うのは基本です

  • DrupalのFormAPIがAJAXを実装しています
  • FormAPIでのAJAXの扱う:「Drupalのフォーム(FromAPI)でのajaxの実装」を参考してください
  • FormAPIでのAJAXでの扱う利点:
    • フォームを作成しているときに簡単にAJAXの実装が可能
    • AJAXの仕組みを知らなくても、手順通りに実装すればよいです
  • 大半のケースでFormAPIで解決できるので、AJAXをFormAPIで実装するのは一般的となります

FormAPI以外にAJAXの実装はDrupal.ajaxオブジェクトで行います

  • DrupalのAJAXのフレームワークは「misc/ajax.js」にあります
  • AJAXを実装する場合、このjsファイルを必ずインポートする必要があります
    drupal_add_js("/misc/ajax.js") ;  // ajaxのjsファイルをインポート
  • ここで、あるフォーム(text_form)のボタンを押してajaxを通じてサーバーとの交信を行う例とします
    Drupalのajaxの仕組みと扱い方法
  • フォームはDrupalのFormAPIで生成、または別の方法で生成します
    // 例: DrupalのAPIでフォームを作成
    //     送信ボタンを押して、"test message"の文字列でフォームを置換します
      $form['card_last']=array(
          "#type" => "markup",
          "#markup" => "",
          "#prefix" => "<div id='card-last-result-div'>",  // ajaxで置換したいエリア
          "#suffix" => "</div>",
      );
    
      $form['card_last']['submit'] = array(
          '#type' => 'submit',
          '#value' => '送信',
          '#attributes' => array( 'id'=>'test-form-submit' ),  // ajaxのIDを指定します
          "#ajax" => array(
            "callback" => "_ajax_callback_form",  // ajaxのコールバック
            'wrapper' => 'card-last-result-div',
            'method' => 'replace',
            'effect' => 'fade',
          ),
      );
    
    // カスタムJSファイルをフォームと一緒に添付
      $form['#attached']['js'] = array( "file_path/custom_ajax.js" );

DrupalのAJAXオブジェクトを生成してサーバーとの交信を用意します

  • 一つカスタムjsファイルを用意して(例:custom_ajax.js)、フォーム生成と同時にクライアント側に渡します
  • Drupal.ajaxオブジェクトを生成します
    (function($){
      Drupal.behaviors.custom_module_name={
        attach:function(cotext,settings){
          $("#test-form-submit").once("test-form-submit",function(){ //指定したフォームのみ
            var base = $(this).attr('id');  //フォームIDの使用
            var element_settings = {
              url: window.location.protocol + "//"+ window.location.hostname + settings.basePath + settings.pathPrefix + "system/ajax",
              event: 'click',
              progress: { type: 'throbber', },
            };
        // Drupalのajaxオブジェクトを生成します
            Drupal.ajax[base] = new Drupal.ajax(base, this, element_settings);
    
        // 送信ボタンにListenerを追加
            $("#test-form-submit").on( 'click',function(){
              $(this).click();  // ajaxを作動させます
            });
          });
        }
      };
    })(jQuery)
    
    • base(必須): ajaxの識別、ここでフォームID(test-form-submit)で指定
    • url(必須): サイトのパス/system/ajax
    • event: ajaxを作動させるイベントの指定
    • progress: ajaxでデータ交信中にロードの動画アイコンの表示
  • サーバーサイトでajaxに呼び出されるファンクションを用意します、"test message"をajaxに返還します
    function _ajax_callback_card_last_form($form, &$form_state){
      $commands[] = ajax_command_replace('#card-last-result-div', "test message"); 
      return array('#type' => 'ajax', '#commands' => $commands);
    }
  • ここで、ajax_commandを利用しなくても、ajax_deliverでメッセージの返還もできます
drupal
development
form

やりたいこと:Drupalのフォーム(FormAPI)でajaxを実装して各フォーム要素を動的に制御したいです

  • 環境:Drupal7.54
  • フォーム(FormAPI)で各要素の表示/非表示などの制御が簡単にできます(Drupalのフォーム(Form API)の「#states」で各フォーム要素の動作制御が可能)。
    • フォームを作成時にJavascriptを意識しなくてよい
    • 事前にフォームの要素を用意して表示/非表示のようなお動作制御
    • データ取得するなどの動作制御はできません
  • ajaxで高等な動作(データ取得など)制御ができるので、FormAPIもこれ基盤を用意して、簡単に実装できます。

FormAPIで「#ajax」の記述(ポイント:callback、wrapper)だけで良いのでJavascriptの意識必要はありません

  • FormAPIがajaxのインターフェースを用意しています。Form記述で「#ajax」要素を追加すれば、Javascriptなどのコーティングはいらないです
    • callbak:ajaxのリクエストが来た時に呼び出される関数
    • wrapper:ajaxのサーバー処理完了後に結果を画面に表示させる場所の指定
  • 簡単の例:テキスト入力フォームを生成して、入力したメッセージを画面のどこかに再表示させるajax処理
    FormAPIのajaxの実装方法
  • ajaxの記述はFormAPIの実装時に追加します。
    /**
     *  Implementation of hook_menu()
     *  新規フォームを表示するページのメニュー設定
     */
    function my_module_name_menu() {
      $items['test/form'] = array(
          'title' => 'Ajaxテスト',
          'page callback' => 'drupal_get_form',
          'page arguments' => array('my_sample_form'),
          'access arguments' => array('access content'),
      );
    }
    
    /**
     * フォームの各要素の記述
     */
    function my_sample_form($form, &$form_state){
      // メッセージ入力フィールド
      $form['message'] = array(
          '#type' => 'textfield',
          '#title' => t('メッセージを入力'),
      );
    
      // 入力されたメッセージをajaxで表示する場所
      $form['msg_wrapper'] = array(
          '#type' => 'markup',
          '#markup' => "",
          '#prefix' => '<div id="msg-wrapper">',
          '#suffix' => '</div>',
      );
    
      // サブミットボタン
      $form['submit'] = array(
          '#type' => 'submit',
          '#value' => '送信',
          '#ajax' => array(
              'callback' => 'test_sample_form_ajax_callback',
              'wrapper' => 'msg-wrapper',
              'effect' => 'fade',
          ),
      );
    
      return $form;
    }
    
    /**
     * ajaxに呼び出される関数
     */
    function test_sample_form_ajax_callback($form, $form_state) {
      // 入力されたメッセージを指定した場所にセット
      $form['msg_wrapper']['#markup'] = '入力されたメッセージ:' .
                  check_plain($form_state['values']['message']) ;
      // 置換する部品を返す
      return $form['msg_wrapper'] ;
    }

     
drupal
development
ajax

やりたいこと:Drupalのプログラムレベルで簡単にajaxを利用してクライアント側でデータ交信をしたいです

  • 環境:Drupal7.54
  • DrupalのFormAPIで簡単にajaxの実装ができます(Drupalのフォーム(FromAPI)でのajaxの実装 )
  • FormAPIだけではなく、Drupalをカスタマイズ時にいろいろなところでajaxを実装したいことがあります

ポイント1:Drupalでajaxに必要なライブラリをロードし、クライアント側にjquery.form.jsファイルをセット

  • サーバー側でdrupal.ajaxのライブラリをロードする必要があります
  • クライアント側にjquery.form.jsファイルを設置する必要があります
  • この処理はajax処理するページをロード時に行えれば良いです。
    • 例:hook_init()内で処理する
      /**
       * Implements hook_init().
       */
      function YOUR_MODULE_NAME_init()
      {
        drupal_add_js('misc/jquery.form.js');
        drupal_add_library('system','drupal.ajax');
      }
  • クライアント側のブラウザのプロパティでjquery.form.jsがセットされたことの確認ができます

ポイント2:クライアント側のajax起動リンク内にajax対応可否のパラメーター「nojs」とクラス属性「use-ajax」のセット

  • ajaxの起動リンクの作成基本パターン: 
    <a href="text/ajax/nojs/1234" class="use-ajax">ajaxリンク</a>
    • hrefにある「nojs」が決まりの文字
    • hrefにある「1234」はサーバー側に転送したい必要なパラメーター
    • class="use-ajax"はこのリンクがajax用に決める
  • クライアント側のjsで使用しているブラウザがajax対応可能かを判断して、ajax起動リンクに「nojs」のパラメーターを書き換え(利用可能:nojs⇒ajax)てサーバー側に転送
  • サーバー側がajax利用可否よりクライアント側にajax対応有無の結果を返します
    Drupalのajaxフレームワークの利用
  • 上記例のプログラムは以下のようで
    /**
     * Implements hook_init().
     */
    function test_module_init()
    {
      drupal_add_js('misc/jquery.form.js');
      drupal_add_library('system','drupal.ajax');
    }
    
    /**
     *  Implementation of hook_menu()
     */
    function test_module_menu() {
      $items['test/ajax/%/%']=array(     // URLの2,3番目がクライアント側で生成
          'page callback' => 'ajax_node_response',
          'page arguments' => array(2,3),   // URLの2,3番目の引数をコールバック関数に渡す
          'access callback' => 'user_access',
          'access arguments' => array('access content'),
          'type' => MENU_CALLBACK,
      );
      return $items;
    }
    
    function ajax_node_response($type="ajax", $nid=0){
      $node = node_load( $nid, NULL, false );
      $vnode = node_view($node);
      $output = theme('node', $vnode);
      if( $type="ajax" ){
        $commands=array();
        $commands[]=ajax_command_replace( '#block-system-main','<section id="block-system-main">'.$output.'</section>' ) ;
        $page = array(
          '#type' => 'ajax',
          '#commands' => $commands,
        );
        ajax_deliver( $page ) ;   // ajax対応ブラウザの結果
      } else {
        $output = '<div id="content">'.$output.'</div>';  // ajax非対応ブラウザの結果
        return $output;
      }
    }
    

ポイント3:クライアント側で実行させたい部分はajax_commandを使用します

  • クライアント側で処理結果をどこに入り替えはajax_command_replaceで指定します
  • 結果の挿入、入れ替え、削除、css処理などがいろいろあります。詳細は本家のajax_command一覧を参考してください

 

drupal
form
ajax

Drupalのajax_commandの基本:登録されているコマンド(例:ajax_command_invokeなど)でクライアント側に実行コマンドを送ります

  • 背景:Drupal7.54、コアーモジュールajaxの利用
  • Drupalのajax利用は別の記事を参考してください
    • Drupalでajaxのフレームワークが簡単に作成できる
    • Drupalのajaxの仕組みおよびプログラム上での扱う
  • サーバーサイトの処理結果をクライアント側に送る方法:
    • FormAPIに"#ajax"セットにある"wrapper"に指定されたエレメントに処理結果の置換 <-  'replaceWith', 'append', 'prepend', 'before', 'after', or 'html'
    • ajax_commadよりクライアント側の要素挿入、置換、削除などの操作ができます
  • ajax_commandがサーバー側での処理結果をクライアント側により柔軟に操作することができます
    • ajax_commandに登録されている関数が本家のページを参考してください
    • クライアント側の要素挿入、置換、削除、javascript実行などができます

処理結果をクライアント側に実行させるためカスタムajaxコマンドの作成

  • クライアント側でjQueryのセレクターで選択できる要素の操作にはajax_commandに登録された関数で行うことができます
  • 複雑なjascript実行、複数のセレクターなどの場合、カスタムajax_commandの作成が必要となります
    • クライアント側のjavascript関数を呼び出します
    • サーバーサイトの処理ロジックをクライアント側で行います

jQueryで登録さた関数をajax_command_invokeで呼び出します

  • クライアント側で事前にjQueryのjavascript関数を定義します
  • ajax_command_invokeで定義された関数を呼び出します
    ajax_command_invokeでカスタムajax関数の呼び出し

Drupal.ajaxネームスペースのプロトタイプに登録されたjavascript関数をajax_commandで呼び出します

  • Drupal.ajaネームスペースのプロトタイプを利用して、javascript関数を事前に登録します
  • ajax_command(登録済みの関数ではない)でjavascript関数を呼び出します
    ajax_commandに登録されていないjs関数の呼び出し
drupal
development
ajax

やりたいこと:Drupalのプログラムレベルで簡単にajaxを利用してクライアント側でデータ交信をしたいです

  • 環境:Drupal7.54
  • DrupalのFormAPIで簡単にajaxの実装ができます(Drupalのフォーム(FromAPI)でのajaxの実装 )
  • FormAPIだけではなく、Drupalをカスタマイズ時にいろいろなところでajaxを実装したいことがあります

ポイント1:Drupalでajaxに必要なライブラリをロードし、クライアント側にjquery.form.jsファイルをセット

  • サーバー側でdrupal.ajaxのライブラリをロードする必要があります
  • クライアント側にjquery.form.jsファイルを設置する必要があります
  • この処理はajax処理するページをロード時に行えれば良いです。
    • 例:hook_init()内で処理する
      /**
       * Implements hook_init().
       */
      function YOUR_MODULE_NAME_init()
      {
        drupal_add_js('misc/jquery.form.js');
        drupal_add_library('system','drupal.ajax');
      }
  • クライアント側のブラウザのプロパティでjquery.form.jsがセットされたことの確認ができます

ポイント2:クライアント側のajax起動リンク内にajax対応可否のパラメーター「nojs」とクラス属性「use-ajax」のセット

  • ajaxの起動リンクの作成基本パターン: 
    <a href="text/ajax/nojs/1234" class="use-ajax">ajaxリンク</a>
    • hrefにある「nojs」が決まりの文字
    • hrefにある「1234」はサーバー側に転送したい必要なパラメーター
    • class="use-ajax"はこのリンクがajax用に決める
  • クライアント側のjsで使用しているブラウザがajax対応可能かを判断して、ajax起動リンクに「nojs」のパラメーターを書き換え(利用可能:nojs⇒ajax)てサーバー側に転送
  • サーバー側がajax利用可否よりクライアント側にajax対応有無の結果を返します
    Drupalのajaxフレームワークの利用
  • 上記例のプログラムは以下のようで
    /**
     * Implements hook_init().
     */
    function test_module_init()
    {
      drupal_add_js('misc/jquery.form.js');
      drupal_add_library('system','drupal.ajax');
    }
    
    /**
     *  Implementation of hook_menu()
     */
    function test_module_menu() {
      $items['test/ajax/%/%']=array(     // URLの2,3番目がクライアント側で生成
          'page callback' => 'ajax_node_response',
          'page arguments' => array(2,3),   // URLの2,3番目の引数をコールバック関数に渡す
          'access callback' => 'user_access',
          'access arguments' => array('access content'),
          'type' => MENU_CALLBACK,
      );
      return $items;
    }
    
    function ajax_node_response($type="ajax", $nid=0){
      $node = node_load( $nid, NULL, false );
      $vnode = node_view($node);
      $output = theme('node', $vnode);
      if( $type="ajax" ){
        $commands=array();
        $commands[]=ajax_command_replace( '#block-system-main','<section id="block-system-main">'.$output.'</section>' ) ;
        $page = array(
          '#type' => 'ajax',
          '#commands' => $commands,
        );
        ajax_deliver( $page ) ;   // ajax対応ブラウザの結果
      } else {
        $output = '<div id="content">'.$output.'</div>';  // ajax非対応ブラウザの結果
        return $output;
      }
    }
    

ポイント3:クライアント側で実行させたい部分はajax_commandを使用します

  • クライアント側で処理結果をどこに入り替えはajax_command_replaceで指定します
  • 結果の挿入、入れ替え、削除、css処理などがいろいろあります。詳細は本家のajax_command一覧を参考してください

 

drupal
development
system_management
ajax

DrupalのFormAPIでフォーム内でAJAXを扱うのは基本です

  • DrupalのFormAPIがAJAXを実装しています
  • FormAPIでのAJAXの扱う:「Drupalのフォーム(FromAPI)でのajaxの実装」を参考してください
  • FormAPIでのAJAXでの扱う利点:
    • フォームを作成しているときに簡単にAJAXの実装が可能
    • AJAXの仕組みを知らなくても、手順通りに実装すればよいです
  • 大半のケースでFormAPIで解決できるので、AJAXをFormAPIで実装するのは一般的となります

FormAPI以外にAJAXの実装はDrupal.ajaxオブジェクトで行います

  • DrupalのAJAXのフレームワークは「misc/ajax.js」にあります
  • AJAXを実装する場合、このjsファイルを必ずインポートする必要があります
    drupal_add_js("/misc/ajax.js") ;  // ajaxのjsファイルをインポート
  • ここで、あるフォーム(text_form)のボタンを押してajaxを通じてサーバーとの交信を行う例とします
    Drupalのajaxの仕組みと扱い方法
  • フォームはDrupalのFormAPIで生成、または別の方法で生成します
    // 例: DrupalのAPIでフォームを作成
    //     送信ボタンを押して、"test message"の文字列でフォームを置換します
      $form['card_last']=array(
          "#type" => "markup",
          "#markup" => "",
          "#prefix" => "<div id='card-last-result-div'>",  // ajaxで置換したいエリア
          "#suffix" => "</div>",
      );
    
      $form['card_last']['submit'] = array(
          '#type' => 'submit',
          '#value' => '送信',
          '#attributes' => array( 'id'=>'test-form-submit' ),  // ajaxのIDを指定します
          "#ajax" => array(
            "callback" => "_ajax_callback_form",  // ajaxのコールバック
            'wrapper' => 'card-last-result-div',
            'method' => 'replace',
            'effect' => 'fade',
          ),
      );
    
    // カスタムJSファイルをフォームと一緒に添付
      $form['#attached']['js'] = array( "file_path/custom_ajax.js" );

DrupalのAJAXオブジェクトを生成してサーバーとの交信を用意します

  • 一つカスタムjsファイルを用意して(例:custom_ajax.js)、フォーム生成と同時にクライアント側に渡します
  • Drupal.ajaxオブジェクトを生成します
    (function($){
      Drupal.behaviors.custom_module_name={
        attach:function(cotext,settings){
          $("#test-form-submit").once("test-form-submit",function(){ //指定したフォームのみ
            var base = $(this).attr('id');  //フォームIDの使用
            var element_settings = {
              url: window.location.protocol + "//"+ window.location.hostname + settings.basePath + settings.pathPrefix + "system/ajax",
              event: 'click',
              progress: { type: 'throbber', },
            };
        // Drupalのajaxオブジェクトを生成します
            Drupal.ajax[base] = new Drupal.ajax(base, this, element_settings);
    
        // 送信ボタンにListenerを追加
            $("#test-form-submit").on( 'click',function(){
              $(this).click();  // ajaxを作動させます
            });
          });
        }
      };
    })(jQuery)
    
    • base(必須): ajaxの識別、ここでフォームID(test-form-submit)で指定
    • url(必須): サイトのパス/system/ajax
    • event: ajaxを作動させるイベントの指定
    • progress: ajaxでデータ交信中にロードの動画アイコンの表示
  • サーバーサイトでajaxに呼び出されるファンクションを用意します、"test message"をajaxに返還します
    function _ajax_callback_card_last_form($form, &$form_state){
      $commands[] = ajax_command_replace('#card-last-result-div', "test message"); 
      return array('#type' => 'ajax', '#commands' => $commands);
    }
  • ここで、ajax_commandを利用しなくても、ajax_deliverでメッセージの返還もできます
drupal
development
form

やりたいこと:Drupalのフォーム(FormAPI)でajaxを実装して各フォーム要素を動的に制御したいです

  • 環境:Drupal7.54
  • フォーム(FormAPI)で各要素の表示/非表示などの制御が簡単にできます(Drupalのフォーム(Form API)の「#states」で各フォーム要素の動作制御が可能)。
    • フォームを作成時にJavascriptを意識しなくてよい
    • 事前にフォームの要素を用意して表示/非表示のようなお動作制御
    • データ取得するなどの動作制御はできません
  • ajaxで高等な動作(データ取得など)制御ができるので、FormAPIもこれ基盤を用意して、簡単に実装できます。

FormAPIで「#ajax」の記述(ポイント:callback、wrapper)だけで良いのでJavascriptの意識必要はありません

  • FormAPIがajaxのインターフェースを用意しています。Form記述で「#ajax」要素を追加すれば、Javascriptなどのコーティングはいらないです
    • callbak:ajaxのリクエストが来た時に呼び出される関数
    • wrapper:ajaxのサーバー処理完了後に結果を画面に表示させる場所の指定
  • 簡単の例:テキスト入力フォームを生成して、入力したメッセージを画面のどこかに再表示させるajax処理
    FormAPIのajaxの実装方法
  • ajaxの記述はFormAPIの実装時に追加します。
    /**
     *  Implementation of hook_menu()
     *  新規フォームを表示するページのメニュー設定
     */
    function my_module_name_menu() {
      $items['test/form'] = array(
          'title' => 'Ajaxテスト',
          'page callback' => 'drupal_get_form',
          'page arguments' => array('my_sample_form'),
          'access arguments' => array('access content'),
      );
    }
    
    /**
     * フォームの各要素の記述
     */
    function my_sample_form($form, &$form_state){
      // メッセージ入力フィールド
      $form['message'] = array(
          '#type' => 'textfield',
          '#title' => t('メッセージを入力'),
      );
    
      // 入力されたメッセージをajaxで表示する場所
      $form['msg_wrapper'] = array(
          '#type' => 'markup',
          '#markup' => "",
          '#prefix' => '<div id="msg-wrapper">',
          '#suffix' => '</div>',
      );
    
      // サブミットボタン
      $form['submit'] = array(
          '#type' => 'submit',
          '#value' => '送信',
          '#ajax' => array(
              'callback' => 'test_sample_form_ajax_callback',
              'wrapper' => 'msg-wrapper',
              'effect' => 'fade',
          ),
      );
    
      return $form;
    }
    
    /**
     * ajaxに呼び出される関数
     */
    function test_sample_form_ajax_callback($form, $form_state) {
      // 入力されたメッセージを指定した場所にセット
      $form['msg_wrapper']['#markup'] = '入力されたメッセージ:' .
                  check_plain($form_state['values']['message']) ;
      // 置換する部品を返す
      return $form['msg_wrapper'] ;
    }

     
drupal
development
ajax

やりたいこと:Drupalのプログラムレベルで簡単にajaxを利用してクライアント側でデータ交信をしたいです

  • 環境:Drupal7.54
  • DrupalのFormAPIで簡単にajaxの実装ができます(Drupalのフォーム(FromAPI)でのajaxの実装 )
  • FormAPIだけではなく、Drupalをカスタマイズ時にいろいろなところでajaxを実装したいことがあります

ポイント1:Drupalでajaxに必要なライブラリをロードし、クライアント側にjquery.form.jsファイルをセット

  • サーバー側でdrupal.ajaxのライブラリをロードする必要があります
  • クライアント側にjquery.form.jsファイルを設置する必要があります
  • この処理はajax処理するページをロード時に行えれば良いです。
    • 例:hook_init()内で処理する
      /**
       * Implements hook_init().
       */
      function YOUR_MODULE_NAME_init()
      {
        drupal_add_js('misc/jquery.form.js');
        drupal_add_library('system','drupal.ajax');
      }
  • クライアント側のブラウザのプロパティでjquery.form.jsがセットされたことの確認ができます

ポイント2:クライアント側のajax起動リンク内にajax対応可否のパラメーター「nojs」とクラス属性「use-ajax」のセット

  • ajaxの起動リンクの作成基本パターン: 
    <a href="text/ajax/nojs/1234" class="use-ajax">ajaxリンク</a>
    • hrefにある「nojs」が決まりの文字
    • hrefにある「1234」はサーバー側に転送したい必要なパラメーター
    • class="use-ajax"はこのリンクがajax用に決める
  • クライアント側のjsで使用しているブラウザがajax対応可能かを判断して、ajax起動リンクに「nojs」のパラメーターを書き換え(利用可能:nojs⇒ajax)てサーバー側に転送
  • サーバー側がajax利用可否よりクライアント側にajax対応有無の結果を返します
    Drupalのajaxフレームワークの利用
  • 上記例のプログラムは以下のようで
    /**
     * Implements hook_init().
     */
    function test_module_init()
    {
      drupal_add_js('misc/jquery.form.js');
      drupal_add_library('system','drupal.ajax');
    }
    
    /**
     *  Implementation of hook_menu()
     */
    function test_module_menu() {
      $items['test/ajax/%/%']=array(     // URLの2,3番目がクライアント側で生成
          'page callback' => 'ajax_node_response',
          'page arguments' => array(2,3),   // URLの2,3番目の引数をコールバック関数に渡す
          'access callback' => 'user_access',
          'access arguments' => array('access content'),
          'type' => MENU_CALLBACK,
      );
      return $items;
    }
    
    function ajax_node_response($type="ajax", $nid=0){
      $node = node_load( $nid, NULL, false );
      $vnode = node_view($node);
      $output = theme('node', $vnode);
      if( $type="ajax" ){
        $commands=array();
        $commands[]=ajax_command_replace( '#block-system-main','<section id="block-system-main">'.$output.'</section>' ) ;
        $page = array(
          '#type' => 'ajax',
          '#commands' => $commands,
        );
        ajax_deliver( $page ) ;   // ajax対応ブラウザの結果
      } else {
        $output = '<div id="content">'.$output.'</div>';  // ajax非対応ブラウザの結果
        return $output;
      }
    }
    

ポイント3:クライアント側で実行させたい部分はajax_commandを使用します

  • クライアント側で処理結果をどこに入り替えはajax_command_replaceで指定します
  • 結果の挿入、入れ替え、削除、css処理などがいろいろあります。詳細は本家のajax_command一覧を参考してください

 

drupal
form
ajax

Drupalのajax_commandの基本:登録されているコマンド(例:ajax_command_invokeなど)でクライアント側に実行コマンドを送ります

  • 背景:Drupal7.54、コアーモジュールajaxの利用
  • Drupalのajax利用は別の記事を参考してください
    • Drupalでajaxのフレームワークが簡単に作成できる
    • Drupalのajaxの仕組みおよびプログラム上での扱う
  • サーバーサイトの処理結果をクライアント側に送る方法:
    • FormAPIに"#ajax"セットにある"wrapper"に指定されたエレメントに処理結果の置換 <-  'replaceWith', 'append', 'prepend', 'before', 'after', or 'html'
    • ajax_commadよりクライアント側の要素挿入、置換、削除などの操作ができます
  • ajax_commandがサーバー側での処理結果をクライアント側により柔軟に操作することができます
    • ajax_commandに登録されている関数が本家のページを参考してください
    • クライアント側の要素挿入、置換、削除、javascript実行などができます

処理結果をクライアント側に実行させるためカスタムajaxコマンドの作成

  • クライアント側でjQueryのセレクターで選択できる要素の操作にはajax_commandに登録された関数で行うことができます
  • 複雑なjascript実行、複数のセレクターなどの場合、カスタムajax_commandの作成が必要となります
    • クライアント側のjavascript関数を呼び出します
    • サーバーサイトの処理ロジックをクライアント側で行います

jQueryで登録さた関数をajax_command_invokeで呼び出します

  • クライアント側で事前にjQueryのjavascript関数を定義します
  • ajax_command_invokeで定義された関数を呼び出します
    ajax_command_invokeでカスタムajax関数の呼び出し

Drupal.ajaxネームスペースのプロトタイプに登録されたjavascript関数をajax_commandで呼び出します

  • Drupal.ajaネームスペースのプロトタイプを利用して、javascript関数を事前に登録します
  • ajax_command(登録済みの関数ではない)でjavascript関数を呼び出します
    ajax_commandに登録されていないjs関数の呼び出し
drupal
development
ajax

やりたいこと:Drupalのプログラムレベルで簡単にajaxを利用してクライアント側でデータ交信をしたいです

  • 環境:Drupal7.54
  • DrupalのFormAPIで簡単にajaxの実装ができます(Drupalのフォーム(FromAPI)でのajaxの実装 )
  • FormAPIだけではなく、Drupalをカスタマイズ時にいろいろなところでajaxを実装したいことがあります

ポイント1:Drupalでajaxに必要なライブラリをロードし、クライアント側にjquery.form.jsファイルをセット

  • サーバー側でdrupal.ajaxのライブラリをロードする必要があります
  • クライアント側にjquery.form.jsファイルを設置する必要があります
  • この処理はajax処理するページをロード時に行えれば良いです。
    • 例:hook_init()内で処理する
      /**
       * Implements hook_init().
       */
      function YOUR_MODULE_NAME_init()
      {
        drupal_add_js('misc/jquery.form.js');
        drupal_add_library('system','drupal.ajax');
      }
  • クライアント側のブラウザのプロパティでjquery.form.jsがセットされたことの確認ができます

ポイント2:クライアント側のajax起動リンク内にajax対応可否のパラメーター「nojs」とクラス属性「use-ajax」のセット

  • ajaxの起動リンクの作成基本パターン: 
    <a href="text/ajax/nojs/1234" class="use-ajax">ajaxリンク</a>
    • hrefにある「nojs」が決まりの文字
    • hrefにある「1234」はサーバー側に転送したい必要なパラメーター
    • class="use-ajax"はこのリンクがajax用に決める
  • クライアント側のjsで使用しているブラウザがajax対応可能かを判断して、ajax起動リンクに「nojs」のパラメーターを書き換え(利用可能:nojs⇒ajax)てサーバー側に転送
  • サーバー側がajax利用可否よりクライアント側にajax対応有無の結果を返します
    Drupalのajaxフレームワークの利用
  • 上記例のプログラムは以下のようで
    /**
     * Implements hook_init().
     */
    function test_module_init()
    {
      drupal_add_js('misc/jquery.form.js');
      drupal_add_library('system','drupal.ajax');
    }
    
    /**
     *  Implementation of hook_menu()
     */
    function test_module_menu() {
      $items['test/ajax/%/%']=array(     // URLの2,3番目がクライアント側で生成
          'page callback' => 'ajax_node_response',
          'page arguments' => array(2,3),   // URLの2,3番目の引数をコールバック関数に渡す
          'access callback' => 'user_access',
          'access arguments' => array('access content'),
          'type' => MENU_CALLBACK,
      );
      return $items;
    }
    
    function ajax_node_response($type="ajax", $nid=0){
      $node = node_load( $nid, NULL, false );
      $vnode = node_view($node);
      $output = theme('node', $vnode);
      if( $type="ajax" ){
        $commands=array();
        $commands[]=ajax_command_replace( '#block-system-main','<section id="block-system-main">'.$output.'</section>' ) ;
        $page = array(
          '#type' => 'ajax',
          '#commands' => $commands,
        );
        ajax_deliver( $page ) ;   // ajax対応ブラウザの結果
      } else {
        $output = '<div id="content">'.$output.'</div>';  // ajax非対応ブラウザの結果
        return $output;
      }
    }
    

ポイント3:クライアント側で実行させたい部分はajax_commandを使用します

  • クライアント側で処理結果をどこに入り替えはajax_command_replaceで指定します
  • 結果の挿入、入れ替え、削除、css処理などがいろいろあります。詳細は本家のajax_command一覧を参考してください

 

drupal
development
system_management
ajax

DrupalのFormAPIでフォーム内でAJAXを扱うのは基本です

  • DrupalのFormAPIがAJAXを実装しています
  • FormAPIでのAJAXの扱う:「Drupalのフォーム(FromAPI)でのajaxの実装」を参考してください
  • FormAPIでのAJAXでの扱う利点:
    • フォームを作成しているときに簡単にAJAXの実装が可能
    • AJAXの仕組みを知らなくても、手順通りに実装すればよいです
  • 大半のケースでFormAPIで解決できるので、AJAXをFormAPIで実装するのは一般的となります

FormAPI以外にAJAXの実装はDrupal.ajaxオブジェクトで行います

  • DrupalのAJAXのフレームワークは「misc/ajax.js」にあります
  • AJAXを実装する場合、このjsファイルを必ずインポートする必要があります
    drupal_add_js("/misc/ajax.js") ;  // ajaxのjsファイルをインポート
  • ここで、あるフォーム(text_form)のボタンを押してajaxを通じてサーバーとの交信を行う例とします
    Drupalのajaxの仕組みと扱い方法
  • フォームはDrupalのFormAPIで生成、または別の方法で生成します
    // 例: DrupalのAPIでフォームを作成
    //     送信ボタンを押して、"test message"の文字列でフォームを置換します
      $form['card_last']=array(
          "#type" => "markup",
          "#markup" => "",
          "#prefix" => "<div id='card-last-result-div'>",  // ajaxで置換したいエリア
          "#suffix" => "</div>",
      );
    
      $form['card_last']['submit'] = array(
          '#type' => 'submit',
          '#value' => '送信',
          '#attributes' => array( 'id'=>'test-form-submit' ),  // ajaxのIDを指定します
          "#ajax" => array(
            "callback" => "_ajax_callback_form",  // ajaxのコールバック
            'wrapper' => 'card-last-result-div',
            'method' => 'replace',
            'effect' => 'fade',
          ),
      );
    
    // カスタムJSファイルをフォームと一緒に添付
      $form['#attached']['js'] = array( "file_path/custom_ajax.js" );

DrupalのAJAXオブジェクトを生成してサーバーとの交信を用意します

  • 一つカスタムjsファイルを用意して(例:custom_ajax.js)、フォーム生成と同時にクライアント側に渡します
  • Drupal.ajaxオブジェクトを生成します
    (function($){
      Drupal.behaviors.custom_module_name={
        attach:function(cotext,settings){
          $("#test-form-submit").once("test-form-submit",function(){ //指定したフォームのみ
            var base = $(this).attr('id');  //フォームIDの使用
            var element_settings = {
              url: window.location.protocol + "//"+ window.location.hostname + settings.basePath + settings.pathPrefix + "system/ajax",
              event: 'click',
              progress: { type: 'throbber', },
            };
        // Drupalのajaxオブジェクトを生成します
            Drupal.ajax[base] = new Drupal.ajax(base, this, element_settings);
    
        // 送信ボタンにListenerを追加
            $("#test-form-submit").on( 'click',function(){
              $(this).click();  // ajaxを作動させます
            });
          });
        }
      };
    })(jQuery)
    
    • base(必須): ajaxの識別、ここでフォームID(test-form-submit)で指定
    • url(必須): サイトのパス/system/ajax
    • event: ajaxを作動させるイベントの指定
    • progress: ajaxでデータ交信中にロードの動画アイコンの表示
  • サーバーサイトでajaxに呼び出されるファンクションを用意します、"test message"をajaxに返還します
    function _ajax_callback_card_last_form($form, &$form_state){
      $commands[] = ajax_command_replace('#card-last-result-div', "test message"); 
      return array('#type' => 'ajax', '#commands' => $commands);
    }
  • ここで、ajax_commandを利用しなくても、ajax_deliverでメッセージの返還もできます
drupal
development
form

やりたいこと:Drupalのフォーム(FormAPI)でajaxを実装して各フォーム要素を動的に制御したいです

  • 環境:Drupal7.54
  • フォーム(FormAPI)で各要素の表示/非表示などの制御が簡単にできます(Drupalのフォーム(Form API)の「#states」で各フォーム要素の動作制御が可能)。
    • フォームを作成時にJavascriptを意識しなくてよい
    • 事前にフォームの要素を用意して表示/非表示のようなお動作制御
    • データ取得するなどの動作制御はできません
  • ajaxで高等な動作(データ取得など)制御ができるので、FormAPIもこれ基盤を用意して、簡単に実装できます。

FormAPIで「#ajax」の記述(ポイント:callback、wrapper)だけで良いのでJavascriptの意識必要はありません

  • FormAPIがajaxのインターフェースを用意しています。Form記述で「#ajax」要素を追加すれば、Javascriptなどのコーティングはいらないです
    • callbak:ajaxのリクエストが来た時に呼び出される関数
    • wrapper:ajaxのサーバー処理完了後に結果を画面に表示させる場所の指定
  • 簡単の例:テキスト入力フォームを生成して、入力したメッセージを画面のどこかに再表示させるajax処理
    FormAPIのajaxの実装方法
  • ajaxの記述はFormAPIの実装時に追加します。
    /**
     *  Implementation of hook_menu()
     *  新規フォームを表示するページのメニュー設定
     */
    function my_module_name_menu() {
      $items['test/form'] = array(
          'title' => 'Ajaxテスト',
          'page callback' => 'drupal_get_form',
          'page arguments' => array('my_sample_form'),
          'access arguments' => array('access content'),
      );
    }
    
    /**
     * フォームの各要素の記述
     */
    function my_sample_form($form, &$form_state){
      // メッセージ入力フィールド
      $form['message'] = array(
          '#type' => 'textfield',
          '#title' => t('メッセージを入力'),
      );
    
      // 入力されたメッセージをajaxで表示する場所
      $form['msg_wrapper'] = array(
          '#type' => 'markup',
          '#markup' => "",
          '#prefix' => '<div id="msg-wrapper">',
          '#suffix' => '</div>',
      );
    
      // サブミットボタン
      $form['submit'] = array(
          '#type' => 'submit',
          '#value' => '送信',
          '#ajax' => array(
              'callback' => 'test_sample_form_ajax_callback',
              'wrapper' => 'msg-wrapper',
              'effect' => 'fade',
          ),
      );
    
      return $form;
    }
    
    /**
     * ajaxに呼び出される関数
     */
    function test_sample_form_ajax_callback($form, $form_state) {
      // 入力されたメッセージを指定した場所にセット
      $form['msg_wrapper']['#markup'] = '入力されたメッセージ:' .
                  check_plain($form_state['values']['message']) ;
      // 置換する部品を返す
      return $form['msg_wrapper'] ;
    }

     
drupal
development
ajax

やりたいこと:Drupalのプログラムレベルで簡単にajaxを利用してクライアント側でデータ交信をしたいです

  • 環境:Drupal7.54
  • DrupalのFormAPIで簡単にajaxの実装ができます(Drupalのフォーム(FromAPI)でのajaxの実装 )
  • FormAPIだけではなく、Drupalをカスタマイズ時にいろいろなところでajaxを実装したいことがあります

ポイント1:Drupalでajaxに必要なライブラリをロードし、クライアント側にjquery.form.jsファイルをセット

  • サーバー側でdrupal.ajaxのライブラリをロードする必要があります
  • クライアント側にjquery.form.jsファイルを設置する必要があります
  • この処理はajax処理するページをロード時に行えれば良いです。
    • 例:hook_init()内で処理する
      /**
       * Implements hook_init().
       */
      function YOUR_MODULE_NAME_init()
      {
        drupal_add_js('misc/jquery.form.js');
        drupal_add_library('system','drupal.ajax');
      }
  • クライアント側のブラウザのプロパティでjquery.form.jsがセットされたことの確認ができます

ポイント2:クライアント側のajax起動リンク内にajax対応可否のパラメーター「nojs」とクラス属性「use-ajax」のセット

  • ajaxの起動リンクの作成基本パターン: 
    <a href="text/ajax/nojs/1234" class="use-ajax">ajaxリンク</a>
    • hrefにある「nojs」が決まりの文字
    • hrefにある「1234」はサーバー側に転送したい必要なパラメーター
    • class="use-ajax"はこのリンクがajax用に決める
  • クライアント側のjsで使用しているブラウザがajax対応可能かを判断して、ajax起動リンクに「nojs」のパラメーターを書き換え(利用可能:nojs⇒ajax)てサーバー側に転送
  • サーバー側がajax利用可否よりクライアント側にajax対応有無の結果を返します
    Drupalのajaxフレームワークの利用
  • 上記例のプログラムは以下のようで
    /**
     * Implements hook_init().
     */
    function test_module_init()
    {
      drupal_add_js('misc/jquery.form.js');
      drupal_add_library('system','drupal.ajax');
    }
    
    /**
     *  Implementation of hook_menu()
     */
    function test_module_menu() {
      $items['test/ajax/%/%']=array(     // URLの2,3番目がクライアント側で生成
          'page callback' => 'ajax_node_response',
          'page arguments' => array(2,3),   // URLの2,3番目の引数をコールバック関数に渡す
          'access callback' => 'user_access',
          'access arguments' => array('access content'),
          'type' => MENU_CALLBACK,
      );
      return $items;
    }
    
    function ajax_node_response($type="ajax", $nid=0){
      $node = node_load( $nid, NULL, false );
      $vnode = node_view($node);
      $output = theme('node', $vnode);
      if( $type="ajax" ){
        $commands=array();
        $commands[]=ajax_command_replace( '#block-system-main','<section id="block-system-main">'.$output.'</section>' ) ;
        $page = array(
          '#type' => 'ajax',
          '#commands' => $commands,
        );
        ajax_deliver( $page ) ;   // ajax対応ブラウザの結果
      } else {
        $output = '<div id="content">'.$output.'</div>';  // ajax非対応ブラウザの結果
        return $output;
      }
    }
    

ポイント3:クライアント側で実行させたい部分はajax_commandを使用します

  • クライアント側で処理結果をどこに入り替えはajax_command_replaceで指定します
  • 結果の挿入、入れ替え、削除、css処理などがいろいろあります。詳細は本家のajax_command一覧を参考してください

 

drupal
form
ajax

Drupalのajax_commandの基本:登録されているコマンド(例:ajax_command_invokeなど)でクライアント側に実行コマンドを送ります

  • 背景:Drupal7.54、コアーモジュールajaxの利用
  • Drupalのajax利用は別の記事を参考してください
    • Drupalでajaxのフレームワークが簡単に作成できる
    • Drupalのajaxの仕組みおよびプログラム上での扱う
  • サーバーサイトの処理結果をクライアント側に送る方法:
    • FormAPIに"#ajax"セットにある"wrapper"に指定されたエレメントに処理結果の置換 <-  'replaceWith', 'append', 'prepend', 'before', 'after', or 'html'
    • ajax_commadよりクライアント側の要素挿入、置換、削除などの操作ができます
  • ajax_commandがサーバー側での処理結果をクライアント側により柔軟に操作することができます
    • ajax_commandに登録されている関数が本家のページを参考してください
    • クライアント側の要素挿入、置換、削除、javascript実行などができます

処理結果をクライアント側に実行させるためカスタムajaxコマンドの作成

  • クライアント側でjQueryのセレクターで選択できる要素の操作にはajax_commandに登録された関数で行うことができます
  • 複雑なjascript実行、複数のセレクターなどの場合、カスタムajax_commandの作成が必要となります
    • クライアント側のjavascript関数を呼び出します
    • サーバーサイトの処理ロジックをクライアント側で行います

jQueryで登録さた関数をajax_command_invokeで呼び出します

  • クライアント側で事前にjQueryのjavascript関数を定義します
  • ajax_command_invokeで定義された関数を呼び出します
    ajax_command_invokeでカスタムajax関数の呼び出し

Drupal.ajaxネームスペースのプロトタイプに登録されたjavascript関数をajax_commandで呼び出します

  • Drupal.ajaネームスペースのプロトタイプを利用して、javascript関数を事前に登録します
  • ajax_command(登録済みの関数ではない)でjavascript関数を呼び出します
    ajax_commandに登録されていないjs関数の呼び出し
drupal
development
ajax

やりたいこと:Drupalのプログラムレベルで簡単にajaxを利用してクライアント側でデータ交信をしたいです

  • 環境:Drupal7.54
  • DrupalのFormAPIで簡単にajaxの実装ができます(Drupalのフォーム(FromAPI)でのajaxの実装 )
  • FormAPIだけではなく、Drupalをカスタマイズ時にいろいろなところでajaxを実装したいことがあります

ポイント1:Drupalでajaxに必要なライブラリをロードし、クライアント側にjquery.form.jsファイルをセット

  • サーバー側でdrupal.ajaxのライブラリをロードする必要があります
  • クライアント側にjquery.form.jsファイルを設置する必要があります
  • この処理はajax処理するページをロード時に行えれば良いです。
    • 例:hook_init()内で処理する
      /**
       * Implements hook_init().
       */
      function YOUR_MODULE_NAME_init()
      {
        drupal_add_js('misc/jquery.form.js');
        drupal_add_library('system','drupal.ajax');
      }
  • クライアント側のブラウザのプロパティでjquery.form.jsがセットされたことの確認ができます

ポイント2:クライアント側のajax起動リンク内にajax対応可否のパラメーター「nojs」とクラス属性「use-ajax」のセット

  • ajaxの起動リンクの作成基本パターン: 
    <a href="text/ajax/nojs/1234" class="use-ajax">ajaxリンク</a>
    • hrefにある「nojs」が決まりの文字
    • hrefにある「1234」はサーバー側に転送したい必要なパラメーター
    • class="use-ajax"はこのリンクがajax用に決める
  • クライアント側のjsで使用しているブラウザがajax対応可能かを判断して、ajax起動リンクに「nojs」のパラメーターを書き換え(利用可能:nojs⇒ajax)てサーバー側に転送
  • サーバー側がajax利用可否よりクライアント側にajax対応有無の結果を返します
    Drupalのajaxフレームワークの利用
  • 上記例のプログラムは以下のようで
    /**
     * Implements hook_init().
     */
    function test_module_init()
    {
      drupal_add_js('misc/jquery.form.js');
      drupal_add_library('system','drupal.ajax');
    }
    
    /**
     *  Implementation of hook_menu()
     */
    function test_module_menu() {
      $items['test/ajax/%/%']=array(     // URLの2,3番目がクライアント側で生成
          'page callback' => 'ajax_node_response',
          'page arguments' => array(2,3),   // URLの2,3番目の引数をコールバック関数に渡す
          'access callback' => 'user_access',
          'access arguments' => array('access content'),
          'type' => MENU_CALLBACK,
      );
      return $items;
    }
    
    function ajax_node_response($type="ajax", $nid=0){
      $node = node_load( $nid, NULL, false );
      $vnode = node_view($node);
      $output = theme('node', $vnode);
      if( $type="ajax" ){
        $commands=array();
        $commands[]=ajax_command_replace( '#block-system-main','<section id="block-system-main">'.$output.'</section>' ) ;
        $page = array(
          '#type' => 'ajax',
          '#commands' => $commands,
        );
        ajax_deliver( $page ) ;   // ajax対応ブラウザの結果
      } else {
        $output = '<div id="content">'.$output.'</div>';  // ajax非対応ブラウザの結果
        return $output;
      }
    }
    

ポイント3:クライアント側で実行させたい部分はajax_commandを使用します

  • クライアント側で処理結果をどこに入り替えはajax_command_replaceで指定します
  • 結果の挿入、入れ替え、削除、css処理などがいろいろあります。詳細は本家のajax_command一覧を参考してください

 

drupal
development
system_management
ajax

DrupalのFormAPIでフォーム内でAJAXを扱うのは基本です

  • DrupalのFormAPIがAJAXを実装しています
  • FormAPIでのAJAXの扱う:「Drupalのフォーム(FromAPI)でのajaxの実装」を参考してください
  • FormAPIでのAJAXでの扱う利点:
    • フォームを作成しているときに簡単にAJAXの実装が可能
    • AJAXの仕組みを知らなくても、手順通りに実装すればよいです
  • 大半のケースでFormAPIで解決できるので、AJAXをFormAPIで実装するのは一般的となります

FormAPI以外にAJAXの実装はDrupal.ajaxオブジェクトで行います

  • DrupalのAJAXのフレームワークは「misc/ajax.js」にあります
  • AJAXを実装する場合、このjsファイルを必ずインポートする必要があります
    drupal_add_js("/misc/ajax.js") ;  // ajaxのjsファイルをインポート
  • ここで、あるフォーム(text_form)のボタンを押してajaxを通じてサーバーとの交信を行う例とします
    Drupalのajaxの仕組みと扱い方法
  • フォームはDrupalのFormAPIで生成、または別の方法で生成します
    // 例: DrupalのAPIでフォームを作成
    //     送信ボタンを押して、"test message"の文字列でフォームを置換します
      $form['card_last']=array(
          "#type" => "markup",
          "#markup" => "",
          "#prefix" => "<div id='card-last-result-div'>",  // ajaxで置換したいエリア
          "#suffix" => "</div>",
      );
    
      $form['card_last']['submit'] = array(
          '#type' => 'submit',
          '#value' => '送信',
          '#attributes' => array( 'id'=>'test-form-submit' ),  // ajaxのIDを指定します
          "#ajax" => array(
            "callback" => "_ajax_callback_form",  // ajaxのコールバック
            'wrapper' => 'card-last-result-div',
            'method' => 'replace',
            'effect' => 'fade',
          ),
      );
    
    // カスタムJSファイルをフォームと一緒に添付
      $form['#attached']['js'] = array( "file_path/custom_ajax.js" );

DrupalのAJAXオブジェクトを生成してサーバーとの交信を用意します

  • 一つカスタムjsファイルを用意して(例:custom_ajax.js)、フォーム生成と同時にクライアント側に渡します
  • Drupal.ajaxオブジェクトを生成します
    (function($){
      Drupal.behaviors.custom_module_name={
        attach:function(cotext,settings){
          $("#test-form-submit").once("test-form-submit",function(){ //指定したフォームのみ
            var base = $(this).attr('id');  //フォームIDの使用
            var element_settings = {
              url: window.location.protocol + "//"+ window.location.hostname + settings.basePath + settings.pathPrefix + "system/ajax",
              event: 'click',
              progress: { type: 'throbber', },
            };
        // Drupalのajaxオブジェクトを生成します
            Drupal.ajax[base] = new Drupal.ajax(base, this, element_settings);
    
        // 送信ボタンにListenerを追加
            $("#test-form-submit").on( 'click',function(){
              $(this).click();  // ajaxを作動させます
            });
          });
        }
      };
    })(jQuery)
    
    • base(必須): ajaxの識別、ここでフォームID(test-form-submit)で指定
    • url(必須): サイトのパス/system/ajax
    • event: ajaxを作動させるイベントの指定
    • progress: ajaxでデータ交信中にロードの動画アイコンの表示
  • サーバーサイトでajaxに呼び出されるファンクションを用意します、"test message"をajaxに返還します
    function _ajax_callback_card_last_form($form, &$form_state){
      $commands[] = ajax_command_replace('#card-last-result-div', "test message"); 
      return array('#type' => 'ajax', '#commands' => $commands);
    }
  • ここで、ajax_commandを利用しなくても、ajax_deliverでメッセージの返還もできます
drupal
development
form

やりたいこと:Drupalのフォーム(FormAPI)でajaxを実装して各フォーム要素を動的に制御したいです

  • 環境:Drupal7.54
  • フォーム(FormAPI)で各要素の表示/非表示などの制御が簡単にできます(Drupalのフォーム(Form API)の「#states」で各フォーム要素の動作制御が可能)。
    • フォームを作成時にJavascriptを意識しなくてよい
    • 事前にフォームの要素を用意して表示/非表示のようなお動作制御
    • データ取得するなどの動作制御はできません
  • ajaxで高等な動作(データ取得など)制御ができるので、FormAPIもこれ基盤を用意して、簡単に実装できます。

FormAPIで「#ajax」の記述(ポイント:callback、wrapper)だけで良いのでJavascriptの意識必要はありません

  • FormAPIがajaxのインターフェースを用意しています。Form記述で「#ajax」要素を追加すれば、Javascriptなどのコーティングはいらないです
    • callbak:ajaxのリクエストが来た時に呼び出される関数
    • wrapper:ajaxのサーバー処理完了後に結果を画面に表示させる場所の指定
  • 簡単の例:テキスト入力フォームを生成して、入力したメッセージを画面のどこかに再表示させるajax処理
    FormAPIのajaxの実装方法
  • ajaxの記述はFormAPIの実装時に追加します。
    /**
     *  Implementation of hook_menu()
     *  新規フォームを表示するページのメニュー設定
     */
    function my_module_name_menu() {
      $items['test/form'] = array(
          'title' => 'Ajaxテスト',
          'page callback' => 'drupal_get_form',
          'page arguments' => array('my_sample_form'),
          'access arguments' => array('access content'),
      );
    }
    
    /**
     * フォームの各要素の記述
     */
    function my_sample_form($form, &$form_state){
      // メッセージ入力フィールド
      $form['message'] = array(
          '#type' => 'textfield',
          '#title' => t('メッセージを入力'),
      );
    
      // 入力されたメッセージをajaxで表示する場所
      $form['msg_wrapper'] = array(
          '#type' => 'markup',
          '#markup' => "",
          '#prefix' => '<div id="msg-wrapper">',
          '#suffix' => '</div>',
      );
    
      // サブミットボタン
      $form['submit'] = array(
          '#type' => 'submit',
          '#value' => '送信',
          '#ajax' => array(
              'callback' => 'test_sample_form_ajax_callback',
              'wrapper' => 'msg-wrapper',
              'effect' => 'fade',
          ),
      );
    
      return $form;
    }
    
    /**
     * ajaxに呼び出される関数
     */
    function test_sample_form_ajax_callback($form, $form_state) {
      // 入力されたメッセージを指定した場所にセット
      $form['msg_wrapper']['#markup'] = '入力されたメッセージ:' .
                  check_plain($form_state['values']['message']) ;
      // 置換する部品を返す
      return $form['msg_wrapper'] ;
    }

     
drupal
development
ajax

やりたいこと:Drupalのプログラムレベルで簡単にajaxを利用してクライアント側でデータ交信をしたいです

  • 環境:Drupal7.54
  • DrupalのFormAPIで簡単にajaxの実装ができます(Drupalのフォーム(FromAPI)でのajaxの実装 )
  • FormAPIだけではなく、Drupalをカスタマイズ時にいろいろなところでajaxを実装したいことがあります

ポイント1:Drupalでajaxに必要なライブラリをロードし、クライアント側にjquery.form.jsファイルをセット

  • サーバー側でdrupal.ajaxのライブラリをロードする必要があります
  • クライアント側にjquery.form.jsファイルを設置する必要があります
  • この処理はajax処理するページをロード時に行えれば良いです。
    • 例:hook_init()内で処理する
      /**
       * Implements hook_init().
       */
      function YOUR_MODULE_NAME_init()
      {
        drupal_add_js('misc/jquery.form.js');
        drupal_add_library('system','drupal.ajax');
      }
  • クライアント側のブラウザのプロパティでjquery.form.jsがセットされたことの確認ができます

ポイント2:クライアント側のajax起動リンク内にajax対応可否のパラメーター「nojs」とクラス属性「use-ajax」のセット

  • ajaxの起動リンクの作成基本パターン: 
    <a href="text/ajax/nojs/1234" class="use-ajax">ajaxリンク</a>
    • hrefにある「nojs」が決まりの文字
    • hrefにある「1234」はサーバー側に転送したい必要なパラメーター
    • class="use-ajax"はこのリンクがajax用に決める
  • クライアント側のjsで使用しているブラウザがajax対応可能かを判断して、ajax起動リンクに「nojs」のパラメーターを書き換え(利用可能:nojs⇒ajax)てサーバー側に転送
  • サーバー側がajax利用可否よりクライアント側にajax対応有無の結果を返します
    Drupalのajaxフレームワークの利用
  • 上記例のプログラムは以下のようで
    /**
     * Implements hook_init().
     */
    function test_module_init()
    {
      drupal_add_js('misc/jquery.form.js');
      drupal_add_library('system','drupal.ajax');
    }
    
    /**
     *  Implementation of hook_menu()
     */
    function test_module_menu() {
      $items['test/ajax/%/%']=array(     // URLの2,3番目がクライアント側で生成
          'page callback' => 'ajax_node_response',
          'page arguments' => array(2,3),   // URLの2,3番目の引数をコールバック関数に渡す
          'access callback' => 'user_access',
          'access arguments' => array('access content'),
          'type' => MENU_CALLBACK,
      );
      return $items;
    }
    
    function ajax_node_response($type="ajax", $nid=0){
      $node = node_load( $nid, NULL, false );
      $vnode = node_view($node);
      $output = theme('node', $vnode);
      if( $type="ajax" ){
        $commands=array();
        $commands[]=ajax_command_replace( '#block-system-main','<section id="block-system-main">'.$output.'</section>' ) ;
        $page = array(
          '#type' => 'ajax',
          '#commands' => $commands,
        );
        ajax_deliver( $page ) ;   // ajax対応ブラウザの結果
      } else {
        $output = '<div id="content">'.$output.'</div>';  // ajax非対応ブラウザの結果
        return $output;
      }
    }
    

ポイント3:クライアント側で実行させたい部分はajax_commandを使用します

  • クライアント側で処理結果をどこに入り替えはajax_command_replaceで指定します
  • 結果の挿入、入れ替え、削除、css処理などがいろいろあります。詳細は本家のajax_command一覧を参考してください

 

drupal
form
ajax

Drupalのajax_commandの基本:登録されているコマンド(例:ajax_command_invokeなど)でクライアント側に実行コマンドを送ります

  • 背景:Drupal7.54、コアーモジュールajaxの利用
  • Drupalのajax利用は別の記事を参考してください
    • Drupalでajaxのフレームワークが簡単に作成できる
    • Drupalのajaxの仕組みおよびプログラム上での扱う
  • サーバーサイトの処理結果をクライアント側に送る方法:
    • FormAPIに"#ajax"セットにある"wrapper"に指定されたエレメントに処理結果の置換 <-  'replaceWith', 'append', 'prepend', 'before', 'after', or 'html'
    • ajax_commadよりクライアント側の要素挿入、置換、削除などの操作ができます
  • ajax_commandがサーバー側での処理結果をクライアント側により柔軟に操作することができます
    • ajax_commandに登録されている関数が本家のページを参考してください
    • クライアント側の要素挿入、置換、削除、javascript実行などができます

処理結果をクライアント側に実行させるためカスタムajaxコマンドの作成

  • クライアント側でjQueryのセレクターで選択できる要素の操作にはajax_commandに登録された関数で行うことができます
  • 複雑なjascript実行、複数のセレクターなどの場合、カスタムajax_commandの作成が必要となります
    • クライアント側のjavascript関数を呼び出します
    • サーバーサイトの処理ロジックをクライアント側で行います

jQueryで登録さた関数をajax_command_invokeで呼び出します

  • クライアント側で事前にjQueryのjavascript関数を定義します
  • ajax_command_invokeで定義された関数を呼び出します
    ajax_command_invokeでカスタムajax関数の呼び出し

Drupal.ajaxネームスペースのプロトタイプに登録されたjavascript関数をajax_commandで呼び出します

  • Drupal.ajaネームスペースのプロトタイプを利用して、javascript関数を事前に登録します
  • ajax_command(登録済みの関数ではない)でjavascript関数を呼び出します
    ajax_commandに登録されていないjs関数の呼び出し
drupal
development
ajax

やりたいこと:Drupalのプログラムレベルで簡単にajaxを利用してクライアント側でデータ交信をしたいです

  • 環境:Drupal7.54
  • DrupalのFormAPIで簡単にajaxの実装ができます(Drupalのフォーム(FromAPI)でのajaxの実装 )
  • FormAPIだけではなく、Drupalをカスタマイズ時にいろいろなところでajaxを実装したいことがあります

ポイント1:Drupalでajaxに必要なライブラリをロードし、クライアント側にjquery.form.jsファイルをセット

  • サーバー側でdrupal.ajaxのライブラリをロードする必要があります
  • クライアント側にjquery.form.jsファイルを設置する必要があります
  • この処理はajax処理するページをロード時に行えれば良いです。
    • 例:hook_init()内で処理する
      /**
       * Implements hook_init().
       */
      function YOUR_MODULE_NAME_init()
      {
        drupal_add_js('misc/jquery.form.js');
        drupal_add_library('system','drupal.ajax');
      }
  • クライアント側のブラウザのプロパティでjquery.form.jsがセットされたことの確認ができます

ポイント2:クライアント側のajax起動リンク内にajax対応可否のパラメーター「nojs」とクラス属性「use-ajax」のセット

  • ajaxの起動リンクの作成基本パターン: 
    <a href="text/ajax/nojs/1234" class="use-ajax">ajaxリンク</a>
    • hrefにある「nojs」が決まりの文字
    • hrefにある「1234」はサーバー側に転送したい必要なパラメーター
    • class="use-ajax"はこのリンクがajax用に決める
  • クライアント側のjsで使用しているブラウザがajax対応可能かを判断して、ajax起動リンクに「nojs」のパラメーターを書き換え(利用可能:nojs⇒ajax)てサーバー側に転送
  • サーバー側がajax利用可否よりクライアント側にajax対応有無の結果を返します
    Drupalのajaxフレームワークの利用
  • 上記例のプログラムは以下のようで
    /**
     * Implements hook_init().
     */
    function test_module_init()
    {
      drupal_add_js('misc/jquery.form.js');
      drupal_add_library('system','drupal.ajax');
    }
    
    /**
     *  Implementation of hook_menu()
     */
    function test_module_menu() {
      $items['test/ajax/%/%']=array(     // URLの2,3番目がクライアント側で生成
          'page callback' => 'ajax_node_response',
          'page arguments' => array(2,3),   // URLの2,3番目の引数をコールバック関数に渡す
          'access callback' => 'user_access',
          'access arguments' => array('access content'),
          'type' => MENU_CALLBACK,
      );
      return $items;
    }
    
    function ajax_node_response($type="ajax", $nid=0){
      $node = node_load( $nid, NULL, false );
      $vnode = node_view($node);
      $output = theme('node', $vnode);
      if( $type="ajax" ){
        $commands=array();
        $commands[]=ajax_command_replace( '#block-system-main','<section id="block-system-main">'.$output.'</section>' ) ;
        $page = array(
          '#type' => 'ajax',
          '#commands' => $commands,
        );
        ajax_deliver( $page ) ;   // ajax対応ブラウザの結果
      } else {
        $output = '<div id="content">'.$output.'</div>';  // ajax非対応ブラウザの結果
        return $output;
      }
    }
    

ポイント3:クライアント側で実行させたい部分はajax_commandを使用します

  • クライアント側で処理結果をどこに入り替えはajax_command_replaceで指定します
  • 結果の挿入、入れ替え、削除、css処理などがいろいろあります。詳細は本家のajax_command一覧を参考してください

 

drupal
development
system_management
ajax

DrupalのFormAPIでフォーム内でAJAXを扱うのは基本です

  • DrupalのFormAPIがAJAXを実装しています
  • FormAPIでのAJAXの扱う:「Drupalのフォーム(FromAPI)でのajaxの実装」を参考してください
  • FormAPIでのAJAXでの扱う利点:
    • フォームを作成しているときに簡単にAJAXの実装が可能
    • AJAXの仕組みを知らなくても、手順通りに実装すればよいです
  • 大半のケースでFormAPIで解決できるので、AJAXをFormAPIで実装するのは一般的となります

FormAPI以外にAJAXの実装はDrupal.ajaxオブジェクトで行います

  • DrupalのAJAXのフレームワークは「misc/ajax.js」にあります
  • AJAXを実装する場合、このjsファイルを必ずインポートする必要があります
    drupal_add_js("/misc/ajax.js") ;  // ajaxのjsファイルをインポート
  • ここで、あるフォーム(text_form)のボタンを押してajaxを通じてサーバーとの交信を行う例とします
    Drupalのajaxの仕組みと扱い方法
  • フォームはDrupalのFormAPIで生成、または別の方法で生成します
    // 例: DrupalのAPIでフォームを作成
    //     送信ボタンを押して、"test message"の文字列でフォームを置換します
      $form['card_last']=array(
          "#type" => "markup",
          "#markup" => "",
          "#prefix" => "<div id='card-last-result-div'>",  // ajaxで置換したいエリア
          "#suffix" => "</div>",
      );
    
      $form['card_last']['submit'] = array(
          '#type' => 'submit',
          '#value' => '送信',
          '#attributes' => array( 'id'=>'test-form-submit' ),  // ajaxのIDを指定します
          "#ajax" => array(
            "callback" => "_ajax_callback_form",  // ajaxのコールバック
            'wrapper' => 'card-last-result-div',
            'method' => 'replace',
            'effect' => 'fade',
          ),
      );
    
    // カスタムJSファイルをフォームと一緒に添付
      $form['#attached']['js'] = array( "file_path/custom_ajax.js" );

DrupalのAJAXオブジェクトを生成してサーバーとの交信を用意します

  • 一つカスタムjsファイルを用意して(例:custom_ajax.js)、フォーム生成と同時にクライアント側に渡します
  • Drupal.ajaxオブジェクトを生成します
    (function($){
      Drupal.behaviors.custom_module_name={
        attach:function(cotext,settings){
          $("#test-form-submit").once("test-form-submit",function(){ //指定したフォームのみ
            var base = $(this).attr('id');  //フォームIDの使用
            var element_settings = {
              url: window.location.protocol + "//"+ window.location.hostname + settings.basePath + settings.pathPrefix + "system/ajax",
              event: 'click',
              progress: { type: 'throbber', },
            };
        // Drupalのajaxオブジェクトを生成します
            Drupal.ajax[base] = new Drupal.ajax(base, this, element_settings);
    
        // 送信ボタンにListenerを追加
            $("#test-form-submit").on( 'click',function(){
              $(this).click();  // ajaxを作動させます
            });
          });
        }
      };
    })(jQuery)
    
    • base(必須): ajaxの識別、ここでフォームID(test-form-submit)で指定
    • url(必須): サイトのパス/system/ajax
    • event: ajaxを作動させるイベントの指定
    • progress: ajaxでデータ交信中にロードの動画アイコンの表示
  • サーバーサイトでajaxに呼び出されるファンクションを用意します、"test message"をajaxに返還します
    function _ajax_callback_card_last_form($form, &$form_state){
      $commands[] = ajax_command_replace('#card-last-result-div', "test message"); 
      return array('#type' => 'ajax', '#commands' => $commands);
    }
  • ここで、ajax_commandを利用しなくても、ajax_deliverでメッセージの返還もできます
drupal
development
form

やりたいこと:Drupalのフォーム(FormAPI)でajaxを実装して各フォーム要素を動的に制御したいです

  • 環境:Drupal7.54
  • フォーム(FormAPI)で各要素の表示/非表示などの制御が簡単にできます(Drupalのフォーム(Form API)の「#states」で各フォーム要素の動作制御が可能)。
    • フォームを作成時にJavascriptを意識しなくてよい
    • 事前にフォームの要素を用意して表示/非表示のようなお動作制御
    • データ取得するなどの動作制御はできません
  • ajaxで高等な動作(データ取得など)制御ができるので、FormAPIもこれ基盤を用意して、簡単に実装できます。

FormAPIで「#ajax」の記述(ポイント:callback、wrapper)だけで良いのでJavascriptの意識必要はありません

  • FormAPIがajaxのインターフェースを用意しています。Form記述で「#ajax」要素を追加すれば、Javascriptなどのコーティングはいらないです
    • callbak:ajaxのリクエストが来た時に呼び出される関数
    • wrapper:ajaxのサーバー処理完了後に結果を画面に表示させる場所の指定
  • 簡単の例:テキスト入力フォームを生成して、入力したメッセージを画面のどこかに再表示させるajax処理
    FormAPIのajaxの実装方法
  • ajaxの記述はFormAPIの実装時に追加します。
    /**
     *  Implementation of hook_menu()
     *  新規フォームを表示するページのメニュー設定
     */
    function my_module_name_menu() {
      $items['test/form'] = array(
          'title' => 'Ajaxテスト',
          'page callback' => 'drupal_get_form',
          'page arguments' => array('my_sample_form'),
          'access arguments' => array('access content'),
      );
    }
    
    /**
     * フォームの各要素の記述
     */
    function my_sample_form($form, &$form_state){
      // メッセージ入力フィールド
      $form['message'] = array(
          '#type' => 'textfield',
          '#title' => t('メッセージを入力'),
      );
    
      // 入力されたメッセージをajaxで表示する場所
      $form['msg_wrapper'] = array(
          '#type' => 'markup',
          '#markup' => "",
          '#prefix' => '<div id="msg-wrapper">',
          '#suffix' => '</div>',
      );
    
      // サブミットボタン
      $form['submit'] = array(
          '#type' => 'submit',
          '#value' => '送信',
          '#ajax' => array(
              'callback' => 'test_sample_form_ajax_callback',
              'wrapper' => 'msg-wrapper',
              'effect' => 'fade',
          ),
      );
    
      return $form;
    }
    
    /**
     * ajaxに呼び出される関数
     */
    function test_sample_form_ajax_callback($form, $form_state) {
      // 入力されたメッセージを指定した場所にセット
      $form['msg_wrapper']['#markup'] = '入力されたメッセージ:' .
                  check_plain($form_state['values']['message']) ;
      // 置換する部品を返す
      return $form['msg_wrapper'] ;
    }

     
drupal
development
ajax

やりたいこと:Drupalのプログラムレベルで簡単にajaxを利用してクライアント側でデータ交信をしたいです

  • 環境:Drupal7.54
  • DrupalのFormAPIで簡単にajaxの実装ができます(Drupalのフォーム(FromAPI)でのajaxの実装 )
  • FormAPIだけではなく、Drupalをカスタマイズ時にいろいろなところでajaxを実装したいことがあります

ポイント1:Drupalでajaxに必要なライブラリをロードし、クライアント側にjquery.form.jsファイルをセット

  • サーバー側でdrupal.ajaxのライブラリをロードする必要があります
  • クライアント側にjquery.form.jsファイルを設置する必要があります
  • この処理はajax処理するページをロード時に行えれば良いです。
    • 例:hook_init()内で処理する
      /**
       * Implements hook_init().
       */
      function YOUR_MODULE_NAME_init()
      {
        drupal_add_js('misc/jquery.form.js');
        drupal_add_library('system','drupal.ajax');
      }
  • クライアント側のブラウザのプロパティでjquery.form.jsがセットされたことの確認ができます

ポイント2:クライアント側のajax起動リンク内にajax対応可否のパラメーター「nojs」とクラス属性「use-ajax」のセット

  • ajaxの起動リンクの作成基本パターン: 
    <a href="text/ajax/nojs/1234" class="use-ajax">ajaxリンク</a>
    • hrefにある「nojs」が決まりの文字
    • hrefにある「1234」はサーバー側に転送したい必要なパラメーター
    • class="use-ajax"はこのリンクがajax用に決める
  • クライアント側のjsで使用しているブラウザがajax対応可能かを判断して、ajax起動リンクに「nojs」のパラメーターを書き換え(利用可能:nojs⇒ajax)てサーバー側に転送
  • サーバー側がajax利用可否よりクライアント側にajax対応有無の結果を返します
    Drupalのajaxフレームワークの利用
  • 上記例のプログラムは以下のようで
    /**
     * Implements hook_init().
     */
    function test_module_init()
    {
      drupal_add_js('misc/jquery.form.js');
      drupal_add_library('system','drupal.ajax');
    }
    
    /**
     *  Implementation of hook_menu()
     */
    function test_module_menu() {
      $items['test/ajax/%/%']=array(     // URLの2,3番目がクライアント側で生成
          'page callback' => 'ajax_node_response',
          'page arguments' => array(2,3),   // URLの2,3番目の引数をコールバック関数に渡す
          'access callback' => 'user_access',
          'access arguments' => array('access content'),
          'type' => MENU_CALLBACK,
      );
      return $items;
    }
    
    function ajax_node_response($type="ajax", $nid=0){
      $node = node_load( $nid, NULL, false );
      $vnode = node_view($node);
      $output = theme('node', $vnode);
      if( $type="ajax" ){
        $commands=array();
        $commands[]=ajax_command_replace( '#block-system-main','<section id="block-system-main">'.$output.'</section>' ) ;
        $page = array(
          '#type' => 'ajax',
          '#commands' => $commands,
        );
        ajax_deliver( $page ) ;   // ajax対応ブラウザの結果
      } else {
        $output = '<div id="content">'.$output.'</div>';  // ajax非対応ブラウザの結果
        return $output;
      }
    }
    

ポイント3:クライアント側で実行させたい部分はajax_commandを使用します

  • クライアント側で処理結果をどこに入り替えはajax_command_replaceで指定します
  • 結果の挿入、入れ替え、削除、css処理などがいろいろあります。詳細は本家のajax_command一覧を参考してください

 

drupal
form
ajax

Drupalのajax_commandの基本:登録されているコマンド(例:ajax_command_invokeなど)でクライアント側に実行コマンドを送ります

  • 背景:Drupal7.54、コアーモジュールajaxの利用
  • Drupalのajax利用は別の記事を参考してください
    • Drupalでajaxのフレームワークが簡単に作成できる
    • Drupalのajaxの仕組みおよびプログラム上での扱う
  • サーバーサイトの処理結果をクライアント側に送る方法:
    • FormAPIに"#ajax"セットにある"wrapper"に指定されたエレメントに処理結果の置換 <-  'replaceWith', 'append', 'prepend', 'before', 'after', or 'html'
    • ajax_commadよりクライアント側の要素挿入、置換、削除などの操作ができます
  • ajax_commandがサーバー側での処理結果をクライアント側により柔軟に操作することができます
    • ajax_commandに登録されている関数が本家のページを参考してください
    • クライアント側の要素挿入、置換、削除、javascript実行などができます

処理結果をクライアント側に実行させるためカスタムajaxコマンドの作成

  • クライアント側でjQueryのセレクターで選択できる要素の操作にはajax_commandに登録された関数で行うことができます
  • 複雑なjascript実行、複数のセレクターなどの場合、カスタムajax_commandの作成が必要となります
    • クライアント側のjavascript関数を呼び出します
    • サーバーサイトの処理ロジックをクライアント側で行います

jQueryで登録さた関数をajax_command_invokeで呼び出します

  • クライアント側で事前にjQueryのjavascript関数を定義します
  • ajax_command_invokeで定義された関数を呼び出します
    ajax_command_invokeでカスタムajax関数の呼び出し

Drupal.ajaxネームスペースのプロトタイプに登録されたjavascript関数をajax_commandで呼び出します

  • Drupal.ajaネームスペースのプロトタイプを利用して、javascript関数を事前に登録します
  • ajax_command(登録済みの関数ではない)でjavascript関数を呼び出します
    ajax_commandに登録されていないjs関数の呼び出し
drupal
development
ajax

やりたいこと:Drupalのプログラムレベルで簡単にajaxを利用してクライアント側でデータ交信をしたいです

  • 環境:Drupal7.54
  • DrupalのFormAPIで簡単にajaxの実装ができます(Drupalのフォーム(FromAPI)でのajaxの実装 )
  • FormAPIだけではなく、Drupalをカスタマイズ時にいろいろなところでajaxを実装したいことがあります

ポイント1:Drupalでajaxに必要なライブラリをロードし、クライアント側にjquery.form.jsファイルをセット

  • サーバー側でdrupal.ajaxのライブラリをロードする必要があります
  • クライアント側にjquery.form.jsファイルを設置する必要があります
  • この処理はajax処理するページをロード時に行えれば良いです。
    • 例:hook_init()内で処理する
      /**
       * Implements hook_init().
       */
      function YOUR_MODULE_NAME_init()
      {
        drupal_add_js('misc/jquery.form.js');
        drupal_add_library('system','drupal.ajax');
      }
  • クライアント側のブラウザのプロパティでjquery.form.jsがセットされたことの確認ができます

ポイント2:クライアント側のajax起動リンク内にajax対応可否のパラメーター「nojs」とクラス属性「use-ajax」のセット

  • ajaxの起動リンクの作成基本パターン: 
    <a href="text/ajax/nojs/1234" class="use-ajax">ajaxリンク</a>
    • hrefにある「nojs」が決まりの文字
    • hrefにある「1234」はサーバー側に転送したい必要なパラメーター
    • class="use-ajax"はこのリンクがajax用に決める
  • クライアント側のjsで使用しているブラウザがajax対応可能かを判断して、ajax起動リンクに「nojs」のパラメーターを書き換え(利用可能:nojs⇒ajax)てサーバー側に転送
  • サーバー側がajax利用可否よりクライアント側にajax対応有無の結果を返します
    Drupalのajaxフレームワークの利用
  • 上記例のプログラムは以下のようで
    /**
     * Implements hook_init().
     */
    function test_module_init()
    {
      drupal_add_js('misc/jquery.form.js');
      drupal_add_library('system','drupal.ajax');
    }
    
    /**
     *  Implementation of hook_menu()
     */
    function test_module_menu() {
      $items['test/ajax/%/%']=array(     // URLの2,3番目がクライアント側で生成
          'page callback' => 'ajax_node_response',
          'page arguments' => array(2,3),   // URLの2,3番目の引数をコールバック関数に渡す
          'access callback' => 'user_access',
          'access arguments' => array('access content'),
          'type' => MENU_CALLBACK,
      );
      return $items;
    }
    
    function ajax_node_response($type="ajax", $nid=0){
      $node = node_load( $nid, NULL, false );
      $vnode = node_view($node);
      $output = theme('node', $vnode);
      if( $type="ajax" ){
        $commands=array();
        $commands[]=ajax_command_replace( '#block-system-main','<section id="block-system-main">'.$output.'</section>' ) ;
        $page = array(
          '#type' => 'ajax',
          '#commands' => $commands,
        );
        ajax_deliver( $page ) ;   // ajax対応ブラウザの結果
      } else {
        $output = '<div id="content">'.$output.'</div>';  // ajax非対応ブラウザの結果
        return $output;
      }
    }
    

ポイント3:クライアント側で実行させたい部分はajax_commandを使用します

  • クライアント側で処理結果をどこに入り替えはajax_command_replaceで指定します
  • 結果の挿入、入れ替え、削除、css処理などがいろいろあります。詳細は本家のajax_command一覧を参考してください

 

drupal
development
system_management
ajax

DrupalのFormAPIでフォーム内でAJAXを扱うのは基本です

  • DrupalのFormAPIがAJAXを実装しています
  • FormAPIでのAJAXの扱う:「Drupalのフォーム(FromAPI)でのajaxの実装」を参考してください
  • FormAPIでのAJAXでの扱う利点:
    • フォームを作成しているときに簡単にAJAXの実装が可能
    • AJAXの仕組みを知らなくても、手順通りに実装すればよいです
  • 大半のケースでFormAPIで解決できるので、AJAXをFormAPIで実装するのは一般的となります

FormAPI以外にAJAXの実装はDrupal.ajaxオブジェクトで行います

  • DrupalのAJAXのフレームワークは「misc/ajax.js」にあります
  • AJAXを実装する場合、このjsファイルを必ずインポートする必要があります
    drupal_add_js("/misc/ajax.js") ;  // ajaxのjsファイルをインポート
  • ここで、あるフォーム(text_form)のボタンを押してajaxを通じてサーバーとの交信を行う例とします
    Drupalのajaxの仕組みと扱い方法
  • フォームはDrupalのFormAPIで生成、または別の方法で生成します
    // 例: DrupalのAPIでフォームを作成
    //     送信ボタンを押して、"test message"の文字列でフォームを置換します
      $form['card_last']=array(
          "#type" => "markup",
          "#markup" => "",
          "#prefix" => "<div id='card-last-result-div'>",  // ajaxで置換したいエリア
          "#suffix" => "</div>",
      );
    
      $form['card_last']['submit'] = array(
          '#type' => 'submit',
          '#value' => '送信',
          '#attributes' => array( 'id'=>'test-form-submit' ),  // ajaxのIDを指定します
          "#ajax" => array(
            "callback" => "_ajax_callback_form",  // ajaxのコールバック
            'wrapper' => 'card-last-result-div',
            'method' => 'replace',
            'effect' => 'fade',
          ),
      );
    
    // カスタムJSファイルをフォームと一緒に添付
      $form['#attached']['js'] = array( "file_path/custom_ajax.js" );

DrupalのAJAXオブジェクトを生成してサーバーとの交信を用意します

  • 一つカスタムjsファイルを用意して(例:custom_ajax.js)、フォーム生成と同時にクライアント側に渡します
  • Drupal.ajaxオブジェクトを生成します
    (function($){
      Drupal.behaviors.custom_module_name={
        attach:function(cotext,settings){
          $("#test-form-submit").once("test-form-submit",function(){ //指定したフォームのみ
            var base = $(this).attr('id');  //フォームIDの使用
            var element_settings = {
              url: window.location.protocol + "//"+ window.location.hostname + settings.basePath + settings.pathPrefix + "system/ajax",
              event: 'click',
              progress: { type: 'throbber', },
            };
        // Drupalのajaxオブジェクトを生成します
            Drupal.ajax[base] = new Drupal.ajax(base, this, element_settings);
    
        // 送信ボタンにListenerを追加
            $("#test-form-submit").on( 'click',function(){
              $(this).click();  // ajaxを作動させます
            });
          });
        }
      };
    })(jQuery)
    
    • base(必須): ajaxの識別、ここでフォームID(test-form-submit)で指定
    • url(必須): サイトのパス/system/ajax
    • event: ajaxを作動させるイベントの指定
    • progress: ajaxでデータ交信中にロードの動画アイコンの表示
  • サーバーサイトでajaxに呼び出されるファンクションを用意します、"test message"をajaxに返還します
    function _ajax_callback_card_last_form($form, &$form_state){
      $commands[] = ajax_command_replace('#card-last-result-div', "test message"); 
      return array('#type' => 'ajax', '#commands' => $commands);
    }
  • ここで、ajax_commandを利用しなくても、ajax_deliverでメッセージの返還もできます
drupal
development
form

やりたいこと:Drupalのフォーム(FormAPI)でajaxを実装して各フォーム要素を動的に制御したいです

  • 環境:Drupal7.54
  • フォーム(FormAPI)で各要素の表示/非表示などの制御が簡単にできます(Drupalのフォーム(Form API)の「#states」で各フォーム要素の動作制御が可能)。
    • フォームを作成時にJavascriptを意識しなくてよい
    • 事前にフォームの要素を用意して表示/非表示のようなお動作制御
    • データ取得するなどの動作制御はできません
  • ajaxで高等な動作(データ取得など)制御ができるので、FormAPIもこれ基盤を用意して、簡単に実装できます。

FormAPIで「#ajax」の記述(ポイント:callback、wrapper)だけで良いのでJavascriptの意識必要はありません

  • FormAPIがajaxのインターフェースを用意しています。Form記述で「#ajax」要素を追加すれば、Javascriptなどのコーティングはいらないです
    • callbak:ajaxのリクエストが来た時に呼び出される関数
    • wrapper:ajaxのサーバー処理完了後に結果を画面に表示させる場所の指定
  • 簡単の例:テキスト入力フォームを生成して、入力したメッセージを画面のどこかに再表示させるajax処理
    FormAPIのajaxの実装方法
  • ajaxの記述はFormAPIの実装時に追加します。
    /**
     *  Implementation of hook_menu()
     *  新規フォームを表示するページのメニュー設定
     */
    function my_module_name_menu() {
      $items['test/form'] = array(
          'title' => 'Ajaxテスト',
          'page callback' => 'drupal_get_form',
          'page arguments' => array('my_sample_form'),
          'access arguments' => array('access content'),
      );
    }
    
    /**
     * フォームの各要素の記述
     */
    function my_sample_form($form, &$form_state){
      // メッセージ入力フィールド
      $form['message'] = array(
          '#type' => 'textfield',
          '#title' => t('メッセージを入力'),
      );
    
      // 入力されたメッセージをajaxで表示する場所
      $form['msg_wrapper'] = array(
          '#type' => 'markup',
          '#markup' => "",
          '#prefix' => '<div id="msg-wrapper">',
          '#suffix' => '</div>',
      );
    
      // サブミットボタン
      $form['submit'] = array(
          '#type' => 'submit',
          '#value' => '送信',
          '#ajax' => array(
              'callback' => 'test_sample_form_ajax_callback',
              'wrapper' => 'msg-wrapper',
              'effect' => 'fade',
          ),
      );
    
      return $form;
    }
    
    /**
     * ajaxに呼び出される関数
     */
    function test_sample_form_ajax_callback($form, $form_state) {
      // 入力されたメッセージを指定した場所にセット
      $form['msg_wrapper']['#markup'] = '入力されたメッセージ:' .
                  check_plain($form_state['values']['message']) ;
      // 置換する部品を返す
      return $form['msg_wrapper'] ;
    }

     
drupal
development
ajax

やりたいこと:Drupalのプログラムレベルで簡単にajaxを利用してクライアント側でデータ交信をしたいです

  • 環境:Drupal7.54
  • DrupalのFormAPIで簡単にajaxの実装ができます(Drupalのフォーム(FromAPI)でのajaxの実装 )
  • FormAPIだけではなく、Drupalをカスタマイズ時にいろいろなところでajaxを実装したいことがあります

ポイント1:Drupalでajaxに必要なライブラリをロードし、クライアント側にjquery.form.jsファイルをセット

  • サーバー側でdrupal.ajaxのライブラリをロードする必要があります
  • クライアント側にjquery.form.jsファイルを設置する必要があります
  • この処理はajax処理するページをロード時に行えれば良いです。
    • 例:hook_init()内で処理する
      /**
       * Implements hook_init().
       */
      function YOUR_MODULE_NAME_init()
      {
        drupal_add_js('misc/jquery.form.js');
        drupal_add_library('system','drupal.ajax');
      }
  • クライアント側のブラウザのプロパティでjquery.form.jsがセットされたことの確認ができます

ポイント2:クライアント側のajax起動リンク内にajax対応可否のパラメーター「nojs」とクラス属性「use-ajax」のセット

  • ajaxの起動リンクの作成基本パターン: 
    <a href="text/ajax/nojs/1234" class="use-ajax">ajaxリンク</a>
    • hrefにある「nojs」が決まりの文字
    • hrefにある「1234」はサーバー側に転送したい必要なパラメーター
    • class="use-ajax"はこのリンクがajax用に決める
  • クライアント側のjsで使用しているブラウザがajax対応可能かを判断して、ajax起動リンクに「nojs」のパラメーターを書き換え(利用可能:nojs⇒ajax)てサーバー側に転送
  • サーバー側がajax利用可否よりクライアント側にajax対応有無の結果を返します
    Drupalのajaxフレームワークの利用
  • 上記例のプログラムは以下のようで
    /**
     * Implements hook_init().
     */
    function test_module_init()
    {
      drupal_add_js('misc/jquery.form.js');
      drupal_add_library('system','drupal.ajax');
    }
    
    /**
     *  Implementation of hook_menu()
     */
    function test_module_menu() {
      $items['test/ajax/%/%']=array(     // URLの2,3番目がクライアント側で生成
          'page callback' => 'ajax_node_response',
          'page arguments' => array(2,3),   // URLの2,3番目の引数をコールバック関数に渡す
          'access callback' => 'user_access',
          'access arguments' => array('access content'),
          'type' => MENU_CALLBACK,
      );
      return $items;
    }
    
    function ajax_node_response($type="ajax", $nid=0){
      $node = node_load( $nid, NULL, false );
      $vnode = node_view($node);
      $output = theme('node', $vnode);
      if( $type="ajax" ){
        $commands=array();
        $commands[]=ajax_command_replace( '#block-system-main','<section id="block-system-main">'.$output.'</section>' ) ;
        $page = array(
          '#type' => 'ajax',
          '#commands' => $commands,
        );
        ajax_deliver( $page ) ;   // ajax対応ブラウザの結果
      } else {
        $output = '<div id="content">'.$output.'</div>';  // ajax非対応ブラウザの結果
        return $output;
      }
    }
    

ポイント3:クライアント側で実行させたい部分はajax_commandを使用します

  • クライアント側で処理結果をどこに入り替えはajax_command_replaceで指定します
  • 結果の挿入、入れ替え、削除、css処理などがいろいろあります。詳細は本家のajax_command一覧を参考してください

 

drupal
form
ajax

Drupalのajax_commandの基本:登録されているコマンド(例:ajax_command_invokeなど)でクライアント側に実行コマンドを送ります

  • 背景:Drupal7.54、コアーモジュールajaxの利用
  • Drupalのajax利用は別の記事を参考してください
    • Drupalでajaxのフレームワークが簡単に作成できる
    • Drupalのajaxの仕組みおよびプログラム上での扱う
  • サーバーサイトの処理結果をクライアント側に送る方法:
    • FormAPIに"#ajax"セットにある"wrapper"に指定されたエレメントに処理結果の置換 <-  'replaceWith', 'append', 'prepend', 'before', 'after', or 'html'
    • ajax_commadよりクライアント側の要素挿入、置換、削除などの操作ができます
  • ajax_commandがサーバー側での処理結果をクライアント側により柔軟に操作することができます
    • ajax_commandに登録されている関数が本家のページを参考してください
    • クライアント側の要素挿入、置換、削除、javascript実行などができます

処理結果をクライアント側に実行させるためカスタムajaxコマンドの作成

  • クライアント側でjQueryのセレクターで選択できる要素の操作にはajax_commandに登録された関数で行うことができます
  • 複雑なjascript実行、複数のセレクターなどの場合、カスタムajax_commandの作成が必要となります
    • クライアント側のjavascript関数を呼び出します
    • サーバーサイトの処理ロジックをクライアント側で行います

jQueryで登録さた関数をajax_command_invokeで呼び出します

  • クライアント側で事前にjQueryのjavascript関数を定義します
  • ajax_command_invokeで定義された関数を呼び出します
    ajax_command_invokeでカスタムajax関数の呼び出し

Drupal.ajaxネームスペースのプロトタイプに登録されたjavascript関数をajax_commandで呼び出します

  • Drupal.ajaネームスペースのプロトタイプを利用して、javascript関数を事前に登録します
  • ajax_command(登録済みの関数ではない)でjavascript関数を呼び出します
    ajax_commandに登録されていないjs関数の呼び出し
drupal
development
ajax

やりたいこと:Drupalのプログラムレベルで簡単にajaxを利用してクライアント側でデータ交信をしたいです

  • 環境:Drupal7.54
  • DrupalのFormAPIで簡単にajaxの実装ができます(Drupalのフォーム(FromAPI)でのajaxの実装 )
  • FormAPIだけではなく、Drupalをカスタマイズ時にいろいろなところでajaxを実装したいことがあります

ポイント1:Drupalでajaxに必要なライブラリをロードし、クライアント側にjquery.form.jsファイルをセット

  • サーバー側でdrupal.ajaxのライブラリをロードする必要があります
  • クライアント側にjquery.form.jsファイルを設置する必要があります
  • この処理はajax処理するページをロード時に行えれば良いです。
    • 例:hook_init()内で処理する
      /**
       * Implements hook_init().
       */
      function YOUR_MODULE_NAME_init()
      {
        drupal_add_js('misc/jquery.form.js');
        drupal_add_library('system','drupal.ajax');
      }
  • クライアント側のブラウザのプロパティでjquery.form.jsがセットされたことの確認ができます

ポイント2:クライアント側のajax起動リンク内にajax対応可否のパラメーター「nojs」とクラス属性「use-ajax」のセット

  • ajaxの起動リンクの作成基本パターン: 
    <a href="text/ajax/nojs/1234" class="use-ajax">ajaxリンク</a>
    • hrefにある「nojs」が決まりの文字
    • hrefにある「1234」はサーバー側に転送したい必要なパラメーター
    • class="use-ajax"はこのリンクがajax用に決める
  • クライアント側のjsで使用しているブラウザがajax対応可能かを判断して、ajax起動リンクに「nojs」のパラメーターを書き換え(利用可能:nojs⇒ajax)てサーバー側に転送
  • サーバー側がajax利用可否よりクライアント側にajax対応有無の結果を返します
    Drupalのajaxフレームワークの利用
  • 上記例のプログラムは以下のようで
    /**
     * Implements hook_init().
     */
    function test_module_init()
    {
      drupal_add_js('misc/jquery.form.js');
      drupal_add_library('system','drupal.ajax');
    }
    
    /**
     *  Implementation of hook_menu()
     */
    function test_module_menu() {
      $items['test/ajax/%/%']=array(     // URLの2,3番目がクライアント側で生成
          'page callback' => 'ajax_node_response',
          'page arguments' => array(2,3),   // URLの2,3番目の引数をコールバック関数に渡す
          'access callback' => 'user_access',
          'access arguments' => array('access content'),
          'type' => MENU_CALLBACK,
      );
      return $items;
    }
    
    function ajax_node_response($type="ajax", $nid=0){
      $node = node_load( $nid, NULL, false );
      $vnode = node_view($node);
      $output = theme('node', $vnode);
      if( $type="ajax" ){
        $commands=array();
        $commands[]=ajax_command_replace( '#block-system-main','<section id="block-system-main">'.$output.'</section>' ) ;
        $page = array(
          '#type' => 'ajax',
          '#commands' => $commands,
        );
        ajax_deliver( $page ) ;   // ajax対応ブラウザの結果
      } else {
        $output = '<div id="content">'.$output.'</div>';  // ajax非対応ブラウザの結果
        return $output;
      }
    }
    

ポイント3:クライアント側で実行させたい部分はajax_commandを使用します

  • クライアント側で処理結果をどこに入り替えはajax_command_replaceで指定します
  • 結果の挿入、入れ替え、削除、css処理などがいろいろあります。詳細は本家のajax_command一覧を参考してください

 

drupal
development
system_management
ajax

DrupalのFormAPIでフォーム内でAJAXを扱うのは基本です

  • DrupalのFormAPIがAJAXを実装しています
  • FormAPIでのAJAXの扱う:「Drupalのフォーム(FromAPI)でのajaxの実装」を参考してください
  • FormAPIでのAJAXでの扱う利点:
    • フォームを作成しているときに簡単にAJAXの実装が可能
    • AJAXの仕組みを知らなくても、手順通りに実装すればよいです
  • 大半のケースでFormAPIで解決できるので、AJAXをFormAPIで実装するのは一般的となります

FormAPI以外にAJAXの実装はDrupal.ajaxオブジェクトで行います

  • DrupalのAJAXのフレームワークは「misc/ajax.js」にあります
  • AJAXを実装する場合、このjsファイルを必ずインポートする必要があります
    drupal_add_js("/misc/ajax.js") ;  // ajaxのjsファイルをインポート
  • ここで、あるフォーム(text_form)のボタンを押してajaxを通じてサーバーとの交信を行う例とします
    Drupalのajaxの仕組みと扱い方法
  • フォームはDrupalのFormAPIで生成、または別の方法で生成します
    // 例: DrupalのAPIでフォームを作成
    //     送信ボタンを押して、"test message"の文字列でフォームを置換します
      $form['card_last']=array(
          "#type" => "markup",
          "#markup" => "",
          "#prefix" => "<div id='card-last-result-div'>",  // ajaxで置換したいエリア
          "#suffix" => "</div>",
      );
    
      $form['card_last']['submit'] = array(
          '#type' => 'submit',
          '#value' => '送信',
          '#attributes' => array( 'id'=>'test-form-submit' ),  // ajaxのIDを指定します
          "#ajax" => array(
            "callback" => "_ajax_callback_form",  // ajaxのコールバック
            'wrapper' => 'card-last-result-div',
            'method' => 'replace',
            'effect' => 'fade',
          ),
      );
    
    // カスタムJSファイルをフォームと一緒に添付
      $form['#attached']['js'] = array( "file_path/custom_ajax.js" );

DrupalのAJAXオブジェクトを生成してサーバーとの交信を用意します

  • 一つカスタムjsファイルを用意して(例:custom_ajax.js)、フォーム生成と同時にクライアント側に渡します
  • Drupal.ajaxオブジェクトを生成します
    (function($){
      Drupal.behaviors.custom_module_name={
        attach:function(cotext,settings){
          $("#test-form-submit").once("test-form-submit",function(){ //指定したフォームのみ
            var base = $(this).attr('id');  //フォームIDの使用
            var element_settings = {
              url: window.location.protocol + "//"+ window.location.hostname + settings.basePath + settings.pathPrefix + "system/ajax",
              event: 'click',
              progress: { type: 'throbber', },
            };
        // Drupalのajaxオブジェクトを生成します
            Drupal.ajax[base] = new Drupal.ajax(base, this, element_settings);
    
        // 送信ボタンにListenerを追加
            $("#test-form-submit").on( 'click',function(){
              $(this).click();  // ajaxを作動させます
            });
          });
        }
      };
    })(jQuery)
    
    • base(必須): ajaxの識別、ここでフォームID(test-form-submit)で指定
    • url(必須): サイトのパス/system/ajax
    • event: ajaxを作動させるイベントの指定
    • progress: ajaxでデータ交信中にロードの動画アイコンの表示
  • サーバーサイトでajaxに呼び出されるファンクションを用意します、"test message"をajaxに返還します
    function _ajax_callback_card_last_form($form, &$form_state){
      $commands[] = ajax_command_replace('#card-last-result-div', "test message"); 
      return array('#type' => 'ajax', '#commands' => $commands);
    }
  • ここで、ajax_commandを利用しなくても、ajax_deliverでメッセージの返還もできます
drupal
development
form

やりたいこと:Drupalのフォーム(FormAPI)でajaxを実装して各フォーム要素を動的に制御したいです

  • 環境:Drupal7.54
  • フォーム(FormAPI)で各要素の表示/非表示などの制御が簡単にできます(Drupalのフォーム(Form API)の「#states」で各フォーム要素の動作制御が可能)。
    • フォームを作成時にJavascriptを意識しなくてよい
    • 事前にフォームの要素を用意して表示/非表示のようなお動作制御
    • データ取得するなどの動作制御はできません
  • ajaxで高等な動作(データ取得など)制御ができるので、FormAPIもこれ基盤を用意して、簡単に実装できます。

FormAPIで「#ajax」の記述(ポイント:callback、wrapper)だけで良いのでJavascriptの意識必要はありません

  • FormAPIがajaxのインターフェースを用意しています。Form記述で「#ajax」要素を追加すれば、Javascriptなどのコーティングはいらないです
    • callbak:ajaxのリクエストが来た時に呼び出される関数
    • wrapper:ajaxのサーバー処理完了後に結果を画面に表示させる場所の指定
  • 簡単の例:テキスト入力フォームを生成して、入力したメッセージを画面のどこかに再表示させるajax処理
    FormAPIのajaxの実装方法
  • ajaxの記述はFormAPIの実装時に追加します。
    /**
     *  Implementation of hook_menu()
     *  新規フォームを表示するページのメニュー設定
     */
    function my_module_name_menu() {
      $items['test/form'] = array(
          'title' => 'Ajaxテスト',
          'page callback' => 'drupal_get_form',
          'page arguments' => array('my_sample_form'),
          'access arguments' => array('access content'),
      );
    }
    
    /**
     * フォームの各要素の記述
     */
    function my_sample_form($form, &$form_state){
      // メッセージ入力フィールド
      $form['message'] = array(
          '#type' => 'textfield',
          '#title' => t('メッセージを入力'),
      );
    
      // 入力されたメッセージをajaxで表示する場所
      $form['msg_wrapper'] = array(
          '#type' => 'markup',
          '#markup' => "",
          '#prefix' => '<div id="msg-wrapper">',
          '#suffix' => '</div>',
      );
    
      // サブミットボタン
      $form['submit'] = array(
          '#type' => 'submit',
          '#value' => '送信',
          '#ajax' => array(
              'callback' => 'test_sample_form_ajax_callback',
              'wrapper' => 'msg-wrapper',
              'effect' => 'fade',
          ),
      );
    
      return $form;
    }
    
    /**
     * ajaxに呼び出される関数
     */
    function test_sample_form_ajax_callback($form, $form_state) {
      // 入力されたメッセージを指定した場所にセット
      $form['msg_wrapper']['#markup'] = '入力されたメッセージ:' .
                  check_plain($form_state['values']['message']) ;
      // 置換する部品を返す
      return $form['msg_wrapper'] ;
    }

     
drupal
development
ajax

やりたいこと:Drupalのプログラムレベルで簡単にajaxを利用してクライアント側でデータ交信をしたいです

  • 環境:Drupal7.54
  • DrupalのFormAPIで簡単にajaxの実装ができます(Drupalのフォーム(FromAPI)でのajaxの実装 )
  • FormAPIだけではなく、Drupalをカスタマイズ時にいろいろなところでajaxを実装したいことがあります

ポイント1:Drupalでajaxに必要なライブラリをロードし、クライアント側にjquery.form.jsファイルをセット

  • サーバー側でdrupal.ajaxのライブラリをロードする必要があります
  • クライアント側にjquery.form.jsファイルを設置する必要があります
  • この処理はajax処理するページをロード時に行えれば良いです。
    • 例:hook_init()内で処理する
      /**
       * Implements hook_init().
       */
      function YOUR_MODULE_NAME_init()
      {
        drupal_add_js('misc/jquery.form.js');
        drupal_add_library('system','drupal.ajax');
      }
  • クライアント側のブラウザのプロパティでjquery.form.jsがセットされたことの確認ができます

ポイント2:クライアント側のajax起動リンク内にajax対応可否のパラメーター「nojs」とクラス属性「use-ajax」のセット

  • ajaxの起動リンクの作成基本パターン: 
    <a href="text/ajax/nojs/1234" class="use-ajax">ajaxリンク</a>
    • hrefにある「nojs」が決まりの文字
    • hrefにある「1234」はサーバー側に転送したい必要なパラメーター
    • class="use-ajax"はこのリンクがajax用に決める
  • クライアント側のjsで使用しているブラウザがajax対応可能かを判断して、ajax起動リンクに「nojs」のパラメーターを書き換え(利用可能:nojs⇒ajax)てサーバー側に転送
  • サーバー側がajax利用可否よりクライアント側にajax対応有無の結果を返します
    Drupalのajaxフレームワークの利用
  • 上記例のプログラムは以下のようで
    /**
     * Implements hook_init().
     */
    function test_module_init()
    {
      drupal_add_js('misc/jquery.form.js');
      drupal_add_library('system','drupal.ajax');
    }
    
    /**
     *  Implementation of hook_menu()
     */
    function test_module_menu() {
      $items['test/ajax/%/%']=array(     // URLの2,3番目がクライアント側で生成
          'page callback' => 'ajax_node_response',
          'page arguments' => array(2,3),   // URLの2,3番目の引数をコールバック関数に渡す
          'access callback' => 'user_access',
          'access arguments' => array('access content'),
          'type' => MENU_CALLBACK,
      );
      return $items;
    }
    
    function ajax_node_response($type="ajax", $nid=0){
      $node = node_load( $nid, NULL, false );
      $vnode = node_view($node);
      $output = theme('node', $vnode);
      if( $type="ajax" ){
        $commands=array();
        $commands[]=ajax_command_replace( '#block-system-main','<section id="block-system-main">'.$output.'</section>' ) ;
        $page = array(
          '#type' => 'ajax',
          '#commands' => $commands,
        );
        ajax_deliver( $page ) ;   // ajax対応ブラウザの結果
      } else {
        $output = '<div id="content">'.$output.'</div>';  // ajax非対応ブラウザの結果
        return $output;
      }
    }
    

ポイント3:クライアント側で実行させたい部分はajax_commandを使用します

  • クライアント側で処理結果をどこに入り替えはajax_command_replaceで指定します
  • 結果の挿入、入れ替え、削除、css処理などがいろいろあります。詳細は本家のajax_command一覧を参考してください

 

drupal
form
ajax

Drupalのajax_commandの基本:登録されているコマンド(例:ajax_command_invokeなど)でクライアント側に実行コマンドを送ります

  • 背景:Drupal7.54、コアーモジュールajaxの利用
  • Drupalのajax利用は別の記事を参考してください
    • Drupalでajaxのフレームワークが簡単に作成できる
    • Drupalのajaxの仕組みおよびプログラム上での扱う
  • サーバーサイトの処理結果をクライアント側に送る方法:
    • FormAPIに"#ajax"セットにある"wrapper"に指定されたエレメントに処理結果の置換 <-  'replaceWith', 'append', 'prepend', 'before', 'after', or 'html'
    • ajax_commadよりクライアント側の要素挿入、置換、削除などの操作ができます
  • ajax_commandがサーバー側での処理結果をクライアント側により柔軟に操作することができます
    • ajax_commandに登録されている関数が本家のページを参考してください
    • クライアント側の要素挿入、置換、削除、javascript実行などができます

処理結果をクライアント側に実行させるためカスタムajaxコマンドの作成

  • クライアント側でjQueryのセレクターで選択できる要素の操作にはajax_commandに登録された関数で行うことができます
  • 複雑なjascript実行、複数のセレクターなどの場合、カスタムajax_commandの作成が必要となります
    • クライアント側のjavascript関数を呼び出します
    • サーバーサイトの処理ロジックをクライアント側で行います

jQueryで登録さた関数をajax_command_invokeで呼び出します

  • クライアント側で事前にjQueryのjavascript関数を定義します
  • ajax_command_invokeで定義された関数を呼び出します
    ajax_command_invokeでカスタムajax関数の呼び出し

Drupal.ajaxネームスペースのプロトタイプに登録されたjavascript関数をajax_commandで呼び出します

  • Drupal.ajaネームスペースのプロトタイプを利用して、javascript関数を事前に登録します
  • ajax_command(登録済みの関数ではない)でjavascript関数を呼び出します
    ajax_commandに登録されていないjs関数の呼び出し
drupal
development
ajax

やりたいこと:Drupalのプログラムレベルで簡単にajaxを利用してクライアント側でデータ交信をしたいです

  • 環境:Drupal7.54
  • DrupalのFormAPIで簡単にajaxの実装ができます(Drupalのフォーム(FromAPI)でのajaxの実装 )
  • FormAPIだけではなく、Drupalをカスタマイズ時にいろいろなところでajaxを実装したいことがあります

ポイント1:Drupalでajaxに必要なライブラリをロードし、クライアント側にjquery.form.jsファイルをセット

  • サーバー側でdrupal.ajaxのライブラリをロードする必要があります
  • クライアント側にjquery.form.jsファイルを設置する必要があります
  • この処理はajax処理するページをロード時に行えれば良いです。
    • 例:hook_init()内で処理する
      /**
       * Implements hook_init().
       */
      function YOUR_MODULE_NAME_init()
      {
        drupal_add_js('misc/jquery.form.js');
        drupal_add_library('system','drupal.ajax');
      }
  • クライアント側のブラウザのプロパティでjquery.form.jsがセットされたことの確認ができます

ポイント2:クライアント側のajax起動リンク内にajax対応可否のパラメーター「nojs」とクラス属性「use-ajax」のセット

  • ajaxの起動リンクの作成基本パターン: 
    <a href="text/ajax/nojs/1234" class="use-ajax">ajaxリンク</a>
    • hrefにある「nojs」が決まりの文字
    • hrefにある「1234」はサーバー側に転送したい必要なパラメーター
    • class="use-ajax"はこのリンクがajax用に決める
  • クライアント側のjsで使用しているブラウザがajax対応可能かを判断して、ajax起動リンクに「nojs」のパラメーターを書き換え(利用可能:nojs⇒ajax)てサーバー側に転送
  • サーバー側がajax利用可否よりクライアント側にajax対応有無の結果を返します
    Drupalのajaxフレームワークの利用
  • 上記例のプログラムは以下のようで
    /**
     * Implements hook_init().
     */
    function test_module_init()
    {
      drupal_add_js('misc/jquery.form.js');
      drupal_add_library('system','drupal.ajax');
    }
    
    /**
     *  Implementation of hook_menu()
     */
    function test_module_menu() {
      $items['test/ajax/%/%']=array(     // URLの2,3番目がクライアント側で生成
          'page callback' => 'ajax_node_response',
          'page arguments' => array(2,3),   // URLの2,3番目の引数をコールバック関数に渡す
          'access callback' => 'user_access',
          'access arguments' => array('access content'),
          'type' => MENU_CALLBACK,
      );
      return $items;
    }
    
    function ajax_node_response($type="ajax", $nid=0){
      $node = node_load( $nid, NULL, false );
      $vnode = node_view($node);
      $output = theme('node', $vnode);
      if( $type="ajax" ){
        $commands=array();
        $commands[]=ajax_command_replace( '#block-system-main','<section id="block-system-main">'.$output.'</section>' ) ;
        $page = array(
          '#type' => 'ajax',
          '#commands' => $commands,
        );
        ajax_deliver( $page ) ;   // ajax対応ブラウザの結果
      } else {
        $output = '<div id="content">'.$output.'</div>';  // ajax非対応ブラウザの結果
        return $output;
      }
    }
    

ポイント3:クライアント側で実行させたい部分はajax_commandを使用します

  • クライアント側で処理結果をどこに入り替えはajax_command_replaceで指定します
  • 結果の挿入、入れ替え、削除、css処理などがいろいろあります。詳細は本家のajax_command一覧を参考してください

 

drupal
development
system_management
ajax

DrupalのFormAPIでフォーム内でAJAXを扱うのは基本です

  • DrupalのFormAPIがAJAXを実装しています
  • FormAPIでのAJAXの扱う:「Drupalのフォーム(FromAPI)でのajaxの実装」を参考してください
  • FormAPIでのAJAXでの扱う利点:
    • フォームを作成しているときに簡単にAJAXの実装が可能
    • AJAXの仕組みを知らなくても、手順通りに実装すればよいです
  • 大半のケースでFormAPIで解決できるので、AJAXをFormAPIで実装するのは一般的となります

FormAPI以外にAJAXの実装はDrupal.ajaxオブジェクトで行います

  • DrupalのAJAXのフレームワークは「misc/ajax.js」にあります
  • AJAXを実装する場合、このjsファイルを必ずインポートする必要があります
    drupal_add_js("/misc/ajax.js") ;  // ajaxのjsファイルをインポート
  • ここで、あるフォーム(text_form)のボタンを押してajaxを通じてサーバーとの交信を行う例とします
    Drupalのajaxの仕組みと扱い方法
  • フォームはDrupalのFormAPIで生成、または別の方法で生成します
    // 例: DrupalのAPIでフォームを作成
    //     送信ボタンを押して、"test message"の文字列でフォームを置換します
      $form['card_last']=array(
          "#type" => "markup",
          "#markup" => "",
          "#prefix" => "<div id='card-last-result-div'>",  // ajaxで置換したいエリア
          "#suffix" => "</div>",
      );
    
      $form['card_last']['submit'] = array(
          '#type' => 'submit',
          '#value' => '送信',
          '#attributes' => array( 'id'=>'test-form-submit' ),  // ajaxのIDを指定します
          "#ajax" => array(
            "callback" => "_ajax_callback_form",  // ajaxのコールバック
            'wrapper' => 'card-last-result-div',
            'method' => 'replace',
            'effect' => 'fade',
          ),
      );
    
    // カスタムJSファイルをフォームと一緒に添付
      $form['#attached']['js'] = array( "file_path/custom_ajax.js" );

DrupalのAJAXオブジェクトを生成してサーバーとの交信を用意します

  • 一つカスタムjsファイルを用意して(例:custom_ajax.js)、フォーム生成と同時にクライアント側に渡します
  • Drupal.ajaxオブジェクトを生成します
    (function($){
      Drupal.behaviors.custom_module_name={
        attach:function(cotext,settings){
          $("#test-form-submit").once("test-form-submit",function(){ //指定したフォームのみ
            var base = $(this).attr('id');  //フォームIDの使用
            var element_settings = {
              url: window.location.protocol + "//"+ window.location.hostname + settings.basePath + settings.pathPrefix + "system/ajax",
              event: 'click',
              progress: { type: 'throbber', },
            };
        // Drupalのajaxオブジェクトを生成します
            Drupal.ajax[base] = new Drupal.ajax(base, this, element_settings);
    
        // 送信ボタンにListenerを追加
            $("#test-form-submit").on( 'click',function(){
              $(this).click();  // ajaxを作動させます
            });
          });
        }
      };
    })(jQuery)
    
    • base(必須): ajaxの識別、ここでフォームID(test-form-submit)で指定
    • url(必須): サイトのパス/system/ajax
    • event: ajaxを作動させるイベントの指定
    • progress: ajaxでデータ交信中にロードの動画アイコンの表示
  • サーバーサイトでajaxに呼び出されるファンクションを用意します、"test message"をajaxに返還します
    function _ajax_callback_card_last_form($form, &$form_state){
      $commands[] = ajax_command_replace('#card-last-result-div', "test message"); 
      return array('#type' => 'ajax', '#commands' => $commands);
    }
  • ここで、ajax_commandを利用しなくても、ajax_deliverでメッセージの返還もできます
drupal
development
form

やりたいこと:Drupalのフォーム(FormAPI)でajaxを実装して各フォーム要素を動的に制御したいです

  • 環境:Drupal7.54
  • フォーム(FormAPI)で各要素の表示/非表示などの制御が簡単にできます(Drupalのフォーム(Form API)の「#states」で各フォーム要素の動作制御が可能)。
    • フォームを作成時にJavascriptを意識しなくてよい
    • 事前にフォームの要素を用意して表示/非表示のようなお動作制御
    • データ取得するなどの動作制御はできません
  • ajaxで高等な動作(データ取得など)制御ができるので、FormAPIもこれ基盤を用意して、簡単に実装できます。

FormAPIで「#ajax」の記述(ポイント:callback、wrapper)だけで良いのでJavascriptの意識必要はありません

  • FormAPIがajaxのインターフェースを用意しています。Form記述で「#ajax」要素を追加すれば、Javascriptなどのコーティングはいらないです
    • callbak:ajaxのリクエストが来た時に呼び出される関数
    • wrapper:ajaxのサーバー処理完了後に結果を画面に表示させる場所の指定
  • 簡単の例:テキスト入力フォームを生成して、入力したメッセージを画面のどこかに再表示させるajax処理
    FormAPIのajaxの実装方法
  • ajaxの記述はFormAPIの実装時に追加します。
    /**
     *  Implementation of hook_menu()
     *  新規フォームを表示するページのメニュー設定
     */
    function my_module_name_menu() {
      $items['test/form'] = array(
          'title' => 'Ajaxテスト',
          'page callback' => 'drupal_get_form',
          'page arguments' => array('my_sample_form'),
          'access arguments' => array('access content'),
      );
    }
    
    /**
     * フォームの各要素の記述
     */
    function my_sample_form($form, &$form_state){
      // メッセージ入力フィールド
      $form['message'] = array(
          '#type' => 'textfield',
          '#title' => t('メッセージを入力'),
      );
    
      // 入力されたメッセージをajaxで表示する場所
      $form['msg_wrapper'] = array(
          '#type' => 'markup',
          '#markup' => "",
          '#prefix' => '<div id="msg-wrapper">',
          '#suffix' => '</div>',
      );
    
      // サブミットボタン
      $form['submit'] = array(
          '#type' => 'submit',
          '#value' => '送信',
          '#ajax' => array(
              'callback' => 'test_sample_form_ajax_callback',
              'wrapper' => 'msg-wrapper',
              'effect' => 'fade',
          ),
      );
    
      return $form;
    }
    
    /**
     * ajaxに呼び出される関数
     */
    function test_sample_form_ajax_callback($form, $form_state) {
      // 入力されたメッセージを指定した場所にセット
      $form['msg_wrapper']['#markup'] = '入力されたメッセージ:' .
                  check_plain($form_state['values']['message']) ;
      // 置換する部品を返す
      return $form['msg_wrapper'] ;
    }

     
drupal
development
ajax

やりたいこと:Drupalのプログラムレベルで簡単にajaxを利用してクライアント側でデータ交信をしたいです

  • 環境:Drupal7.54
  • DrupalのFormAPIで簡単にajaxの実装ができます(Drupalのフォーム(FromAPI)でのajaxの実装 )
  • FormAPIだけではなく、Drupalをカスタマイズ時にいろいろなところでajaxを実装したいことがあります

ポイント1:Drupalでajaxに必要なライブラリをロードし、クライアント側にjquery.form.jsファイルをセット

  • サーバー側でdrupal.ajaxのライブラリをロードする必要があります
  • クライアント側にjquery.form.jsファイルを設置する必要があります
  • この処理はajax処理するページをロード時に行えれば良いです。
    • 例:hook_init()内で処理する
      /**
       * Implements hook_init().
       */
      function YOUR_MODULE_NAME_init()
      {
        drupal_add_js('misc/jquery.form.js');
        drupal_add_library('system','drupal.ajax');
      }
  • クライアント側のブラウザのプロパティでjquery.form.jsがセットされたことの確認ができます

ポイント2:クライアント側のajax起動リンク内にajax対応可否のパラメーター「nojs」とクラス属性「use-ajax」のセット

  • ajaxの起動リンクの作成基本パターン: 
    <a href="text/ajax/nojs/1234" class="use-ajax">ajaxリンク</a>
    • hrefにある「nojs」が決まりの文字
    • hrefにある「1234」はサーバー側に転送したい必要なパラメーター
    • class="use-ajax"はこのリンクがajax用に決める
  • クライアント側のjsで使用しているブラウザがajax対応可能かを判断して、ajax起動リンクに「nojs」のパラメーターを書き換え(利用可能:nojs⇒ajax)てサーバー側に転送
  • サーバー側がajax利用可否よりクライアント側にajax対応有無の結果を返します
    Drupalのajaxフレームワークの利用
  • 上記例のプログラムは以下のようで
    /**
     * Implements hook_init().
     */
    function test_module_init()
    {
      drupal_add_js('misc/jquery.form.js');
      drupal_add_library('system','drupal.ajax');
    }
    
    /**
     *  Implementation of hook_menu()
     */
    function test_module_menu() {
      $items['test/ajax/%/%']=array(     // URLの2,3番目がクライアント側で生成
          'page callback' => 'ajax_node_response',
          'page arguments' => array(2,3),   // URLの2,3番目の引数をコールバック関数に渡す
          'access callback' => 'user_access',
          'access arguments' => array('access content'),
          'type' => MENU_CALLBACK,
      );
      return $items;
    }
    
    function ajax_node_response($type="ajax", $nid=0){
      $node = node_load( $nid, NULL, false );
      $vnode = node_view($node);
      $output = theme('node', $vnode);
      if( $type="ajax" ){
        $commands=array();
        $commands[]=ajax_command_replace( '#block-system-main','<section id="block-system-main">'.$output.'</section>' ) ;
        $page = array(
          '#type' => 'ajax',
          '#commands' => $commands,
        );
        ajax_deliver( $page ) ;   // ajax対応ブラウザの結果
      } else {
        $output = '<div id="content">'.$output.'</div>';  // ajax非対応ブラウザの結果
        return $output;
      }
    }
    

ポイント3:クライアント側で実行させたい部分はajax_commandを使用します

  • クライアント側で処理結果をどこに入り替えはajax_command_replaceで指定します
  • 結果の挿入、入れ替え、削除、css処理などがいろいろあります。詳細は本家のajax_command一覧を参考してください

 

drupal
form
ajax

Drupalのajax_commandの基本:登録されているコマンド(例:ajax_command_invokeなど)でクライアント側に実行コマンドを送ります

  • 背景:Drupal7.54、コアーモジュールajaxの利用
  • Drupalのajax利用は別の記事を参考してください
    • Drupalでajaxのフレームワークが簡単に作成できる
    • Drupalのajaxの仕組みおよびプログラム上での扱う
  • サーバーサイトの処理結果をクライアント側に送る方法:
    • FormAPIに"#ajax"セットにある"wrapper"に指定されたエレメントに処理結果の置換 <-  'replaceWith', 'append', 'prepend', 'before', 'after', or 'html'
    • ajax_commadよりクライアント側の要素挿入、置換、削除などの操作ができます
  • ajax_commandがサーバー側での処理結果をクライアント側により柔軟に操作することができます
    • ajax_commandに登録されている関数が本家のページを参考してください
    • クライアント側の要素挿入、置換、削除、javascript実行などができます

処理結果をクライアント側に実行させるためカスタムajaxコマンドの作成

  • クライアント側でjQueryのセレクターで選択できる要素の操作にはajax_commandに登録された関数で行うことができます
  • 複雑なjascript実行、複数のセレクターなどの場合、カスタムajax_commandの作成が必要となります
    • クライアント側のjavascript関数を呼び出します
    • サーバーサイトの処理ロジックをクライアント側で行います

jQueryで登録さた関数をajax_command_invokeで呼び出します

  • クライアント側で事前にjQueryのjavascript関数を定義します
  • ajax_command_invokeで定義された関数を呼び出します
    ajax_command_invokeでカスタムajax関数の呼び出し

Drupal.ajaxネームスペースのプロトタイプに登録されたjavascript関数をajax_commandで呼び出します

  • Drupal.ajaネームスペースのプロトタイプを利用して、javascript関数を事前に登録します
  • ajax_command(登録済みの関数ではない)でjavascript関数を呼び出します
    ajax_commandに登録されていないjs関数の呼び出し
drupal
development
ajax

やりたいこと:Drupalのプログラムレベルで簡単にajaxを利用してクライアント側でデータ交信をしたいです

  • 環境:Drupal7.54
  • DrupalのFormAPIで簡単にajaxの実装ができます(Drupalのフォーム(FromAPI)でのajaxの実装 )
  • FormAPIだけではなく、Drupalをカスタマイズ時にいろいろなところでajaxを実装したいことがあります

ポイント1:Drupalでajaxに必要なライブラリをロードし、クライアント側にjquery.form.jsファイルをセット

  • サーバー側でdrupal.ajaxのライブラリをロードする必要があります
  • クライアント側にjquery.form.jsファイルを設置する必要があります
  • この処理はajax処理するページをロード時に行えれば良いです。
    • 例:hook_init()内で処理する
      /**
       * Implements hook_init().
       */
      function YOUR_MODULE_NAME_init()
      {
        drupal_add_js('misc/jquery.form.js');
        drupal_add_library('system','drupal.ajax');
      }
  • クライアント側のブラウザのプロパティでjquery.form.jsがセットされたことの確認ができます

ポイント2:クライアント側のajax起動リンク内にajax対応可否のパラメーター「nojs」とクラス属性「use-ajax」のセット

  • ajaxの起動リンクの作成基本パターン: 
    <a href="text/ajax/nojs/1234" class="use-ajax">ajaxリンク</a>
    • hrefにある「nojs」が決まりの文字
    • hrefにある「1234」はサーバー側に転送したい必要なパラメーター
    • class="use-ajax"はこのリンクがajax用に決める
  • クライアント側のjsで使用しているブラウザがajax対応可能かを判断して、ajax起動リンクに「nojs」のパラメーターを書き換え(利用可能:nojs⇒ajax)てサーバー側に転送
  • サーバー側がajax利用可否よりクライアント側にajax対応有無の結果を返します
    Drupalのajaxフレームワークの利用
  • 上記例のプログラムは以下のようで
    /**
     * Implements hook_init().
     */
    function test_module_init()
    {
      drupal_add_js('misc/jquery.form.js');
      drupal_add_library('system','drupal.ajax');
    }
    
    /**
     *  Implementation of hook_menu()
     */
    function test_module_menu() {
      $items['test/ajax/%/%']=array(     // URLの2,3番目がクライアント側で生成
          'page callback' => 'ajax_node_response',
          'page arguments' => array(2,3),   // URLの2,3番目の引数をコールバック関数に渡す
          'access callback' => 'user_access',
          'access arguments' => array('access content'),
          'type' => MENU_CALLBACK,
      );
      return $items;
    }
    
    function ajax_node_response($type="ajax", $nid=0){
      $node = node_load( $nid, NULL, false );
      $vnode = node_view($node);
      $output = theme('node', $vnode);
      if( $type="ajax" ){
        $commands=array();
        $commands[]=ajax_command_replace( '#block-system-main','<section id="block-system-main">'.$output.'</section>' ) ;
        $page = array(
          '#type' => 'ajax',
          '#commands' => $commands,
        );
        ajax_deliver( $page ) ;   // ajax対応ブラウザの結果
      } else {
        $output = '<div id="content">'.$output.'</div>';  // ajax非対応ブラウザの結果
        return $output;
      }
    }
    

ポイント3:クライアント側で実行させたい部分はajax_commandを使用します

  • クライアント側で処理結果をどこに入り替えはajax_command_replaceで指定します
  • 結果の挿入、入れ替え、削除、css処理などがいろいろあります。詳細は本家のajax_command一覧を参考してください

 

drupal
development
system_management
ajax

DrupalのFormAPIでフォーム内でAJAXを扱うのは基本です

  • DrupalのFormAPIがAJAXを実装しています
  • FormAPIでのAJAXの扱う:「Drupalのフォーム(FromAPI)でのajaxの実装」を参考してください
  • FormAPIでのAJAXでの扱う利点:
    • フォームを作成しているときに簡単にAJAXの実装が可能
    • AJAXの仕組みを知らなくても、手順通りに実装すればよいです
  • 大半のケースでFormAPIで解決できるので、AJAXをFormAPIで実装するのは一般的となります

FormAPI以外にAJAXの実装はDrupal.ajaxオブジェクトで行います

  • DrupalのAJAXのフレームワークは「misc/ajax.js」にあります
  • AJAXを実装する場合、このjsファイルを必ずインポートする必要があります
    drupal_add_js("/misc/ajax.js") ;  // ajaxのjsファイルをインポート
  • ここで、あるフォーム(text_form)のボタンを押してajaxを通じてサーバーとの交信を行う例とします
    Drupalのajaxの仕組みと扱い方法
  • フォームはDrupalのFormAPIで生成、または別の方法で生成します
    // 例: DrupalのAPIでフォームを作成
    //     送信ボタンを押して、"test message"の文字列でフォームを置換します
      $form['card_last']=array(
          "#type" => "markup",
          "#markup" => "",
          "#prefix" => "<div id='card-last-result-div'>",  // ajaxで置換したいエリア
          "#suffix" => "</div>",
      );
    
      $form['card_last']['submit'] = array(
          '#type' => 'submit',
          '#value' => '送信',
          '#attributes' => array( 'id'=>'test-form-submit' ),  // ajaxのIDを指定します
          "#ajax" => array(
            "callback" => "_ajax_callback_form",  // ajaxのコールバック
            'wrapper' => 'card-last-result-div',
            'method' => 'replace',
            'effect' => 'fade',
          ),
      );
    
    // カスタムJSファイルをフォームと一緒に添付
      $form['#attached']['js'] = array( "file_path/custom_ajax.js" );

DrupalのAJAXオブジェクトを生成してサーバーとの交信を用意します

  • 一つカスタムjsファイルを用意して(例:custom_ajax.js)、フォーム生成と同時にクライアント側に渡します
  • Drupal.ajaxオブジェクトを生成します
    (function($){
      Drupal.behaviors.custom_module_name={
        attach:function(cotext,settings){
          $("#test-form-submit").once("test-form-submit",function(){ //指定したフォームのみ
            var base = $(this).attr('id');  //フォームIDの使用
            var element_settings = {
              url: window.location.protocol + "//"+ window.location.hostname + settings.basePath + settings.pathPrefix + "system/ajax",
              event: 'click',
              progress: { type: 'throbber', },
            };
        // Drupalのajaxオブジェクトを生成します
            Drupal.ajax[base] = new Drupal.ajax(base, this, element_settings);
    
        // 送信ボタンにListenerを追加
            $("#test-form-submit").on( 'click',function(){
              $(this).click();  // ajaxを作動させます
            });
          });
        }
      };
    })(jQuery)
    
    • base(必須): ajaxの識別、ここでフォームID(test-form-submit)で指定
    • url(必須): サイトのパス/system/ajax
    • event: ajaxを作動させるイベントの指定
    • progress: ajaxでデータ交信中にロードの動画アイコンの表示
  • サーバーサイトでajaxに呼び出されるファンクションを用意します、"test message"をajaxに返還します
    function _ajax_callback_card_last_form($form, &$form_state){
      $commands[] = ajax_command_replace('#card-last-result-div', "test message"); 
      return array('#type' => 'ajax', '#commands' => $commands);
    }
  • ここで、ajax_commandを利用しなくても、ajax_deliverでメッセージの返還もできます
drupal
development
form

やりたいこと:Drupalのフォーム(FormAPI)でajaxを実装して各フォーム要素を動的に制御したいです

  • 環境:Drupal7.54
  • フォーム(FormAPI)で各要素の表示/非表示などの制御が簡単にできます(Drupalのフォーム(Form API)の「#states」で各フォーム要素の動作制御が可能)。
    • フォームを作成時にJavascriptを意識しなくてよい
    • 事前にフォームの要素を用意して表示/非表示のようなお動作制御
    • データ取得するなどの動作制御はできません
  • ajaxで高等な動作(データ取得など)制御ができるので、FormAPIもこれ基盤を用意して、簡単に実装できます。

FormAPIで「#ajax」の記述(ポイント:callback、wrapper)だけで良いのでJavascriptの意識必要はありません

  • FormAPIがajaxのインターフェースを用意しています。Form記述で「#ajax」要素を追加すれば、Javascriptなどのコーティングはいらないです
    • callbak:ajaxのリクエストが来た時に呼び出される関数
    • wrapper:ajaxのサーバー処理完了後に結果を画面に表示させる場所の指定
  • 簡単の例:テキスト入力フォームを生成して、入力したメッセージを画面のどこかに再表示させるajax処理
    FormAPIのajaxの実装方法
  • ajaxの記述はFormAPIの実装時に追加します。
    /**
     *  Implementation of hook_menu()
     *  新規フォームを表示するページのメニュー設定
     */
    function my_module_name_menu() {
      $items['test/form'] = array(
          'title' => 'Ajaxテスト',
          'page callback' => 'drupal_get_form',
          'page arguments' => array('my_sample_form'),
          'access arguments' => array('access content'),
      );
    }
    
    /**
     * フォームの各要素の記述
     */
    function my_sample_form($form, &$form_state){
      // メッセージ入力フィールド
      $form['message'] = array(
          '#type' => 'textfield',
          '#title' => t('メッセージを入力'),
      );
    
      // 入力されたメッセージをajaxで表示する場所
      $form['msg_wrapper'] = array(
          '#type' => 'markup',
          '#markup' => "",
          '#prefix' => '<div id="msg-wrapper">',
          '#suffix' => '</div>',
      );
    
      // サブミットボタン
      $form['submit'] = array(
          '#type' => 'submit',
          '#value' => '送信',
          '#ajax' => array(
              'callback' => 'test_sample_form_ajax_callback',
              'wrapper' => 'msg-wrapper',
              'effect' => 'fade',
          ),
      );
    
      return $form;
    }
    
    /**
     * ajaxに呼び出される関数
     */
    function test_sample_form_ajax_callback($form, $form_state) {
      // 入力されたメッセージを指定した場所にセット
      $form['msg_wrapper']['#markup'] = '入力されたメッセージ:' .
                  check_plain($form_state['values']['message']) ;
      // 置換する部品を返す
      return $form['msg_wrapper'] ;
    }

     
drupal
development
ajax

やりたいこと:Drupalのプログラムレベルで簡単にajaxを利用してクライアント側でデータ交信をしたいです

  • 環境:Drupal7.54
  • DrupalのFormAPIで簡単にajaxの実装ができます(Drupalのフォーム(FromAPI)でのajaxの実装 )
  • FormAPIだけではなく、Drupalをカスタマイズ時にいろいろなところでajaxを実装したいことがあります

ポイント1:Drupalでajaxに必要なライブラリをロードし、クライアント側にjquery.form.jsファイルをセット

  • サーバー側でdrupal.ajaxのライブラリをロードする必要があります
  • クライアント側にjquery.form.jsファイルを設置する必要があります
  • この処理はajax処理するページをロード時に行えれば良いです。
    • 例:hook_init()内で処理する
      /**
       * Implements hook_init().
       */
      function YOUR_MODULE_NAME_init()
      {
        drupal_add_js('misc/jquery.form.js');
        drupal_add_library('system','drupal.ajax');
      }
  • クライアント側のブラウザのプロパティでjquery.form.jsがセットされたことの確認ができます

ポイント2:クライアント側のajax起動リンク内にajax対応可否のパラメーター「nojs」とクラス属性「use-ajax」のセット

  • ajaxの起動リンクの作成基本パターン: 
    <a href="text/ajax/nojs/1234" class="use-ajax">ajaxリンク</a>
    • hrefにある「nojs」が決まりの文字
    • hrefにある「1234」はサーバー側に転送したい必要なパラメーター
    • class="use-ajax"はこのリンクがajax用に決める
  • クライアント側のjsで使用しているブラウザがajax対応可能かを判断して、ajax起動リンクに「nojs」のパラメーターを書き換え(利用可能:nojs⇒ajax)てサーバー側に転送
  • サーバー側がajax利用可否よりクライアント側にajax対応有無の結果を返します
    Drupalのajaxフレームワークの利用
  • 上記例のプログラムは以下のようで
    /**
     * Implements hook_init().
     */
    function test_module_init()
    {
      drupal_add_js('misc/jquery.form.js');
      drupal_add_library('system','drupal.ajax');
    }
    
    /**
     *  Implementation of hook_menu()
     */
    function test_module_menu() {
      $items['test/ajax/%/%']=array(     // URLの2,3番目がクライアント側で生成
          'page callback' => 'ajax_node_response',
          'page arguments' => array(2,3),   // URLの2,3番目の引数をコールバック関数に渡す
          'access callback' => 'user_access',
          'access arguments' => array('access content'),
          'type' => MENU_CALLBACK,
      );
      return $items;
    }
    
    function ajax_node_response($type="ajax", $nid=0){
      $node = node_load( $nid, NULL, false );
      $vnode = node_view($node);
      $output = theme('node', $vnode);
      if( $type="ajax" ){
        $commands=array();
        $commands[]=ajax_command_replace( '#block-system-main','<section id="block-system-main">'.$output.'</section>' ) ;
        $page = array(
          '#type' => 'ajax',
          '#commands' => $commands,
        );
        ajax_deliver( $page ) ;   // ajax対応ブラウザの結果
      } else {
        $output = '<div id="content">'.$output.'</div>';  // ajax非対応ブラウザの結果
        return $output;
      }
    }
    

ポイント3:クライアント側で実行させたい部分はajax_commandを使用します

  • クライアント側で処理結果をどこに入り替えはajax_command_replaceで指定します
  • 結果の挿入、入れ替え、削除、css処理などがいろいろあります。詳細は本家のajax_command一覧を参考してください

 

drupal
form
ajax

Drupalのajax_commandの基本:登録されているコマンド(例:ajax_command_invokeなど)でクライアント側に実行コマンドを送ります

  • 背景:Drupal7.54、コアーモジュールajaxの利用
  • Drupalのajax利用は別の記事を参考してください
    • Drupalでajaxのフレームワークが簡単に作成できる
    • Drupalのajaxの仕組みおよびプログラム上での扱う
  • サーバーサイトの処理結果をクライアント側に送る方法:
    • FormAPIに"#ajax"セットにある"wrapper"に指定されたエレメントに処理結果の置換 <-  'replaceWith', 'append', 'prepend', 'before', 'after', or 'html'
    • ajax_commadよりクライアント側の要素挿入、置換、削除などの操作ができます
  • ajax_commandがサーバー側での処理結果をクライアント側により柔軟に操作することができます
    • ajax_commandに登録されている関数が本家のページを参考してください
    • クライアント側の要素挿入、置換、削除、javascript実行などができます

処理結果をクライアント側に実行させるためカスタムajaxコマンドの作成

  • クライアント側でjQueryのセレクターで選択できる要素の操作にはajax_commandに登録された関数で行うことができます
  • 複雑なjascript実行、複数のセレクターなどの場合、カスタムajax_commandの作成が必要となります
    • クライアント側のjavascript関数を呼び出します
    • サーバーサイトの処理ロジックをクライアント側で行います

jQueryで登録さた関数をajax_command_invokeで呼び出します

  • クライアント側で事前にjQueryのjavascript関数を定義します
  • ajax_command_invokeで定義された関数を呼び出します
    ajax_command_invokeでカスタムajax関数の呼び出し

Drupal.ajaxネームスペースのプロトタイプに登録されたjavascript関数をajax_commandで呼び出します

  • Drupal.ajaネームスペースのプロトタイプを利用して、javascript関数を事前に登録します
  • ajax_command(登録済みの関数ではない)でjavascript関数を呼び出します
    ajax_commandに登録されていないjs関数の呼び出し
drupal
development
ajax

やりたいこと:Drupalのプログラムレベルで簡単にajaxを利用してクライアント側でデータ交信をしたいです

  • 環境:Drupal7.54
  • DrupalのFormAPIで簡単にajaxの実装ができます(Drupalのフォーム(FromAPI)でのajaxの実装 )
  • FormAPIだけではなく、Drupalをカスタマイズ時にいろいろなところでajaxを実装したいことがあります

ポイント1:Drupalでajaxに必要なライブラリをロードし、クライアント側にjquery.form.jsファイルをセット

  • サーバー側でdrupal.ajaxのライブラリをロードする必要があります
  • クライアント側にjquery.form.jsファイルを設置する必要があります
  • この処理はajax処理するページをロード時に行えれば良いです。
    • 例:hook_init()内で処理する
      /**
       * Implements hook_init().
       */
      function YOUR_MODULE_NAME_init()
      {
        drupal_add_js('misc/jquery.form.js');
        drupal_add_library('system','drupal.ajax');
      }
  • クライアント側のブラウザのプロパティでjquery.form.jsがセットされたことの確認ができます

ポイント2:クライアント側のajax起動リンク内にajax対応可否のパラメーター「nojs」とクラス属性「use-ajax」のセット

  • ajaxの起動リンクの作成基本パターン: 
    <a href="text/ajax/nojs/1234" class="use-ajax">ajaxリンク</a>
    • hrefにある「nojs」が決まりの文字
    • hrefにある「1234」はサーバー側に転送したい必要なパラメーター
    • class="use-ajax"はこのリンクがajax用に決める
  • クライアント側のjsで使用しているブラウザがajax対応可能かを判断して、ajax起動リンクに「nojs」のパラメーターを書き換え(利用可能:nojs⇒ajax)てサーバー側に転送
  • サーバー側がajax利用可否よりクライアント側にajax対応有無の結果を返します
    Drupalのajaxフレームワークの利用
  • 上記例のプログラムは以下のようで
    /**
     * Implements hook_init().
     */
    function test_module_init()
    {
      drupal_add_js('misc/jquery.form.js');
      drupal_add_library('system','drupal.ajax');
    }
    
    /**
     *  Implementation of hook_menu()
     */
    function test_module_menu() {
      $items['test/ajax/%/%']=array(     // URLの2,3番目がクライアント側で生成
          'page callback' => 'ajax_node_response',
          'page arguments' => array(2,3),   // URLの2,3番目の引数をコールバック関数に渡す
          'access callback' => 'user_access',
          'access arguments' => array('access content'),
          'type' => MENU_CALLBACK,
      );
      return $items;
    }
    
    function ajax_node_response($type="ajax", $nid=0){
      $node = node_load( $nid, NULL, false );
      $vnode = node_view($node);
      $output = theme('node', $vnode);
      if( $type="ajax" ){
        $commands=array();
        $commands[]=ajax_command_replace( '#block-system-main','<section id="block-system-main">'.$output.'</section>' ) ;
        $page = array(
          '#type' => 'ajax',
          '#commands' => $commands,
        );
        ajax_deliver( $page ) ;   // ajax対応ブラウザの結果
      } else {
        $output = '<div id="content">'.$output.'</div>';  // ajax非対応ブラウザの結果
        return $output;
      }
    }
    

ポイント3:クライアント側で実行させたい部分はajax_commandを使用します

  • クライアント側で処理結果をどこに入り替えはajax_command_replaceで指定します
  • 結果の挿入、入れ替え、削除、css処理などがいろいろあります。詳細は本家のajax_command一覧を参考してください

 

drupal
development
system_management
ajax

DrupalのFormAPIでフォーム内でAJAXを扱うのは基本です

  • DrupalのFormAPIがAJAXを実装しています
  • FormAPIでのAJAXの扱う:「Drupalのフォーム(FromAPI)でのajaxの実装」を参考してください
  • FormAPIでのAJAXでの扱う利点:
    • フォームを作成しているときに簡単にAJAXの実装が可能
    • AJAXの仕組みを知らなくても、手順通りに実装すればよいです
  • 大半のケースでFormAPIで解決できるので、AJAXをFormAPIで実装するのは一般的となります

FormAPI以外にAJAXの実装はDrupal.ajaxオブジェクトで行います

  • DrupalのAJAXのフレームワークは「misc/ajax.js」にあります
  • AJAXを実装する場合、このjsファイルを必ずインポートする必要があります
    drupal_add_js("/misc/ajax.js") ;  // ajaxのjsファイルをインポート
  • ここで、あるフォーム(text_form)のボタンを押してajaxを通じてサーバーとの交信を行う例とします
    Drupalのajaxの仕組みと扱い方法
  • フォームはDrupalのFormAPIで生成、または別の方法で生成します
    // 例: DrupalのAPIでフォームを作成
    //     送信ボタンを押して、"test message"の文字列でフォームを置換します
      $form['card_last']=array(
          "#type" => "markup",
          "#markup" => "",
          "#prefix" => "<div id='card-last-result-div'>",  // ajaxで置換したいエリア
          "#suffix" => "</div>",
      );
    
      $form['card_last']['submit'] = array(
          '#type' => 'submit',
          '#value' => '送信',
          '#attributes' => array( 'id'=>'test-form-submit' ),  // ajaxのIDを指定します
          "#ajax" => array(
            "callback" => "_ajax_callback_form",  // ajaxのコールバック
            'wrapper' => 'card-last-result-div',
            'method' => 'replace',
            'effect' => 'fade',
          ),
      );
    
    // カスタムJSファイルをフォームと一緒に添付
      $form['#attached']['js'] = array( "file_path/custom_ajax.js" );

DrupalのAJAXオブジェクトを生成してサーバーとの交信を用意します

  • 一つカスタムjsファイルを用意して(例:custom_ajax.js)、フォーム生成と同時にクライアント側に渡します
  • Drupal.ajaxオブジェクトを生成します
    (function($){
      Drupal.behaviors.custom_module_name={
        attach:function(cotext,settings){
          $("#test-form-submit").once("test-form-submit",function(){ //指定したフォームのみ
            var base = $(this).attr('id');  //フォームIDの使用
            var element_settings = {
              url: window.location.protocol + "//"+ window.location.hostname + settings.basePath + settings.pathPrefix + "system/ajax",
              event: 'click',
              progress: { type: 'throbber', },
            };
        // Drupalのajaxオブジェクトを生成します
            Drupal.ajax[base] = new Drupal.ajax(base, this, element_settings);
    
        // 送信ボタンにListenerを追加
            $("#test-form-submit").on( 'click',function(){
              $(this).click();  // ajaxを作動させます
            });
          });
        }
      };
    })(jQuery)
    
    • base(必須): ajaxの識別、ここでフォームID(test-form-submit)で指定
    • url(必須): サイトのパス/system/ajax
    • event: ajaxを作動させるイベントの指定
    • progress: ajaxでデータ交信中にロードの動画アイコンの表示
  • サーバーサイトでajaxに呼び出されるファンクションを用意します、"test message"をajaxに返還します
    function _ajax_callback_card_last_form($form, &$form_state){
      $commands[] = ajax_command_replace('#card-last-result-div', "test message"); 
      return array('#type' => 'ajax', '#commands' => $commands);
    }
  • ここで、ajax_commandを利用しなくても、ajax_deliverでメッセージの返還もできます
drupal
development
form

やりたいこと:Drupalのフォーム(FormAPI)でajaxを実装して各フォーム要素を動的に制御したいです

  • 環境:Drupal7.54
  • フォーム(FormAPI)で各要素の表示/非表示などの制御が簡単にできます(Drupalのフォーム(Form API)の「#states」で各フォーム要素の動作制御が可能)。
    • フォームを作成時にJavascriptを意識しなくてよい
    • 事前にフォームの要素を用意して表示/非表示のようなお動作制御
    • データ取得するなどの動作制御はできません
  • ajaxで高等な動作(データ取得など)制御ができるので、FormAPIもこれ基盤を用意して、簡単に実装できます。

FormAPIで「#ajax」の記述(ポイント:callback、wrapper)だけで良いのでJavascriptの意識必要はありません

  • FormAPIがajaxのインターフェースを用意しています。Form記述で「#ajax」要素を追加すれば、Javascriptなどのコーティングはいらないです
    • callbak:ajaxのリクエストが来た時に呼び出される関数
    • wrapper:ajaxのサーバー処理完了後に結果を画面に表示させる場所の指定
  • 簡単の例:テキスト入力フォームを生成して、入力したメッセージを画面のどこかに再表示させるajax処理
    FormAPIのajaxの実装方法
  • ajaxの記述はFormAPIの実装時に追加します。
    /**
     *  Implementation of hook_menu()
     *  新規フォームを表示するページのメニュー設定
     */
    function my_module_name_menu() {
      $items['test/form'] = array(
          'title' => 'Ajaxテスト',
          'page callback' => 'drupal_get_form',
          'page arguments' => array('my_sample_form'),
          'access arguments' => array('access content'),
      );
    }
    
    /**
     * フォームの各要素の記述
     */
    function my_sample_form($form, &$form_state){
      // メッセージ入力フィールド
      $form['message'] = array(
          '#type' => 'textfield',
          '#title' => t('メッセージを入力'),
      );
    
      // 入力されたメッセージをajaxで表示する場所
      $form['msg_wrapper'] = array(
          '#type' => 'markup',
          '#markup' => "",
          '#prefix' => '<div id="msg-wrapper">',
          '#suffix' => '</div>',
      );
    
      // サブミットボタン
      $form['submit'] = array(
          '#type' => 'submit',
          '#value' => '送信',
          '#ajax' => array(
              'callback' => 'test_sample_form_ajax_callback',
              'wrapper' => 'msg-wrapper',
              'effect' => 'fade',
          ),
      );
    
      return $form;
    }
    
    /**
     * ajaxに呼び出される関数
     */
    function test_sample_form_ajax_callback($form, $form_state) {
      // 入力されたメッセージを指定した場所にセット
      $form['msg_wrapper']['#markup'] = '入力されたメッセージ:' .
                  check_plain($form_state['values']['message']) ;
      // 置換する部品を返す
      return $form['msg_wrapper'] ;
    }

     
drupal
development
ajax

やりたいこと:Drupalのプログラムレベルで簡単にajaxを利用してクライアント側でデータ交信をしたいです

  • 環境:Drupal7.54
  • DrupalのFormAPIで簡単にajaxの実装ができます(Drupalのフォーム(FromAPI)でのajaxの実装 )
  • FormAPIだけではなく、Drupalをカスタマイズ時にいろいろなところでajaxを実装したいことがあります

ポイント1:Drupalでajaxに必要なライブラリをロードし、クライアント側にjquery.form.jsファイルをセット

  • サーバー側でdrupal.ajaxのライブラリをロードする必要があります
  • クライアント側にjquery.form.jsファイルを設置する必要があります
  • この処理はajax処理するページをロード時に行えれば良いです。
    • 例:hook_init()内で処理する
      /**
       * Implements hook_init().
       */
      function YOUR_MODULE_NAME_init()
      {
        drupal_add_js('misc/jquery.form.js');
        drupal_add_library('system','drupal.ajax');
      }
  • クライアント側のブラウザのプロパティでjquery.form.jsがセットされたことの確認ができます

ポイント2:クライアント側のajax起動リンク内にajax対応可否のパラメーター「nojs」とクラス属性「use-ajax」のセット

  • ajaxの起動リンクの作成基本パターン: 
    <a href="text/ajax/nojs/1234" class="use-ajax">ajaxリンク</a>
    • hrefにある「nojs」が決まりの文字
    • hrefにある「1234」はサーバー側に転送したい必要なパラメーター
    • class="use-ajax"はこのリンクがajax用に決める
  • クライアント側のjsで使用しているブラウザがajax対応可能かを判断して、ajax起動リンクに「nojs」のパラメーターを書き換え(利用可能:nojs⇒ajax)てサーバー側に転送
  • サーバー側がajax利用可否よりクライアント側にajax対応有無の結果を返します
    Drupalのajaxフレームワークの利用
  • 上記例のプログラムは以下のようで
    /**
     * Implements hook_init().
     */
    function test_module_init()
    {
      drupal_add_js('misc/jquery.form.js');
      drupal_add_library('system','drupal.ajax');
    }
    
    /**
     *  Implementation of hook_menu()
     */
    function test_module_menu() {
      $items['test/ajax/%/%']=array(     // URLの2,3番目がクライアント側で生成
          'page callback' => 'ajax_node_response',
          'page arguments' => array(2,3),   // URLの2,3番目の引数をコールバック関数に渡す
          'access callback' => 'user_access',
          'access arguments' => array('access content'),
          'type' => MENU_CALLBACK,
      );
      return $items;
    }
    
    function ajax_node_response($type="ajax", $nid=0){
      $node = node_load( $nid, NULL, false );
      $vnode = node_view($node);
      $output = theme('node', $vnode);
      if( $type="ajax" ){
        $commands=array();
        $commands[]=ajax_command_replace( '#block-system-main','<section id="block-system-main">'.$output.'</section>' ) ;
        $page = array(
          '#type' => 'ajax',
          '#commands' => $commands,
        );
        ajax_deliver( $page ) ;   // ajax対応ブラウザの結果
      } else {
        $output = '<div id="content">'.$output.'</div>';  // ajax非対応ブラウザの結果
        return $output;
      }
    }
    

ポイント3:クライアント側で実行させたい部分はajax_commandを使用します

  • クライアント側で処理結果をどこに入り替えはajax_command_replaceで指定します
  • 結果の挿入、入れ替え、削除、css処理などがいろいろあります。詳細は本家のajax_command一覧を参考してください

 

drupal
form
ajax

Drupalのajax_commandの基本:登録されているコマンド(例:ajax_command_invokeなど)でクライアント側に実行コマンドを送ります

  • 背景:Drupal7.54、コアーモジュールajaxの利用
  • Drupalのajax利用は別の記事を参考してください
    • Drupalでajaxのフレームワークが簡単に作成できる
    • Drupalのajaxの仕組みおよびプログラム上での扱う
  • サーバーサイトの処理結果をクライアント側に送る方法:
    • FormAPIに"#ajax"セットにある"wrapper"に指定されたエレメントに処理結果の置換 <-  'replaceWith', 'append', 'prepend', 'before', 'after', or 'html'
    • ajax_commadよりクライアント側の要素挿入、置換、削除などの操作ができます
  • ajax_commandがサーバー側での処理結果をクライアント側により柔軟に操作することができます
    • ajax_commandに登録されている関数が本家のページを参考してください
    • クライアント側の要素挿入、置換、削除、javascript実行などができます

処理結果をクライアント側に実行させるためカスタムajaxコマンドの作成

  • クライアント側でjQueryのセレクターで選択できる要素の操作にはajax_commandに登録された関数で行うことができます
  • 複雑なjascript実行、複数のセレクターなどの場合、カスタムajax_commandの作成が必要となります
    • クライアント側のjavascript関数を呼び出します
    • サーバーサイトの処理ロジックをクライアント側で行います

jQueryで登録さた関数をajax_command_invokeで呼び出します

  • クライアント側で事前にjQueryのjavascript関数を定義します
  • ajax_command_invokeで定義された関数を呼び出します
    ajax_command_invokeでカスタムajax関数の呼び出し

Drupal.ajaxネームスペースのプロトタイプに登録されたjavascript関数をajax_commandで呼び出します

  • Drupal.ajaネームスペースのプロトタイプを利用して、javascript関数を事前に登録します
  • ajax_command(登録済みの関数ではない)でjavascript関数を呼び出します
    ajax_commandに登録されていないjs関数の呼び出し
drupal
development
ajax

やりたいこと:Drupalのプログラムレベルで簡単にajaxを利用してクライアント側でデータ交信をしたいです

  • 環境:Drupal7.54
  • DrupalのFormAPIで簡単にajaxの実装ができます(Drupalのフォーム(FromAPI)でのajaxの実装 )
  • FormAPIだけではなく、Drupalをカスタマイズ時にいろいろなところでajaxを実装したいことがあります

ポイント1:Drupalでajaxに必要なライブラリをロードし、クライアント側にjquery.form.jsファイルをセット

  • サーバー側でdrupal.ajaxのライブラリをロードする必要があります
  • クライアント側にjquery.form.jsファイルを設置する必要があります
  • この処理はajax処理するページをロード時に行えれば良いです。
    • 例:hook_init()内で処理する
      /**
       * Implements hook_init().
       */
      function YOUR_MODULE_NAME_init()
      {
        drupal_add_js('misc/jquery.form.js');
        drupal_add_library('system','drupal.ajax');
      }
  • クライアント側のブラウザのプロパティでjquery.form.jsがセットされたことの確認ができます

ポイント2:クライアント側のajax起動リンク内にajax対応可否のパラメーター「nojs」とクラス属性「use-ajax」のセット

  • ajaxの起動リンクの作成基本パターン: 
    <a href="text/ajax/nojs/1234" class="use-ajax">ajaxリンク</a>
    • hrefにある「nojs」が決まりの文字
    • hrefにある「1234」はサーバー側に転送したい必要なパラメーター
    • class="use-ajax"はこのリンクがajax用に決める
  • クライアント側のjsで使用しているブラウザがajax対応可能かを判断して、ajax起動リンクに「nojs」のパラメーターを書き換え(利用可能:nojs⇒ajax)てサーバー側に転送
  • サーバー側がajax利用可否よりクライアント側にajax対応有無の結果を返します
    Drupalのajaxフレームワークの利用
  • 上記例のプログラムは以下のようで
    /**
     * Implements hook_init().
     */
    function test_module_init()
    {
      drupal_add_js('misc/jquery.form.js');
      drupal_add_library('system','drupal.ajax');
    }
    
    /**
     *  Implementation of hook_menu()
     */
    function test_module_menu() {
      $items['test/ajax/%/%']=array(     // URLの2,3番目がクライアント側で生成
          'page callback' => 'ajax_node_response',
          'page arguments' => array(2,3),   // URLの2,3番目の引数をコールバック関数に渡す
          'access callback' => 'user_access',
          'access arguments' => array('access content'),
          'type' => MENU_CALLBACK,
      );
      return $items;
    }
    
    function ajax_node_response($type="ajax", $nid=0){
      $node = node_load( $nid, NULL, false );
      $vnode = node_view($node);
      $output = theme('node', $vnode);
      if( $type="ajax" ){
        $commands=array();
        $commands[]=ajax_command_replace( '#block-system-main','<section id="block-system-main">'.$output.'</section>' ) ;
        $page = array(
          '#type' => 'ajax',
          '#commands' => $commands,
        );
        ajax_deliver( $page ) ;   // ajax対応ブラウザの結果
      } else {
        $output = '<div id="content">'.$output.'</div>';  // ajax非対応ブラウザの結果
        return $output;
      }
    }
    

ポイント3:クライアント側で実行させたい部分はajax_commandを使用します

  • クライアント側で処理結果をどこに入り替えはajax_command_replaceで指定します
  • 結果の挿入、入れ替え、削除、css処理などがいろいろあります。詳細は本家のajax_command一覧を参考してください

 

drupal
development
system_management
ajax

DrupalのFormAPIでフォーム内でAJAXを扱うのは基本です

  • DrupalのFormAPIがAJAXを実装しています
  • FormAPIでのAJAXの扱う:「Drupalのフォーム(FromAPI)でのajaxの実装」を参考してください
  • FormAPIでのAJAXでの扱う利点:
    • フォームを作成しているときに簡単にAJAXの実装が可能
    • AJAXの仕組みを知らなくても、手順通りに実装すればよいです
  • 大半のケースでFormAPIで解決できるので、AJAXをFormAPIで実装するのは一般的となります

FormAPI以外にAJAXの実装はDrupal.ajaxオブジェクトで行います

  • DrupalのAJAXのフレームワークは「misc/ajax.js」にあります
  • AJAXを実装する場合、このjsファイルを必ずインポートする必要があります
    drupal_add_js("/misc/ajax.js") ;  // ajaxのjsファイルをインポート
  • ここで、あるフォーム(text_form)のボタンを押してajaxを通じてサーバーとの交信を行う例とします
    Drupalのajaxの仕組みと扱い方法
  • フォームはDrupalのFormAPIで生成、または別の方法で生成します
    // 例: DrupalのAPIでフォームを作成
    //     送信ボタンを押して、"test message"の文字列でフォームを置換します
      $form['card_last']=array(
          "#type" => "markup",
          "#markup" => "",
          "#prefix" => "<div id='card-last-result-div'>",  // ajaxで置換したいエリア
          "#suffix" => "</div>",
      );
    
      $form['card_last']['submit'] = array(
          '#type' => 'submit',
          '#value' => '送信',
          '#attributes' => array( 'id'=>'test-form-submit' ),  // ajaxのIDを指定します
          "#ajax" => array(
            "callback" => "_ajax_callback_form",  // ajaxのコールバック
            'wrapper' => 'card-last-result-div',
            'method' => 'replace',
            'effect' => 'fade',
          ),
      );
    
    // カスタムJSファイルをフォームと一緒に添付
      $form['#attached']['js'] = array( "file_path/custom_ajax.js" );

DrupalのAJAXオブジェクトを生成してサーバーとの交信を用意します

  • 一つカスタムjsファイルを用意して(例:custom_ajax.js)、フォーム生成と同時にクライアント側に渡します
  • Drupal.ajaxオブジェクトを生成します
    (function($){
      Drupal.behaviors.custom_module_name={
        attach:function(cotext,settings){
          $("#test-form-submit").once("test-form-submit",function(){ //指定したフォームのみ
            var base = $(this).attr('id');  //フォームIDの使用
            var element_settings = {
              url: window.location.protocol + "//"+ window.location.hostname + settings.basePath + settings.pathPrefix + "system/ajax",
              event: 'click',
              progress: { type: 'throbber', },
            };
        // Drupalのajaxオブジェクトを生成します
            Drupal.ajax[base] = new Drupal.ajax(base, this, element_settings);
    
        // 送信ボタンにListenerを追加
            $("#test-form-submit").on( 'click',function(){
              $(this).click();  // ajaxを作動させます
            });
          });
        }
      };
    })(jQuery)
    
    • base(必須): ajaxの識別、ここでフォームID(test-form-submit)で指定
    • url(必須): サイトのパス/system/ajax
    • event: ajaxを作動させるイベントの指定
    • progress: ajaxでデータ交信中にロードの動画アイコンの表示
  • サーバーサイトでajaxに呼び出されるファンクションを用意します、"test message"をajaxに返還します
    function _ajax_callback_card_last_form($form, &$form_state){
      $commands[] = ajax_command_replace('#card-last-result-div', "test message"); 
      return array('#type' => 'ajax', '#commands' => $commands);
    }
  • ここで、ajax_commandを利用しなくても、ajax_deliverでメッセージの返還もできます
drupal
development
form

やりたいこと:Drupalのフォーム(FormAPI)でajaxを実装して各フォーム要素を動的に制御したいです

  • 環境:Drupal7.54
  • フォーム(FormAPI)で各要素の表示/非表示などの制御が簡単にできます(Drupalのフォーム(Form API)の「#states」で各フォーム要素の動作制御が可能)。
    • フォームを作成時にJavascriptを意識しなくてよい
    • 事前にフォームの要素を用意して表示/非表示のようなお動作制御
    • データ取得するなどの動作制御はできません
  • ajaxで高等な動作(データ取得など)制御ができるので、FormAPIもこれ基盤を用意して、簡単に実装できます。

FormAPIで「#ajax」の記述(ポイント:callback、wrapper)だけで良いのでJavascriptの意識必要はありません

  • FormAPIがajaxのインターフェースを用意しています。Form記述で「#ajax」要素を追加すれば、Javascriptなどのコーティングはいらないです
    • callbak:ajaxのリクエストが来た時に呼び出される関数
    • wrapper:ajaxのサーバー処理完了後に結果を画面に表示させる場所の指定
  • 簡単の例:テキスト入力フォームを生成して、入力したメッセージを画面のどこかに再表示させるajax処理
    FormAPIのajaxの実装方法
  • ajaxの記述はFormAPIの実装時に追加します。
    /**
     *  Implementation of hook_menu()
     *  新規フォームを表示するページのメニュー設定
     */
    function my_module_name_menu() {
      $items['test/form'] = array(
          'title' => 'Ajaxテスト',
          'page callback' => 'drupal_get_form',
          'page arguments' => array('my_sample_form'),
          'access arguments' => array('access content'),
      );
    }
    
    /**
     * フォームの各要素の記述
     */
    function my_sample_form($form, &$form_state){
      // メッセージ入力フィールド
      $form['message'] = array(
          '#type' => 'textfield',
          '#title' => t('メッセージを入力'),
      );
    
      // 入力されたメッセージをajaxで表示する場所
      $form['msg_wrapper'] = array(
          '#type' => 'markup',
          '#markup' => "",
          '#prefix' => '<div id="msg-wrapper">',
          '#suffix' => '</div>',
      );
    
      // サブミットボタン
      $form['submit'] = array(
          '#type' => 'submit',
          '#value' => '送信',
          '#ajax' => array(
              'callback' => 'test_sample_form_ajax_callback',
              'wrapper' => 'msg-wrapper',
              'effect' => 'fade',
          ),
      );
    
      return $form;
    }
    
    /**
     * ajaxに呼び出される関数
     */
    function test_sample_form_ajax_callback($form, $form_state) {
      // 入力されたメッセージを指定した場所にセット
      $form['msg_wrapper']['#markup'] = '入力されたメッセージ:' .
                  check_plain($form_state['values']['message']) ;
      // 置換する部品を返す
      return $form['msg_wrapper'] ;
    }

     
drupal
development
ajax

やりたいこと:Drupalのプログラムレベルで簡単にajaxを利用してクライアント側でデータ交信をしたいです

  • 環境:Drupal7.54
  • DrupalのFormAPIで簡単にajaxの実装ができます(Drupalのフォーム(FromAPI)でのajaxの実装 )
  • FormAPIだけではなく、Drupalをカスタマイズ時にいろいろなところでajaxを実装したいことがあります

ポイント1:Drupalでajaxに必要なライブラリをロードし、クライアント側にjquery.form.jsファイルをセット

  • サーバー側でdrupal.ajaxのライブラリをロードする必要があります
  • クライアント側にjquery.form.jsファイルを設置する必要があります
  • この処理はajax処理するページをロード時に行えれば良いです。
    • 例:hook_init()内で処理する
      /**
       * Implements hook_init().
       */
      function YOUR_MODULE_NAME_init()
      {
        drupal_add_js('misc/jquery.form.js');
        drupal_add_library('system','drupal.ajax');
      }
  • クライアント側のブラウザのプロパティでjquery.form.jsがセットされたことの確認ができます

ポイント2:クライアント側のajax起動リンク内にajax対応可否のパラメーター「nojs」とクラス属性「use-ajax」のセット

  • ajaxの起動リンクの作成基本パターン: 
    <a href="text/ajax/nojs/1234" class="use-ajax">ajaxリンク</a>
    • hrefにある「nojs」が決まりの文字
    • hrefにある「1234」はサーバー側に転送したい必要なパラメーター
    • class="use-ajax"はこのリンクがajax用に決める
  • クライアント側のjsで使用しているブラウザがajax対応可能かを判断して、ajax起動リンクに「nojs」のパラメーターを書き換え(利用可能:nojs⇒ajax)てサーバー側に転送
  • サーバー側がajax利用可否よりクライアント側にajax対応有無の結果を返します
    Drupalのajaxフレームワークの利用
  • 上記例のプログラムは以下のようで
    /**
     * Implements hook_init().
     */
    function test_module_init()
    {
      drupal_add_js('misc/jquery.form.js');
      drupal_add_library('system','drupal.ajax');
    }
    
    /**
     *  Implementation of hook_menu()
     */
    function test_module_menu() {
      $items['test/ajax/%/%']=array(     // URLの2,3番目がクライアント側で生成
          'page callback' => 'ajax_node_response',
          'page arguments' => array(2,3),   // URLの2,3番目の引数をコールバック関数に渡す
          'access callback' => 'user_access',
          'access arguments' => array('access content'),
          'type' => MENU_CALLBACK,
      );
      return $items;
    }
    
    function ajax_node_response($type="ajax", $nid=0){
      $node = node_load( $nid, NULL, false );
      $vnode = node_view($node);
      $output = theme('node', $vnode);
      if( $type="ajax" ){
        $commands=array();
        $commands[]=ajax_command_replace( '#block-system-main','<section id="block-system-main">'.$output.'</section>' ) ;
        $page = array(
          '#type' => 'ajax',
          '#commands' => $commands,
        );
        ajax_deliver( $page ) ;   // ajax対応ブラウザの結果
      } else {
        $output = '<div id="content">'.$output.'</div>';  // ajax非対応ブラウザの結果
        return $output;
      }
    }
    

ポイント3:クライアント側で実行させたい部分はajax_commandを使用します

  • クライアント側で処理結果をどこに入り替えはajax_command_replaceで指定します
  • 結果の挿入、入れ替え、削除、css処理などがいろいろあります。詳細は本家のajax_command一覧を参考してください

 

drupal
form
ajax

Drupalのajax_commandの基本:登録されているコマンド(例:ajax_command_invokeなど)でクライアント側に実行コマンドを送ります

  • 背景:Drupal7.54、コアーモジュールajaxの利用
  • Drupalのajax利用は別の記事を参考してください
    • Drupalでajaxのフレームワークが簡単に作成できる
    • Drupalのajaxの仕組みおよびプログラム上での扱う
  • サーバーサイトの処理結果をクライアント側に送る方法:
    • FormAPIに"#ajax"セットにある"wrapper"に指定されたエレメントに処理結果の置換 <-  'replaceWith', 'append', 'prepend', 'before', 'after', or 'html'
    • ajax_commadよりクライアント側の要素挿入、置換、削除などの操作ができます
  • ajax_commandがサーバー側での処理結果をクライアント側により柔軟に操作することができます
    • ajax_commandに登録されている関数が本家のページを参考してください
    • クライアント側の要素挿入、置換、削除、javascript実行などができます

処理結果をクライアント側に実行させるためカスタムajaxコマンドの作成

  • クライアント側でjQueryのセレクターで選択できる要素の操作にはajax_commandに登録された関数で行うことができます
  • 複雑なjascript実行、複数のセレクターなどの場合、カスタムajax_commandの作成が必要となります
    • クライアント側のjavascript関数を呼び出します
    • サーバーサイトの処理ロジックをクライアント側で行います

jQueryで登録さた関数をajax_command_invokeで呼び出します

  • クライアント側で事前にjQueryのjavascript関数を定義します
  • ajax_command_invokeで定義された関数を呼び出します
    ajax_command_invokeでカスタムajax関数の呼び出し

Drupal.ajaxネームスペースのプロトタイプに登録されたjavascript関数をajax_commandで呼び出します

  • Drupal.ajaネームスペースのプロトタイプを利用して、javascript関数を事前に登録します
  • ajax_command(登録済みの関数ではない)でjavascript関数を呼び出します
    ajax_commandに登録されていないjs関数の呼び出し
drupal
development
ajax

やりたいこと:Drupalのプログラムレベルで簡単にajaxを利用してクライアント側でデータ交信をしたいです

  • 環境:Drupal7.54
  • DrupalのFormAPIで簡単にajaxの実装ができます(Drupalのフォーム(FromAPI)でのajaxの実装 )
  • FormAPIだけではなく、Drupalをカスタマイズ時にいろいろなところでajaxを実装したいことがあります

ポイント1:Drupalでajaxに必要なライブラリをロードし、クライアント側にjquery.form.jsファイルをセット

  • サーバー側でdrupal.ajaxのライブラリをロードする必要があります
  • クライアント側にjquery.form.jsファイルを設置する必要があります
  • この処理はajax処理するページをロード時に行えれば良いです。
    • 例:hook_init()内で処理する
      /**
       * Implements hook_init().
       */
      function YOUR_MODULE_NAME_init()
      {
        drupal_add_js('misc/jquery.form.js');
        drupal_add_library('system','drupal.ajax');
      }
  • クライアント側のブラウザのプロパティでjquery.form.jsがセットされたことの確認ができます

ポイント2:クライアント側のajax起動リンク内にajax対応可否のパラメーター「nojs」とクラス属性「use-ajax」のセット

  • ajaxの起動リンクの作成基本パターン: 
    <a href="text/ajax/nojs/1234" class="use-ajax">ajaxリンク</a>
    • hrefにある「nojs」が決まりの文字
    • hrefにある「1234」はサーバー側に転送したい必要なパラメーター
    • class="use-ajax"はこのリンクがajax用に決める
  • クライアント側のjsで使用しているブラウザがajax対応可能かを判断して、ajax起動リンクに「nojs」のパラメーターを書き換え(利用可能:nojs⇒ajax)てサーバー側に転送
  • サーバー側がajax利用可否よりクライアント側にajax対応有無の結果を返します
    Drupalのajaxフレームワークの利用
  • 上記例のプログラムは以下のようで
    /**
     * Implements hook_init().
     */
    function test_module_init()
    {
      drupal_add_js('misc/jquery.form.js');
      drupal_add_library('system','drupal.ajax');
    }
    
    /**
     *  Implementation of hook_menu()
     */
    function test_module_menu() {
      $items['test/ajax/%/%']=array(     // URLの2,3番目がクライアント側で生成
          'page callback' => 'ajax_node_response',
          'page arguments' => array(2,3),   // URLの2,3番目の引数をコールバック関数に渡す
          'access callback' => 'user_access',
          'access arguments' => array('access content'),
          'type' => MENU_CALLBACK,
      );
      return $items;
    }
    
    function ajax_node_response($type="ajax", $nid=0){
      $node = node_load( $nid, NULL, false );
      $vnode = node_view($node);
      $output = theme('node', $vnode);
      if( $type="ajax" ){
        $commands=array();
        $commands[]=ajax_command_replace( '#block-system-main','<section id="block-system-main">'.$output.'</section>' ) ;
        $page = array(
          '#type' => 'ajax',
          '#commands' => $commands,
        );
        ajax_deliver( $page ) ;   // ajax対応ブラウザの結果
      } else {
        $output = '<div id="content">'.$output.'</div>';  // ajax非対応ブラウザの結果
        return $output;
      }
    }
    

ポイント3:クライアント側で実行させたい部分はajax_commandを使用します

  • クライアント側で処理結果をどこに入り替えはajax_command_replaceで指定します
  • 結果の挿入、入れ替え、削除、css処理などがいろいろあります。詳細は本家のajax_command一覧を参考してください

 

drupal
development
system_management
ajax

DrupalのFormAPIでフォーム内でAJAXを扱うのは基本です

  • DrupalのFormAPIがAJAXを実装しています
  • FormAPIでのAJAXの扱う:「Drupalのフォーム(FromAPI)でのajaxの実装」を参考してください
  • FormAPIでのAJAXでの扱う利点:
    • フォームを作成しているときに簡単にAJAXの実装が可能
    • AJAXの仕組みを知らなくても、手順通りに実装すればよいです
  • 大半のケースでFormAPIで解決できるので、AJAXをFormAPIで実装するのは一般的となります

FormAPI以外にAJAXの実装はDrupal.ajaxオブジェクトで行います

  • DrupalのAJAXのフレームワークは「misc/ajax.js」にあります
  • AJAXを実装する場合、このjsファイルを必ずインポートする必要があります
    drupal_add_js("/misc/ajax.js") ;  // ajaxのjsファイルをインポート
  • ここで、あるフォーム(text_form)のボタンを押してajaxを通じてサーバーとの交信を行う例とします
    Drupalのajaxの仕組みと扱い方法
  • フォームはDrupalのFormAPIで生成、または別の方法で生成します
    // 例: DrupalのAPIでフォームを作成
    //     送信ボタンを押して、"test message"の文字列でフォームを置換します
      $form['card_last']=array(
          "#type" => "markup",
          "#markup" => "",
          "#prefix" => "<div id='card-last-result-div'>",  // ajaxで置換したいエリア
          "#suffix" => "</div>",
      );
    
      $form['card_last']['submit'] = array(
          '#type' => 'submit',
          '#value' => '送信',
          '#attributes' => array( 'id'=>'test-form-submit' ),  // ajaxのIDを指定します
          "#ajax" => array(
            "callback" => "_ajax_callback_form",  // ajaxのコールバック
            'wrapper' => 'card-last-result-div',
            'method' => 'replace',
            'effect' => 'fade',
          ),
      );
    
    // カスタムJSファイルをフォームと一緒に添付
      $form['#attached']['js'] = array( "file_path/custom_ajax.js" );

DrupalのAJAXオブジェクトを生成してサーバーとの交信を用意します

  • 一つカスタムjsファイルを用意して(例:custom_ajax.js)、フォーム生成と同時にクライアント側に渡します
  • Drupal.ajaxオブジェクトを生成します
    (function($){
      Drupal.behaviors.custom_module_name={
        attach:function(cotext,settings){
          $("#test-form-submit").once("test-form-submit",function(){ //指定したフォームのみ
            var base = $(this).attr('id');  //フォームIDの使用
            var element_settings = {
              url: window.location.protocol + "//"+ window.location.hostname + settings.basePath + settings.pathPrefix + "system/ajax",
              event: 'click',
              progress: { type: 'throbber', },
            };
        // Drupalのajaxオブジェクトを生成します
            Drupal.ajax[base] = new Drupal.ajax(base, this, element_settings);
    
        // 送信ボタンにListenerを追加
            $("#test-form-submit").on( 'click',function(){
              $(this).click();  // ajaxを作動させます
            });
          });
        }
      };
    })(jQuery)
    
    • base(必須): ajaxの識別、ここでフォームID(test-form-submit)で指定
    • url(必須): サイトのパス/system/ajax
    • event: ajaxを作動させるイベントの指定
    • progress: ajaxでデータ交信中にロードの動画アイコンの表示
  • サーバーサイトでajaxに呼び出されるファンクションを用意します、"test message"をajaxに返還します
    function _ajax_callback_card_last_form($form, &$form_state){
      $commands[] = ajax_command_replace('#card-last-result-div', "test message"); 
      return array('#type' => 'ajax', '#commands' => $commands);
    }
  • ここで、ajax_commandを利用しなくても、ajax_deliverでメッセージの返還もできます
drupal
development
form

やりたいこと:Drupalのフォーム(FormAPI)でajaxを実装して各フォーム要素を動的に制御したいです

  • 環境:Drupal7.54
  • フォーム(FormAPI)で各要素の表示/非表示などの制御が簡単にできます(Drupalのフォーム(Form API)の「#states」で各フォーム要素の動作制御が可能)。
    • フォームを作成時にJavascriptを意識しなくてよい
    • 事前にフォームの要素を用意して表示/非表示のようなお動作制御
    • データ取得するなどの動作制御はできません
  • ajaxで高等な動作(データ取得など)制御ができるので、FormAPIもこれ基盤を用意して、簡単に実装できます。

FormAPIで「#ajax」の記述(ポイント:callback、wrapper)だけで良いのでJavascriptの意識必要はありません

  • FormAPIがajaxのインターフェースを用意しています。Form記述で「#ajax」要素を追加すれば、Javascriptなどのコーティングはいらないです
    • callbak:ajaxのリクエストが来た時に呼び出される関数
    • wrapper:ajaxのサーバー処理完了後に結果を画面に表示させる場所の指定
  • 簡単の例:テキスト入力フォームを生成して、入力したメッセージを画面のどこかに再表示させるajax処理
    FormAPIのajaxの実装方法
  • ajaxの記述はFormAPIの実装時に追加します。
    /**
     *  Implementation of hook_menu()
     *  新規フォームを表示するページのメニュー設定
     */
    function my_module_name_menu() {
      $items['test/form'] = array(
          'title' => 'Ajaxテスト',
          'page callback' => 'drupal_get_form',
          'page arguments' => array('my_sample_form'),
          'access arguments' => array('access content'),
      );
    }
    
    /**
     * フォームの各要素の記述
     */
    function my_sample_form($form, &$form_state){
      // メッセージ入力フィールド
      $form['message'] = array(
          '#type' => 'textfield',
          '#title' => t('メッセージを入力'),
      );
    
      // 入力されたメッセージをajaxで表示する場所
      $form['msg_wrapper'] = array(
          '#type' => 'markup',
          '#markup' => "",
          '#prefix' => '<div id="msg-wrapper">',
          '#suffix' => '</div>',
      );
    
      // サブミットボタン
      $form['submit'] = array(
          '#type' => 'submit',
          '#value' => '送信',
          '#ajax' => array(
              'callback' => 'test_sample_form_ajax_callback',
              'wrapper' => 'msg-wrapper',
              'effect' => 'fade',
          ),
      );
    
      return $form;
    }
    
    /**
     * ajaxに呼び出される関数
     */
    function test_sample_form_ajax_callback($form, $form_state) {
      // 入力されたメッセージを指定した場所にセット
      $form['msg_wrapper']['#markup'] = '入力されたメッセージ:' .
                  check_plain($form_state['values']['message']) ;
      // 置換する部品を返す
      return $form['msg_wrapper'] ;
    }

     
drupal
development
ajax

やりたいこと:Drupalのプログラムレベルで簡単にajaxを利用してクライアント側でデータ交信をしたいです

  • 環境:Drupal7.54
  • DrupalのFormAPIで簡単にajaxの実装ができます(Drupalのフォーム(FromAPI)でのajaxの実装 )
  • FormAPIだけではなく、Drupalをカスタマイズ時にいろいろなところでajaxを実装したいことがあります

ポイント1:Drupalでajaxに必要なライブラリをロードし、クライアント側にjquery.form.jsファイルをセット

  • サーバー側でdrupal.ajaxのライブラリをロードする必要があります
  • クライアント側にjquery.form.jsファイルを設置する必要があります
  • この処理はajax処理するページをロード時に行えれば良いです。
    • 例:hook_init()内で処理する
      /**
       * Implements hook_init().
       */
      function YOUR_MODULE_NAME_init()
      {
        drupal_add_js('misc/jquery.form.js');
        drupal_add_library('system','drupal.ajax');
      }
  • クライアント側のブラウザのプロパティでjquery.form.jsがセットされたことの確認ができます

ポイント2:クライアント側のajax起動リンク内にajax対応可否のパラメーター「nojs」とクラス属性「use-ajax」のセット

  • ajaxの起動リンクの作成基本パターン: 
    <a href="text/ajax/nojs/1234" class="use-ajax">ajaxリンク</a>
    • hrefにある「nojs」が決まりの文字
    • hrefにある「1234」はサーバー側に転送したい必要なパラメーター
    • class="use-ajax"はこのリンクがajax用に決める
  • クライアント側のjsで使用しているブラウザがajax対応可能かを判断して、ajax起動リンクに「nojs」のパラメーターを書き換え(利用可能:nojs⇒ajax)てサーバー側に転送
  • サーバー側がajax利用可否よりクライアント側にajax対応有無の結果を返します
    Drupalのajaxフレームワークの利用
  • 上記例のプログラムは以下のようで
    /**
     * Implements hook_init().
     */
    function test_module_init()
    {
      drupal_add_js('misc/jquery.form.js');
      drupal_add_library('system','drupal.ajax');
    }
    
    /**
     *  Implementation of hook_menu()
     */
    function test_module_menu() {
      $items['test/ajax/%/%']=array(     // URLの2,3番目がクライアント側で生成
          'page callback' => 'ajax_node_response',
          'page arguments' => array(2,3),   // URLの2,3番目の引数をコールバック関数に渡す
          'access callback' => 'user_access',
          'access arguments' => array('access content'),
          'type' => MENU_CALLBACK,
      );
      return $items;
    }
    
    function ajax_node_response($type="ajax", $nid=0){
      $node = node_load( $nid, NULL, false );
      $vnode = node_view($node);
      $output = theme('node', $vnode);
      if( $type="ajax" ){
        $commands=array();
        $commands[]=ajax_command_replace( '#block-system-main','<section id="block-system-main">'.$output.'</section>' ) ;
        $page = array(
          '#type' => 'ajax',
          '#commands' => $commands,
        );
        ajax_deliver( $page ) ;   // ajax対応ブラウザの結果
      } else {
        $output = '<div id="content">'.$output.'</div>';  // ajax非対応ブラウザの結果
        return $output;
      }
    }
    

ポイント3:クライアント側で実行させたい部分はajax_commandを使用します

  • クライアント側で処理結果をどこに入り替えはajax_command_replaceで指定します
  • 結果の挿入、入れ替え、削除、css処理などがいろいろあります。詳細は本家のajax_command一覧を参考してください

 

drupal
form
ajax

Drupalのajax_commandの基本:登録されているコマンド(例:ajax_command_invokeなど)でクライアント側に実行コマンドを送ります

  • 背景:Drupal7.54、コアーモジュールajaxの利用
  • Drupalのajax利用は別の記事を参考してください
    • Drupalでajaxのフレームワークが簡単に作成できる
    • Drupalのajaxの仕組みおよびプログラム上での扱う
  • サーバーサイトの処理結果をクライアント側に送る方法:
    • FormAPIに"#ajax"セットにある"wrapper"に指定されたエレメントに処理結果の置換 <-  'replaceWith', 'append', 'prepend', 'before', 'after', or 'html'
    • ajax_commadよりクライアント側の要素挿入、置換、削除などの操作ができます
  • ajax_commandがサーバー側での処理結果をクライアント側により柔軟に操作することができます
    • ajax_commandに登録されている関数が本家のページを参考してください
    • クライアント側の要素挿入、置換、削除、javascript実行などができます

処理結果をクライアント側に実行させるためカスタムajaxコマンドの作成

  • クライアント側でjQueryのセレクターで選択できる要素の操作にはajax_commandに登録された関数で行うことができます
  • 複雑なjascript実行、複数のセレクターなどの場合、カスタムajax_commandの作成が必要となります
    • クライアント側のjavascript関数を呼び出します
    • サーバーサイトの処理ロジックをクライアント側で行います

jQueryで登録さた関数をajax_command_invokeで呼び出します

  • クライアント側で事前にjQueryのjavascript関数を定義します
  • ajax_command_invokeで定義された関数を呼び出します
    ajax_command_invokeでカスタムajax関数の呼び出し

Drupal.ajaxネームスペースのプロトタイプに登録されたjavascript関数をajax_commandで呼び出します

  • Drupal.ajaネームスペースのプロトタイプを利用して、javascript関数を事前に登録します
  • ajax_command(登録済みの関数ではない)でjavascript関数を呼び出します
    ajax_commandに登録されていないjs関数の呼び出し
drupal
development
ajax

やりたいこと:Drupalのプログラムレベルで簡単にajaxを利用してクライアント側でデータ交信をしたいです

  • 環境:Drupal7.54
  • DrupalのFormAPIで簡単にajaxの実装ができます(Drupalのフォーム(FromAPI)でのajaxの実装 )
  • FormAPIだけではなく、Drupalをカスタマイズ時にいろいろなところでajaxを実装したいことがあります

ポイント1:Drupalでajaxに必要なライブラリをロードし、クライアント側にjquery.form.jsファイルをセット

  • サーバー側でdrupal.ajaxのライブラリをロードする必要があります
  • クライアント側にjquery.form.jsファイルを設置する必要があります
  • この処理はajax処理するページをロード時に行えれば良いです。
    • 例:hook_init()内で処理する
      /**
       * Implements hook_init().
       */
      function YOUR_MODULE_NAME_init()
      {
        drupal_add_js('misc/jquery.form.js');
        drupal_add_library('system','drupal.ajax');
      }
  • クライアント側のブラウザのプロパティでjquery.form.jsがセットされたことの確認ができます

ポイント2:クライアント側のajax起動リンク内にajax対応可否のパラメーター「nojs」とクラス属性「use-ajax」のセット

  • ajaxの起動リンクの作成基本パターン: 
    <a href="text/ajax/nojs/1234" class="use-ajax">ajaxリンク</a>
    • hrefにある「nojs」が決まりの文字
    • hrefにある「1234」はサーバー側に転送したい必要なパラメーター
    • class="use-ajax"はこのリンクがajax用に決める
  • クライアント側のjsで使用しているブラウザがajax対応可能かを判断して、ajax起動リンクに「nojs」のパラメーターを書き換え(利用可能:nojs⇒ajax)てサーバー側に転送
  • サーバー側がajax利用可否よりクライアント側にajax対応有無の結果を返します
    Drupalのajaxフレームワークの利用
  • 上記例のプログラムは以下のようで
    /**
     * Implements hook_init().
     */
    function test_module_init()
    {
      drupal_add_js('misc/jquery.form.js');
      drupal_add_library('system','drupal.ajax');
    }
    
    /**
     *  Implementation of hook_menu()
     */
    function test_module_menu() {
      $items['test/ajax/%/%']=array(     // URLの2,3番目がクライアント側で生成
          'page callback' => 'ajax_node_response',
          'page arguments' => array(2,3),   // URLの2,3番目の引数をコールバック関数に渡す
          'access callback' => 'user_access',
          'access arguments' => array('access content'),
          'type' => MENU_CALLBACK,
      );
      return $items;
    }
    
    function ajax_node_response($type="ajax", $nid=0){
      $node = node_load( $nid, NULL, false );
      $vnode = node_view($node);
      $output = theme('node', $vnode);
      if( $type="ajax" ){
        $commands=array();
        $commands[]=ajax_command_replace( '#block-system-main','<section id="block-system-main">'.$output.'</section>' ) ;
        $page = array(
          '#type' => 'ajax',
          '#commands' => $commands,
        );
        ajax_deliver( $page ) ;   // ajax対応ブラウザの結果
      } else {
        $output = '<div id="content">'.$output.'</div>';  // ajax非対応ブラウザの結果
        return $output;
      }
    }
    

ポイント3:クライアント側で実行させたい部分はajax_commandを使用します

  • クライアント側で処理結果をどこに入り替えはajax_command_replaceで指定します
  • 結果の挿入、入れ替え、削除、css処理などがいろいろあります。詳細は本家のajax_command一覧を参考してください

 

drupal
development
system_management
ajax

DrupalのFormAPIでフォーム内でAJAXを扱うのは基本です

  • DrupalのFormAPIがAJAXを実装しています
  • FormAPIでのAJAXの扱う:「Drupalのフォーム(FromAPI)でのajaxの実装」を参考してください
  • FormAPIでのAJAXでの扱う利点:
    • フォームを作成しているときに簡単にAJAXの実装が可能
    • AJAXの仕組みを知らなくても、手順通りに実装すればよいです
  • 大半のケースでFormAPIで解決できるので、AJAXをFormAPIで実装するのは一般的となります

FormAPI以外にAJAXの実装はDrupal.ajaxオブジェクトで行います

  • DrupalのAJAXのフレームワークは「misc/ajax.js」にあります
  • AJAXを実装する場合、このjsファイルを必ずインポートする必要があります
    drupal_add_js("/misc/ajax.js") ;  // ajaxのjsファイルをインポート
  • ここで、あるフォーム(text_form)のボタンを押してajaxを通じてサーバーとの交信を行う例とします
    Drupalのajaxの仕組みと扱い方法
  • フォームはDrupalのFormAPIで生成、または別の方法で生成します
    // 例: DrupalのAPIでフォームを作成
    //     送信ボタンを押して、"test message"の文字列でフォームを置換します
      $form['card_last']=array(
          "#type" => "markup",
          "#markup" => "",
          "#prefix" => "<div id='card-last-result-div'>",  // ajaxで置換したいエリア
          "#suffix" => "</div>",
      );
    
      $form['card_last']['submit'] = array(
          '#type' => 'submit',
          '#value' => '送信',
          '#attributes' => array( 'id'=>'test-form-submit' ),  // ajaxのIDを指定します
          "#ajax" => array(
            "callback" => "_ajax_callback_form",  // ajaxのコールバック
            'wrapper' => 'card-last-result-div',
            'method' => 'replace',
            'effect' => 'fade',
          ),
      );
    
    // カスタムJSファイルをフォームと一緒に添付
      $form['#attached']['js'] = array( "file_path/custom_ajax.js" );

DrupalのAJAXオブジェクトを生成してサーバーとの交信を用意します

  • 一つカスタムjsファイルを用意して(例:custom_ajax.js)、フォーム生成と同時にクライアント側に渡します
  • Drupal.ajaxオブジェクトを生成します
    (function($){
      Drupal.behaviors.custom_module_name={
        attach:function(cotext,settings){
          $("#test-form-submit").once("test-form-submit",function(){ //指定したフォームのみ
            var base = $(this).attr('id');  //フォームIDの使用
            var element_settings = {
              url: window.location.protocol + "//"+ window.location.hostname + settings.basePath + settings.pathPrefix + "system/ajax",
              event: 'click',
              progress: { type: 'throbber', },
            };
        // Drupalのajaxオブジェクトを生成します
            Drupal.ajax[base] = new Drupal.ajax(base, this, element_settings);
    
        // 送信ボタンにListenerを追加
            $("#test-form-submit").on( 'click',function(){
              $(this).click();  // ajaxを作動させます
            });
          });
        }
      };
    })(jQuery)
    
    • base(必須): ajaxの識別、ここでフォームID(test-form-submit)で指定
    • url(必須): サイトのパス/system/ajax
    • event: ajaxを作動させるイベントの指定
    • progress: ajaxでデータ交信中にロードの動画アイコンの表示
  • サーバーサイトでajaxに呼び出されるファンクションを用意します、"test message"をajaxに返還します
    function _ajax_callback_card_last_form($form, &$form_state){
      $commands[] = ajax_command_replace('#card-last-result-div', "test message"); 
      return array('#type' => 'ajax', '#commands' => $commands);
    }
  • ここで、ajax_commandを利用しなくても、ajax_deliverでメッセージの返還もできます
drupal
development
form

やりたいこと:Drupalのフォーム(FormAPI)でajaxを実装して各フォーム要素を動的に制御したいです

  • 環境:Drupal7.54
  • フォーム(FormAPI)で各要素の表示/非表示などの制御が簡単にできます(Drupalのフォーム(Form API)の「#states」で各フォーム要素の動作制御が可能)。
    • フォームを作成時にJavascriptを意識しなくてよい
    • 事前にフォームの要素を用意して表示/非表示のようなお動作制御
    • データ取得するなどの動作制御はできません
  • ajaxで高等な動作(データ取得など)制御ができるので、FormAPIもこれ基盤を用意して、簡単に実装できます。

FormAPIで「#ajax」の記述(ポイント:callback、wrapper)だけで良いのでJavascriptの意識必要はありません

  • FormAPIがajaxのインターフェースを用意しています。Form記述で「#ajax」要素を追加すれば、Javascriptなどのコーティングはいらないです
    • callbak:ajaxのリクエストが来た時に呼び出される関数
    • wrapper:ajaxのサーバー処理完了後に結果を画面に表示させる場所の指定
  • 簡単の例:テキスト入力フォームを生成して、入力したメッセージを画面のどこかに再表示させるajax処理
    FormAPIのajaxの実装方法
  • ajaxの記述はFormAPIの実装時に追加します。
    /**
     *  Implementation of hook_menu()
     *  新規フォームを表示するページのメニュー設定
     */
    function my_module_name_menu() {
      $items['test/form'] = array(
          'title' => 'Ajaxテスト',
          'page callback' => 'drupal_get_form',
          'page arguments' => array('my_sample_form'),
          'access arguments' => array('access content'),
      );
    }
    
    /**
     * フォームの各要素の記述
     */
    function my_sample_form($form, &$form_state){
      // メッセージ入力フィールド
      $form['message'] = array(
          '#type' => 'textfield',
          '#title' => t('メッセージを入力'),
      );
    
      // 入力されたメッセージをajaxで表示する場所
      $form['msg_wrapper'] = array(
          '#type' => 'markup',
          '#markup' => "",
          '#prefix' => '<div id="msg-wrapper">',
          '#suffix' => '</div>',
      );
    
      // サブミットボタン
      $form['submit'] = array(
          '#type' => 'submit',
          '#value' => '送信',
          '#ajax' => array(
              'callback' => 'test_sample_form_ajax_callback',
              'wrapper' => 'msg-wrapper',
              'effect' => 'fade',
          ),
      );
    
      return $form;
    }
    
    /**
     * ajaxに呼び出される関数
     */
    function test_sample_form_ajax_callback($form, $form_state) {
      // 入力されたメッセージを指定した場所にセット
      $form['msg_wrapper']['#markup'] = '入力されたメッセージ:' .
                  check_plain($form_state['values']['message']) ;
      // 置換する部品を返す
      return $form['msg_wrapper'] ;
    }

     
drupal
development
ajax

やりたいこと:Drupalのプログラムレベルで簡単にajaxを利用してクライアント側でデータ交信をしたいです

  • 環境:Drupal7.54
  • DrupalのFormAPIで簡単にajaxの実装ができます(Drupalのフォーム(FromAPI)でのajaxの実装 )
  • FormAPIだけではなく、Drupalをカスタマイズ時にいろいろなところでajaxを実装したいことがあります

ポイント1:Drupalでajaxに必要なライブラリをロードし、クライアント側にjquery.form.jsファイルをセット

  • サーバー側でdrupal.ajaxのライブラリをロードする必要があります
  • クライアント側にjquery.form.jsファイルを設置する必要があります
  • この処理はajax処理するページをロード時に行えれば良いです。
    • 例:hook_init()内で処理する
      /**
       * Implements hook_init().
       */
      function YOUR_MODULE_NAME_init()
      {
        drupal_add_js('misc/jquery.form.js');
        drupal_add_library('system','drupal.ajax');
      }
  • クライアント側のブラウザのプロパティでjquery.form.jsがセットされたことの確認ができます

ポイント2:クライアント側のajax起動リンク内にajax対応可否のパラメーター「nojs」とクラス属性「use-ajax」のセット

  • ajaxの起動リンクの作成基本パターン: 
    <a href="text/ajax/nojs/1234" class="use-ajax">ajaxリンク</a>
    • hrefにある「nojs」が決まりの文字
    • hrefにある「1234」はサーバー側に転送したい必要なパラメーター
    • class="use-ajax"はこのリンクがajax用に決める
  • クライアント側のjsで使用しているブラウザがajax対応可能かを判断して、ajax起動リンクに「nojs」のパラメーターを書き換え(利用可能:nojs⇒ajax)てサーバー側に転送
  • サーバー側がajax利用可否よりクライアント側にajax対応有無の結果を返します
    Drupalのajaxフレームワークの利用
  • 上記例のプログラムは以下のようで
    /**
     * Implements hook_init().
     */
    function test_module_init()
    {
      drupal_add_js('misc/jquery.form.js');
      drupal_add_library('system','drupal.ajax');
    }
    
    /**
     *  Implementation of hook_menu()
     */
    function test_module_menu() {
      $items['test/ajax/%/%']=array(     // URLの2,3番目がクライアント側で生成
          'page callback' => 'ajax_node_response',
          'page arguments' => array(2,3),   // URLの2,3番目の引数をコールバック関数に渡す
          'access callback' => 'user_access',
          'access arguments' => array('access content'),
          'type' => MENU_CALLBACK,
      );
      return $items;
    }
    
    function ajax_node_response($type="ajax", $nid=0){
      $node = node_load( $nid, NULL, false );
      $vnode = node_view($node);
      $output = theme('node', $vnode);
      if( $type="ajax" ){
        $commands=array();
        $commands[]=ajax_command_replace( '#block-system-main','<section id="block-system-main">'.$output.'</section>' ) ;
        $page = array(
          '#type' => 'ajax',
          '#commands' => $commands,
        );
        ajax_deliver( $page ) ;   // ajax対応ブラウザの結果
      } else {
        $output = '<div id="content">'.$output.'</div>';  // ajax非対応ブラウザの結果
        return $output;
      }
    }
    

ポイント3:クライアント側で実行させたい部分はajax_commandを使用します

  • クライアント側で処理結果をどこに入り替えはajax_command_replaceで指定します
  • 結果の挿入、入れ替え、削除、css処理などがいろいろあります。詳細は本家のajax_command一覧を参考してください

 

drupal
form
ajax

Drupalのajax_commandの基本:登録されているコマンド(例:ajax_command_invokeなど)でクライアント側に実行コマンドを送ります

  • 背景:Drupal7.54、コアーモジュールajaxの利用
  • Drupalのajax利用は別の記事を参考してください
    • Drupalでajaxのフレームワークが簡単に作成できる
    • Drupalのajaxの仕組みおよびプログラム上での扱う
  • サーバーサイトの処理結果をクライアント側に送る方法:
    • FormAPIに"#ajax"セットにある"wrapper"に指定されたエレメントに処理結果の置換 <-  'replaceWith', 'append', 'prepend', 'before', 'after', or 'html'
    • ajax_commadよりクライアント側の要素挿入、置換、削除などの操作ができます
  • ajax_commandがサーバー側での処理結果をクライアント側により柔軟に操作することができます
    • ajax_commandに登録されている関数が本家のページを参考してください
    • クライアント側の要素挿入、置換、削除、javascript実行などができます

処理結果をクライアント側に実行させるためカスタムajaxコマンドの作成

  • クライアント側でjQueryのセレクターで選択できる要素の操作にはajax_commandに登録された関数で行うことができます
  • 複雑なjascript実行、複数のセレクターなどの場合、カスタムajax_commandの作成が必要となります
    • クライアント側のjavascript関数を呼び出します
    • サーバーサイトの処理ロジックをクライアント側で行います

jQueryで登録さた関数をajax_command_invokeで呼び出します

  • クライアント側で事前にjQueryのjavascript関数を定義します
  • ajax_command_invokeで定義された関数を呼び出します
    ajax_command_invokeでカスタムajax関数の呼び出し

Drupal.ajaxネームスペースのプロトタイプに登録されたjavascript関数をajax_commandで呼び出します

  • Drupal.ajaネームスペースのプロトタイプを利用して、javascript関数を事前に登録します
  • ajax_command(登録済みの関数ではない)でjavascript関数を呼び出します
    ajax_commandに登録されていないjs関数の呼び出し
drupal
development
ajax

やりたいこと:Drupalのプログラムレベルで簡単にajaxを利用してクライアント側でデータ交信をしたいです

  • 環境:Drupal7.54
  • DrupalのFormAPIで簡単にajaxの実装ができます(Drupalのフォーム(FromAPI)でのajaxの実装 )
  • FormAPIだけではなく、Drupalをカスタマイズ時にいろいろなところでajaxを実装したいことがあります

ポイント1:Drupalでajaxに必要なライブラリをロードし、クライアント側にjquery.form.jsファイルをセット

  • サーバー側でdrupal.ajaxのライブラリをロードする必要があります
  • クライアント側にjquery.form.jsファイルを設置する必要があります
  • この処理はajax処理するページをロード時に行えれば良いです。
    • 例:hook_init()内で処理する
      /**
       * Implements hook_init().
       */
      function YOUR_MODULE_NAME_init()
      {
        drupal_add_js('misc/jquery.form.js');
        drupal_add_library('system','drupal.ajax');
      }
  • クライアント側のブラウザのプロパティでjquery.form.jsがセットされたことの確認ができます

ポイント2:クライアント側のajax起動リンク内にajax対応可否のパラメーター「nojs」とクラス属性「use-ajax」のセット

  • ajaxの起動リンクの作成基本パターン: 
    <a href="text/ajax/nojs/1234" class="use-ajax">ajaxリンク</a>
    • hrefにある「nojs」が決まりの文字
    • hrefにある「1234」はサーバー側に転送したい必要なパラメーター
    • class="use-ajax"はこのリンクがajax用に決める
  • クライアント側のjsで使用しているブラウザがajax対応可能かを判断して、ajax起動リンクに「nojs」のパラメーターを書き換え(利用可能:nojs⇒ajax)てサーバー側に転送
  • サーバー側がajax利用可否よりクライアント側にajax対応有無の結果を返します
    Drupalのajaxフレームワークの利用
  • 上記例のプログラムは以下のようで
    /**
     * Implements hook_init().
     */
    function test_module_init()
    {
      drupal_add_js('misc/jquery.form.js');
      drupal_add_library('system','drupal.ajax');
    }
    
    /**
     *  Implementation of hook_menu()
     */
    function test_module_menu() {
      $items['test/ajax/%/%']=array(     // URLの2,3番目がクライアント側で生成
          'page callback' => 'ajax_node_response',
          'page arguments' => array(2,3),   // URLの2,3番目の引数をコールバック関数に渡す
          'access callback' => 'user_access',
          'access arguments' => array('access content'),
          'type' => MENU_CALLBACK,
      );
      return $items;
    }
    
    function ajax_node_response($type="ajax", $nid=0){
      $node = node_load( $nid, NULL, false );
      $vnode = node_view($node);
      $output = theme('node', $vnode);
      if( $type="ajax" ){
        $commands=array();
        $commands[]=ajax_command_replace( '#block-system-main','<section id="block-system-main">'.$output.'</section>' ) ;
        $page = array(
          '#type' => 'ajax',
          '#commands' => $commands,
        );
        ajax_deliver( $page ) ;   // ajax対応ブラウザの結果
      } else {
        $output = '<div id="content">'.$output.'</div>';  // ajax非対応ブラウザの結果
        return $output;
      }
    }
    

ポイント3:クライアント側で実行させたい部分はajax_commandを使用します

  • クライアント側で処理結果をどこに入り替えはajax_command_replaceで指定します
  • 結果の挿入、入れ替え、削除、css処理などがいろいろあります。詳細は本家のajax_command一覧を参考してください

 

drupal
development
system_management
ajax

DrupalのFormAPIでフォーム内でAJAXを扱うのは基本です

  • DrupalのFormAPIがAJAXを実装しています
  • FormAPIでのAJAXの扱う:「Drupalのフォーム(FromAPI)でのajaxの実装」を参考してください
  • FormAPIでのAJAXでの扱う利点:
    • フォームを作成しているときに簡単にAJAXの実装が可能
    • AJAXの仕組みを知らなくても、手順通りに実装すればよいです
  • 大半のケースでFormAPIで解決できるので、AJAXをFormAPIで実装するのは一般的となります

FormAPI以外にAJAXの実装はDrupal.ajaxオブジェクトで行います

  • DrupalのAJAXのフレームワークは「misc/ajax.js」にあります
  • AJAXを実装する場合、このjsファイルを必ずインポートする必要があります
    drupal_add_js("/misc/ajax.js") ;  // ajaxのjsファイルをインポート
  • ここで、あるフォーム(text_form)のボタンを押してajaxを通じてサーバーとの交信を行う例とします
    Drupalのajaxの仕組みと扱い方法
  • フォームはDrupalのFormAPIで生成、または別の方法で生成します
    // 例: DrupalのAPIでフォームを作成
    //     送信ボタンを押して、"test message"の文字列でフォームを置換します
      $form['card_last']=array(
          "#type" => "markup",
          "#markup" => "",
          "#prefix" => "<div id='card-last-result-div'>",  // ajaxで置換したいエリア
          "#suffix" => "</div>",
      );
    
      $form['card_last']['submit'] = array(
          '#type' => 'submit',
          '#value' => '送信',
          '#attributes' => array( 'id'=>'test-form-submit' ),  // ajaxのIDを指定します
          "#ajax" => array(
            "callback" => "_ajax_callback_form",  // ajaxのコールバック
            'wrapper' => 'card-last-result-div',
            'method' => 'replace',
            'effect' => 'fade',
          ),
      );
    
    // カスタムJSファイルをフォームと一緒に添付
      $form['#attached']['js'] = array( "file_path/custom_ajax.js" );

DrupalのAJAXオブジェクトを生成してサーバーとの交信を用意します

  • 一つカスタムjsファイルを用意して(例:custom_ajax.js)、フォーム生成と同時にクライアント側に渡します
  • Drupal.ajaxオブジェクトを生成します
    (function($){
      Drupal.behaviors.custom_module_name={
        attach:function(cotext,settings){
          $("#test-form-submit").once("test-form-submit",function(){ //指定したフォームのみ
            var base = $(this).attr('id');  //フォームIDの使用
            var element_settings = {
              url: window.location.protocol + "//"+ window.location.hostname + settings.basePath + settings.pathPrefix + "system/ajax",
              event: 'click',
              progress: { type: 'throbber', },
            };
        // Drupalのajaxオブジェクトを生成します
            Drupal.ajax[base] = new Drupal.ajax(base, this, element_settings);
    
        // 送信ボタンにListenerを追加
            $("#test-form-submit").on( 'click',function(){
              $(this).click();  // ajaxを作動させます
            });
          });
        }
      };
    })(jQuery)
    
    • base(必須): ajaxの識別、ここでフォームID(test-form-submit)で指定
    • url(必須): サイトのパス/system/ajax
    • event: ajaxを作動させるイベントの指定
    • progress: ajaxでデータ交信中にロードの動画アイコンの表示
  • サーバーサイトでajaxに呼び出されるファンクションを用意します、"test message"をajaxに返還します
    function _ajax_callback_card_last_form($form, &$form_state){
      $commands[] = ajax_command_replace('#card-last-result-div', "test message"); 
      return array('#type' => 'ajax', '#commands' => $commands);
    }
  • ここで、ajax_commandを利用しなくても、ajax_deliverでメッセージの返還もできます
drupal
development
form

やりたいこと:Drupalのフォーム(FormAPI)でajaxを実装して各フォーム要素を動的に制御したいです

  • 環境:Drupal7.54
  • フォーム(FormAPI)で各要素の表示/非表示などの制御が簡単にできます(Drupalのフォーム(Form API)の「#states」で各フォーム要素の動作制御が可能)。
    • フォームを作成時にJavascriptを意識しなくてよい
    • 事前にフォームの要素を用意して表示/非表示のようなお動作制御
    • データ取得するなどの動作制御はできません
  • ajaxで高等な動作(データ取得など)制御ができるので、FormAPIもこれ基盤を用意して、簡単に実装できます。

FormAPIで「#ajax」の記述(ポイント:callback、wrapper)だけで良いのでJavascriptの意識必要はありません

  • FormAPIがajaxのインターフェースを用意しています。Form記述で「#ajax」要素を追加すれば、Javascriptなどのコーティングはいらないです
    • callbak:ajaxのリクエストが来た時に呼び出される関数
    • wrapper:ajaxのサーバー処理完了後に結果を画面に表示させる場所の指定
  • 簡単の例:テキスト入力フォームを生成して、入力したメッセージを画面のどこかに再表示させるajax処理
    FormAPIのajaxの実装方法
  • ajaxの記述はFormAPIの実装時に追加します。
    /**
     *  Implementation of hook_menu()
     *  新規フォームを表示するページのメニュー設定
     */
    function my_module_name_menu() {
      $items['test/form'] = array(
          'title' => 'Ajaxテスト',
          'page callback' => 'drupal_get_form',
          'page arguments' => array('my_sample_form'),
          'access arguments' => array('access content'),
      );
    }
    
    /**
     * フォームの各要素の記述
     */
    function my_sample_form($form, &$form_state){
      // メッセージ入力フィールド
      $form['message'] = array(
          '#type' => 'textfield',
          '#title' => t('メッセージを入力'),
      );
    
      // 入力されたメッセージをajaxで表示する場所
      $form['msg_wrapper'] = array(
          '#type' => 'markup',
          '#markup' => "",
          '#prefix' => '<div id="msg-wrapper">',
          '#suffix' => '</div>',
      );
    
      // サブミットボタン
      $form['submit'] = array(
          '#type' => 'submit',
          '#value' => '送信',
          '#ajax' => array(
              'callback' => 'test_sample_form_ajax_callback',
              'wrapper' => 'msg-wrapper',
              'effect' => 'fade',
          ),
      );
    
      return $form;
    }
    
    /**
     * ajaxに呼び出される関数
     */
    function test_sample_form_ajax_callback($form, $form_state) {
      // 入力されたメッセージを指定した場所にセット
      $form['msg_wrapper']['#markup'] = '入力されたメッセージ:' .
                  check_plain($form_state['values']['message']) ;
      // 置換する部品を返す
      return $form['msg_wrapper'] ;
    }

     
drupal
development
ajax

やりたいこと:Drupalのプログラムレベルで簡単にajaxを利用してクライアント側でデータ交信をしたいです

  • 環境:Drupal7.54
  • DrupalのFormAPIで簡単にajaxの実装ができます(Drupalのフォーム(FromAPI)でのajaxの実装 )
  • FormAPIだけではなく、Drupalをカスタマイズ時にいろいろなところでajaxを実装したいことがあります

ポイント1:Drupalでajaxに必要なライブラリをロードし、クライアント側にjquery.form.jsファイルをセット

  • サーバー側でdrupal.ajaxのライブラリをロードする必要があります
  • クライアント側にjquery.form.jsファイルを設置する必要があります
  • この処理はajax処理するページをロード時に行えれば良いです。
    • 例:hook_init()内で処理する
      /**
       * Implements hook_init().
       */
      function YOUR_MODULE_NAME_init()
      {
        drupal_add_js('misc/jquery.form.js');
        drupal_add_library('system','drupal.ajax');
      }
  • クライアント側のブラウザのプロパティでjquery.form.jsがセットされたことの確認ができます

ポイント2:クライアント側のajax起動リンク内にajax対応可否のパラメーター「nojs」とクラス属性「use-ajax」のセット

  • ajaxの起動リンクの作成基本パターン: 
    <a href="text/ajax/nojs/1234" class="use-ajax">ajaxリンク</a>
    • hrefにある「nojs」が決まりの文字
    • hrefにある「1234」はサーバー側に転送したい必要なパラメーター
    • class="use-ajax"はこのリンクがajax用に決める
  • クライアント側のjsで使用しているブラウザがajax対応可能かを判断して、ajax起動リンクに「nojs」のパラメーターを書き換え(利用可能:nojs⇒ajax)てサーバー側に転送
  • サーバー側がajax利用可否よりクライアント側にajax対応有無の結果を返します
    Drupalのajaxフレームワークの利用
  • 上記例のプログラムは以下のようで
    /**
     * Implements hook_init().
     */
    function test_module_init()
    {
      drupal_add_js('misc/jquery.form.js');
      drupal_add_library('system','drupal.ajax');
    }
    
    /**
     *  Implementation of hook_menu()
     */
    function test_module_menu() {
      $items['test/ajax/%/%']=array(     // URLの2,3番目がクライアント側で生成
          'page callback' => 'ajax_node_response',
          'page arguments' => array(2,3),   // URLの2,3番目の引数をコールバック関数に渡す
          'access callback' => 'user_access',
          'access arguments' => array('access content'),
          'type' => MENU_CALLBACK,
      );
      return $items;
    }
    
    function ajax_node_response($type="ajax", $nid=0){
      $node = node_load( $nid, NULL, false );
      $vnode = node_view($node);
      $output = theme('node', $vnode);
      if( $type="ajax" ){
        $commands=array();
        $commands[]=ajax_command_replace( '#block-system-main','<section id="block-system-main">'.$output.'</section>' ) ;
        $page = array(
          '#type' => 'ajax',
          '#commands' => $commands,
        );
        ajax_deliver( $page ) ;   // ajax対応ブラウザの結果
      } else {
        $output = '<div id="content">'.$output.'</div>';  // ajax非対応ブラウザの結果
        return $output;
      }
    }
    

ポイント3:クライアント側で実行させたい部分はajax_commandを使用します

  • クライアント側で処理結果をどこに入り替えはajax_command_replaceで指定します
  • 結果の挿入、入れ替え、削除、css処理などがいろいろあります。詳細は本家のajax_command一覧を参考してください

 

drupal
form
ajax

Drupalのajax_commandの基本:登録されているコマンド(例:ajax_command_invokeなど)でクライアント側に実行コマンドを送ります

  • 背景:Drupal7.54、コアーモジュールajaxの利用
  • Drupalのajax利用は別の記事を参考してください
    • Drupalでajaxのフレームワークが簡単に作成できる
    • Drupalのajaxの仕組みおよびプログラム上での扱う
  • サーバーサイトの処理結果をクライアント側に送る方法:
    • FormAPIに"#ajax"セットにある"wrapper"に指定されたエレメントに処理結果の置換 <-  'replaceWith', 'append', 'prepend', 'before', 'after', or 'html'
    • ajax_commadよりクライアント側の要素挿入、置換、削除などの操作ができます
  • ajax_commandがサーバー側での処理結果をクライアント側により柔軟に操作することができます
    • ajax_commandに登録されている関数が本家のページを参考してください
    • クライアント側の要素挿入、置換、削除、javascript実行などができます

処理結果をクライアント側に実行させるためカスタムajaxコマンドの作成

  • クライアント側でjQueryのセレクターで選択できる要素の操作にはajax_commandに登録された関数で行うことができます
  • 複雑なjascript実行、複数のセレクターなどの場合、カスタムajax_commandの作成が必要となります
    • クライアント側のjavascript関数を呼び出します
    • サーバーサイトの処理ロジックをクライアント側で行います

jQueryで登録さた関数をajax_command_invokeで呼び出します

  • クライアント側で事前にjQueryのjavascript関数を定義します
  • ajax_command_invokeで定義された関数を呼び出します
    ajax_command_invokeでカスタムajax関数の呼び出し

Drupal.ajaxネームスペースのプロトタイプに登録されたjavascript関数をajax_commandで呼び出します

  • Drupal.ajaネームスペースのプロトタイプを利用して、javascript関数を事前に登録します
  • ajax_command(登録済みの関数ではない)でjavascript関数を呼び出します
    ajax_commandに登録されていないjs関数の呼び出し
drupal
development
ajax

やりたいこと:Drupalのプログラムレベルで簡単にajaxを利用してクライアント側でデータ交信をしたいです

  • 環境:Drupal7.54
  • DrupalのFormAPIで簡単にajaxの実装ができます(Drupalのフォーム(FromAPI)でのajaxの実装 )
  • FormAPIだけではなく、Drupalをカスタマイズ時にいろいろなところでajaxを実装したいことがあります

ポイント1:Drupalでajaxに必要なライブラリをロードし、クライアント側にjquery.form.jsファイルをセット

  • サーバー側でdrupal.ajaxのライブラリをロードする必要があります
  • クライアント側にjquery.form.jsファイルを設置する必要があります
  • この処理はajax処理するページをロード時に行えれば良いです。
    • 例:hook_init()内で処理する
      /**
       * Implements hook_init().
       */
      function YOUR_MODULE_NAME_init()
      {
        drupal_add_js('misc/jquery.form.js');
        drupal_add_library('system','drupal.ajax');
      }
  • クライアント側のブラウザのプロパティでjquery.form.jsがセットされたことの確認ができます

ポイント2:クライアント側のajax起動リンク内にajax対応可否のパラメーター「nojs」とクラス属性「use-ajax」のセット

  • ajaxの起動リンクの作成基本パターン: 
    <a href="text/ajax/nojs/1234" class="use-ajax">ajaxリンク</a>
    • hrefにある「nojs」が決まりの文字
    • hrefにある「1234」はサーバー側に転送したい必要なパラメーター
    • class="use-ajax"はこのリンクがajax用に決める
  • クライアント側のjsで使用しているブラウザがajax対応可能かを判断して、ajax起動リンクに「nojs」のパラメーターを書き換え(利用可能:nojs⇒ajax)てサーバー側に転送
  • サーバー側がajax利用可否よりクライアント側にajax対応有無の結果を返します
    Drupalのajaxフレームワークの利用
  • 上記例のプログラムは以下のようで
    /**
     * Implements hook_init().
     */
    function test_module_init()
    {
      drupal_add_js('misc/jquery.form.js');
      drupal_add_library('system','drupal.ajax');
    }
    
    /**
     *  Implementation of hook_menu()
     */
    function test_module_menu() {
      $items['test/ajax/%/%']=array(     // URLの2,3番目がクライアント側で生成
          'page callback' => 'ajax_node_response',
          'page arguments' => array(2,3),   // URLの2,3番目の引数をコールバック関数に渡す
          'access callback' => 'user_access',
          'access arguments' => array('access content'),
          'type' => MENU_CALLBACK,
      );
      return $items;
    }
    
    function ajax_node_response($type="ajax", $nid=0){
      $node = node_load( $nid, NULL, false );
      $vnode = node_view($node);
      $output = theme('node', $vnode);
      if( $type="ajax" ){
        $commands=array();
        $commands[]=ajax_command_replace( '#block-system-main','<section id="block-system-main">'.$output.'</section>' ) ;
        $page = array(
          '#type' => 'ajax',
          '#commands' => $commands,
        );
        ajax_deliver( $page ) ;   // ajax対応ブラウザの結果
      } else {
        $output = '<div id="content">'.$output.'</div>';  // ajax非対応ブラウザの結果
        return $output;
      }
    }
    

ポイント3:クライアント側で実行させたい部分はajax_commandを使用します

  • クライアント側で処理結果をどこに入り替えはajax_command_replaceで指定します
  • 結果の挿入、入れ替え、削除、css処理などがいろいろあります。詳細は本家のajax_command一覧を参考してください

 

drupal
development
system_management
ajax

DrupalのFormAPIでフォーム内でAJAXを扱うのは基本です

  • DrupalのFormAPIがAJAXを実装しています
  • FormAPIでのAJAXの扱う:「Drupalのフォーム(FromAPI)でのajaxの実装」を参考してください
  • FormAPIでのAJAXでの扱う利点:
    • フォームを作成しているときに簡単にAJAXの実装が可能
    • AJAXの仕組みを知らなくても、手順通りに実装すればよいです
  • 大半のケースでFormAPIで解決できるので、AJAXをFormAPIで実装するのは一般的となります

FormAPI以外にAJAXの実装はDrupal.ajaxオブジェクトで行います

  • DrupalのAJAXのフレームワークは「misc/ajax.js」にあります
  • AJAXを実装する場合、このjsファイルを必ずインポートする必要があります
    drupal_add_js("/misc/ajax.js") ;  // ajaxのjsファイルをインポート
  • ここで、あるフォーム(text_form)のボタンを押してajaxを通じてサーバーとの交信を行う例とします
    Drupalのajaxの仕組みと扱い方法
  • フォームはDrupalのFormAPIで生成、または別の方法で生成します
    // 例: DrupalのAPIでフォームを作成
    //     送信ボタンを押して、"test message"の文字列でフォームを置換します
      $form['card_last']=array(
          "#type" => "markup",
          "#markup" => "",
          "#prefix" => "<div id='card-last-result-div'>",  // ajaxで置換したいエリア
          "#suffix" => "</div>",
      );
    
      $form['card_last']['submit'] = array(
          '#type' => 'submit',
          '#value' => '送信',
          '#attributes' => array( 'id'=>'test-form-submit' ),  // ajaxのIDを指定します
          "#ajax" => array(
            "callback" => "_ajax_callback_form",  // ajaxのコールバック
            'wrapper' => 'card-last-result-div',
            'method' => 'replace',
            'effect' => 'fade',
          ),
      );
    
    // カスタムJSファイルをフォームと一緒に添付
      $form['#attached']['js'] = array( "file_path/custom_ajax.js" );

DrupalのAJAXオブジェクトを生成してサーバーとの交信を用意します

  • 一つカスタムjsファイルを用意して(例:custom_ajax.js)、フォーム生成と同時にクライアント側に渡します
  • Drupal.ajaxオブジェクトを生成します
    (function($){
      Drupal.behaviors.custom_module_name={
        attach:function(cotext,settings){
          $("#test-form-submit").once("test-form-submit",function(){ //指定したフォームのみ
            var base = $(this).attr('id');  //フォームIDの使用
            var element_settings = {
              url: window.location.protocol + "//"+ window.location.hostname + settings.basePath + settings.pathPrefix + "system/ajax",
              event: 'click',
              progress: { type: 'throbber', },
            };
        // Drupalのajaxオブジェクトを生成します
            Drupal.ajax[base] = new Drupal.ajax(base, this, element_settings);
    
        // 送信ボタンにListenerを追加
            $("#test-form-submit").on( 'click',function(){
              $(this).click();  // ajaxを作動させます
            });
          });
        }
      };
    })(jQuery)
    
    • base(必須): ajaxの識別、ここでフォームID(test-form-submit)で指定
    • url(必須): サイトのパス/system/ajax
    • event: ajaxを作動させるイベントの指定
    • progress: ajaxでデータ交信中にロードの動画アイコンの表示
  • サーバーサイトでajaxに呼び出されるファンクションを用意します、"test message"をajaxに返還します
    function _ajax_callback_card_last_form($form, &$form_state){
      $commands[] = ajax_command_replace('#card-last-result-div', "test message"); 
      return array('#type' => 'ajax', '#commands' => $commands);
    }
  • ここで、ajax_commandを利用しなくても、ajax_deliverでメッセージの返還もできます
drupal
development
form

やりたいこと:Drupalのフォーム(FormAPI)でajaxを実装して各フォーム要素を動的に制御したいです

  • 環境:Drupal7.54
  • フォーム(FormAPI)で各要素の表示/非表示などの制御が簡単にできます(Drupalのフォーム(Form API)の「#states」で各フォーム要素の動作制御が可能)。
    • フォームを作成時にJavascriptを意識しなくてよい
    • 事前にフォームの要素を用意して表示/非表示のようなお動作制御
    • データ取得するなどの動作制御はできません
  • ajaxで高等な動作(データ取得など)制御ができるので、FormAPIもこれ基盤を用意して、簡単に実装できます。

FormAPIで「#ajax」の記述(ポイント:callback、wrapper)だけで良いのでJavascriptの意識必要はありません

  • FormAPIがajaxのインターフェースを用意しています。Form記述で「#ajax」要素を追加すれば、Javascriptなどのコーティングはいらないです
    • callbak:ajaxのリクエストが来た時に呼び出される関数
    • wrapper:ajaxのサーバー処理完了後に結果を画面に表示させる場所の指定
  • 簡単の例:テキスト入力フォームを生成して、入力したメッセージを画面のどこかに再表示させるajax処理
    FormAPIのajaxの実装方法
  • ajaxの記述はFormAPIの実装時に追加します。
    /**
     *  Implementation of hook_menu()
     *  新規フォームを表示するページのメニュー設定
     */
    function my_module_name_menu() {
      $items['test/form'] = array(
          'title' => 'Ajaxテスト',
          'page callback' => 'drupal_get_form',
          'page arguments' => array('my_sample_form'),
          'access arguments' => array('access content'),
      );
    }
    
    /**
     * フォームの各要素の記述
     */
    function my_sample_form($form, &$form_state){
      // メッセージ入力フィールド
      $form['message'] = array(
          '#type' => 'textfield',
          '#title' => t('メッセージを入力'),
      );
    
      // 入力されたメッセージをajaxで表示する場所
      $form['msg_wrapper'] = array(
          '#type' => 'markup',
          '#markup' => "",
          '#prefix' => '<div id="msg-wrapper">',
          '#suffix' => '</div>',
      );
    
      // サブミットボタン
      $form['submit'] = array(
          '#type' => 'submit',
          '#value' => '送信',
          '#ajax' => array(
              'callback' => 'test_sample_form_ajax_callback',
              'wrapper' => 'msg-wrapper',
              'effect' => 'fade',
          ),
      );
    
      return $form;
    }
    
    /**
     * ajaxに呼び出される関数
     */
    function test_sample_form_ajax_callback($form, $form_state) {
      // 入力されたメッセージを指定した場所にセット
      $form['msg_wrapper']['#markup'] = '入力されたメッセージ:' .
                  check_plain($form_state['values']['message']) ;
      // 置換する部品を返す
      return $form['msg_wrapper'] ;
    }

     
drupal
development
ajax

やりたいこと:Drupalのプログラムレベルで簡単にajaxを利用してクライアント側でデータ交信をしたいです

  • 環境:Drupal7.54
  • DrupalのFormAPIで簡単にajaxの実装ができます(Drupalのフォーム(FromAPI)でのajaxの実装 )
  • FormAPIだけではなく、Drupalをカスタマイズ時にいろいろなところでajaxを実装したいことがあります

ポイント1:Drupalでajaxに必要なライブラリをロードし、クライアント側にjquery.form.jsファイルをセット

  • サーバー側でdrupal.ajaxのライブラリをロードする必要があります
  • クライアント側にjquery.form.jsファイルを設置する必要があります
  • この処理はajax処理するページをロード時に行えれば良いです。
    • 例:hook_init()内で処理する
      /**
       * Implements hook_init().
       */
      function YOUR_MODULE_NAME_init()
      {
        drupal_add_js('misc/jquery.form.js');
        drupal_add_library('system','drupal.ajax');
      }
  • クライアント側のブラウザのプロパティでjquery.form.jsがセットされたことの確認ができます

ポイント2:クライアント側のajax起動リンク内にajax対応可否のパラメーター「nojs」とクラス属性「use-ajax」のセット

  • ajaxの起動リンクの作成基本パターン: 
    <a href="text/ajax/nojs/1234" class="use-ajax">ajaxリンク</a>
    • hrefにある「nojs」が決まりの文字
    • hrefにある「1234」はサーバー側に転送したい必要なパラメーター
    • class="use-ajax"はこのリンクがajax用に決める
  • クライアント側のjsで使用しているブラウザがajax対応可能かを判断して、ajax起動リンクに「nojs」のパラメーターを書き換え(利用可能:nojs⇒ajax)てサーバー側に転送
  • サーバー側がajax利用可否よりクライアント側にajax対応有無の結果を返します
    Drupalのajaxフレームワークの利用
  • 上記例のプログラムは以下のようで
    /**
     * Implements hook_init().
     */
    function test_module_init()
    {
      drupal_add_js('misc/jquery.form.js');
      drupal_add_library('system','drupal.ajax');
    }
    
    /**
     *  Implementation of hook_menu()
     */
    function test_module_menu() {
      $items['test/ajax/%/%']=array(     // URLの2,3番目がクライアント側で生成
          'page callback' => 'ajax_node_response',
          'page arguments' => array(2,3),   // URLの2,3番目の引数をコールバック関数に渡す
          'access callback' => 'user_access',
          'access arguments' => array('access content'),
          'type' => MENU_CALLBACK,
      );
      return $items;
    }
    
    function ajax_node_response($type="ajax", $nid=0){
      $node = node_load( $nid, NULL, false );
      $vnode = node_view($node);
      $output = theme('node', $vnode);
      if( $type="ajax" ){
        $commands=array();
        $commands[]=ajax_command_replace( '#block-system-main','<section id="block-system-main">'.$output.'</section>' ) ;
        $page = array(
          '#type' => 'ajax',
          '#commands' => $commands,
        );
        ajax_deliver( $page ) ;   // ajax対応ブラウザの結果
      } else {
        $output = '<div id="content">'.$output.'</div>';  // ajax非対応ブラウザの結果
        return $output;
      }
    }
    

ポイント3:クライアント側で実行させたい部分はajax_commandを使用します

  • クライアント側で処理結果をどこに入り替えはajax_command_replaceで指定します
  • 結果の挿入、入れ替え、削除、css処理などがいろいろあります。詳細は本家のajax_command一覧を参考してください

 

drupal
form
ajax

Drupalのajax_commandの基本:登録されているコマンド(例:ajax_command_invokeなど)でクライアント側に実行コマンドを送ります

  • 背景:Drupal7.54、コアーモジュールajaxの利用
  • Drupalのajax利用は別の記事を参考してください
    • Drupalでajaxのフレームワークが簡単に作成できる
    • Drupalのajaxの仕組みおよびプログラム上での扱う
  • サーバーサイトの処理結果をクライアント側に送る方法:
    • FormAPIに"#ajax"セットにある"wrapper"に指定されたエレメントに処理結果の置換 <-  'replaceWith', 'append', 'prepend', 'before', 'after', or 'html'
    • ajax_commadよりクライアント側の要素挿入、置換、削除などの操作ができます
  • ajax_commandがサーバー側での処理結果をクライアント側により柔軟に操作することができます
    • ajax_commandに登録されている関数が本家のページを参考してください
    • クライアント側の要素挿入、置換、削除、javascript実行などができます

処理結果をクライアント側に実行させるためカスタムajaxコマンドの作成

  • クライアント側でjQueryのセレクターで選択できる要素の操作にはajax_commandに登録された関数で行うことができます
  • 複雑なjascript実行、複数のセレクターなどの場合、カスタムajax_commandの作成が必要となります
    • クライアント側のjavascript関数を呼び出します
    • サーバーサイトの処理ロジックをクライアント側で行います

jQueryで登録さた関数をajax_command_invokeで呼び出します

  • クライアント側で事前にjQueryのjavascript関数を定義します
  • ajax_command_invokeで定義された関数を呼び出します
    ajax_command_invokeでカスタムajax関数の呼び出し

Drupal.ajaxネームスペースのプロトタイプに登録されたjavascript関数をajax_commandで呼び出します

  • Drupal.ajaネームスペースのプロトタイプを利用して、javascript関数を事前に登録します
  • ajax_command(登録済みの関数ではない)でjavascript関数を呼び出します
    ajax_commandに登録されていないjs関数の呼び出し
drupal
development
ajax

やりたいこと:Drupalのプログラムレベルで簡単にajaxを利用してクライアント側でデータ交信をしたいです

  • 環境:Drupal7.54
  • DrupalのFormAPIで簡単にajaxの実装ができます(Drupalのフォーム(FromAPI)でのajaxの実装 )
  • FormAPIだけではなく、Drupalをカスタマイズ時にいろいろなところでajaxを実装したいことがあります

ポイント1:Drupalでajaxに必要なライブラリをロードし、クライアント側にjquery.form.jsファイルをセット

  • サーバー側でdrupal.ajaxのライブラリをロードする必要があります
  • クライアント側にjquery.form.jsファイルを設置する必要があります
  • この処理はajax処理するページをロード時に行えれば良いです。
    • 例:hook_init()内で処理する
      /**
       * Implements hook_init().
       */
      function YOUR_MODULE_NAME_init()
      {
        drupal_add_js('misc/jquery.form.js');
        drupal_add_library('system','drupal.ajax');
      }
  • クライアント側のブラウザのプロパティでjquery.form.jsがセットされたことの確認ができます

ポイント2:クライアント側のajax起動リンク内にajax対応可否のパラメーター「nojs」とクラス属性「use-ajax」のセット

  • ajaxの起動リンクの作成基本パターン: 
    <a href="text/ajax/nojs/1234" class="use-ajax">ajaxリンク</a>
    • hrefにある「nojs」が決まりの文字
    • hrefにある「1234」はサーバー側に転送したい必要なパラメーター
    • class="use-ajax"はこのリンクがajax用に決める
  • クライアント側のjsで使用しているブラウザがajax対応可能かを判断して、ajax起動リンクに「nojs」のパラメーターを書き換え(利用可能:nojs⇒ajax)てサーバー側に転送
  • サーバー側がajax利用可否よりクライアント側にajax対応有無の結果を返します
    Drupalのajaxフレームワークの利用
  • 上記例のプログラムは以下のようで
    /**
     * Implements hook_init().
     */
    function test_module_init()
    {
      drupal_add_js('misc/jquery.form.js');
      drupal_add_library('system','drupal.ajax');
    }
    
    /**
     *  Implementation of hook_menu()
     */
    function test_module_menu() {
      $items['test/ajax/%/%']=array(     // URLの2,3番目がクライアント側で生成
          'page callback' => 'ajax_node_response',
          'page arguments' => array(2,3),   // URLの2,3番目の引数をコールバック関数に渡す
          'access callback' => 'user_access',
          'access arguments' => array('access content'),
          'type' => MENU_CALLBACK,
      );
      return $items;
    }
    
    function ajax_node_response($type="ajax", $nid=0){
      $node = node_load( $nid, NULL, false );
      $vnode = node_view($node);
      $output = theme('node', $vnode);
      if( $type="ajax" ){
        $commands=array();
        $commands[]=ajax_command_replace( '#block-system-main','<section id="block-system-main">'.$output.'</section>' ) ;
        $page = array(
          '#type' => 'ajax',
          '#commands' => $commands,
        );
        ajax_deliver( $page ) ;   // ajax対応ブラウザの結果
      } else {
        $output = '<div id="content">'.$output.'</div>';  // ajax非対応ブラウザの結果
        return $output;
      }
    }
    

ポイント3:クライアント側で実行させたい部分はajax_commandを使用します

  • クライアント側で処理結果をどこに入り替えはajax_command_replaceで指定します
  • 結果の挿入、入れ替え、削除、css処理などがいろいろあります。詳細は本家のajax_command一覧を参考してください

 

drupal
development
system_management
ajax

DrupalのFormAPIでフォーム内でAJAXを扱うのは基本です

  • DrupalのFormAPIがAJAXを実装しています
  • FormAPIでのAJAXの扱う:「Drupalのフォーム(FromAPI)でのajaxの実装」を参考してください
  • FormAPIでのAJAXでの扱う利点:
    • フォームを作成しているときに簡単にAJAXの実装が可能
    • AJAXの仕組みを知らなくても、手順通りに実装すればよいです
  • 大半のケースでFormAPIで解決できるので、AJAXをFormAPIで実装するのは一般的となります

FormAPI以外にAJAXの実装はDrupal.ajaxオブジェクトで行います

  • DrupalのAJAXのフレームワークは「misc/ajax.js」にあります
  • AJAXを実装する場合、このjsファイルを必ずインポートする必要があります
    drupal_add_js("/misc/ajax.js") ;  // ajaxのjsファイルをインポート
  • ここで、あるフォーム(text_form)のボタンを押してajaxを通じてサーバーとの交信を行う例とします
    Drupalのajaxの仕組みと扱い方法
  • フォームはDrupalのFormAPIで生成、または別の方法で生成します
    // 例: DrupalのAPIでフォームを作成
    //     送信ボタンを押して、"test message"の文字列でフォームを置換します
      $form['card_last']=array(
          "#type" => "markup",
          "#markup" => "",
          "#prefix" => "<div id='card-last-result-div'>",  // ajaxで置換したいエリア
          "#suffix" => "</div>",
      );
    
      $form['card_last']['submit'] = array(
          '#type' => 'submit',
          '#value' => '送信',
          '#attributes' => array( 'id'=>'test-form-submit' ),  // ajaxのIDを指定します
          "#ajax" => array(
            "callback" => "_ajax_callback_form",  // ajaxのコールバック
            'wrapper' => 'card-last-result-div',
            'method' => 'replace',
            'effect' => 'fade',
          ),
      );
    
    // カスタムJSファイルをフォームと一緒に添付
      $form['#attached']['js'] = array( "file_path/custom_ajax.js" );

DrupalのAJAXオブジェクトを生成してサーバーとの交信を用意します

  • 一つカスタムjsファイルを用意して(例:custom_ajax.js)、フォーム生成と同時にクライアント側に渡します
  • Drupal.ajaxオブジェクトを生成します
    (function($){
      Drupal.behaviors.custom_module_name={
        attach:function(cotext,settings){
          $("#test-form-submit").once("test-form-submit",function(){ //指定したフォームのみ
            var base = $(this).attr('id');  //フォームIDの使用
            var element_settings = {
              url: window.location.protocol + "//"+ window.location.hostname + settings.basePath + settings.pathPrefix + "system/ajax",
              event: 'click',
              progress: { type: 'throbber', },
            };
        // Drupalのajaxオブジェクトを生成します
            Drupal.ajax[base] = new Drupal.ajax(base, this, element_settings);
    
        // 送信ボタンにListenerを追加
            $("#test-form-submit").on( 'click',function(){
              $(this).click();  // ajaxを作動させます
            });
          });
        }
      };
    })(jQuery)
    
    • base(必須): ajaxの識別、ここでフォームID(test-form-submit)で指定
    • url(必須): サイトのパス/system/ajax
    • event: ajaxを作動させるイベントの指定
    • progress: ajaxでデータ交信中にロードの動画アイコンの表示
  • サーバーサイトでajaxに呼び出されるファンクションを用意します、"test message"をajaxに返還します
    function _ajax_callback_card_last_form($form, &$form_state){
      $commands[] = ajax_command_replace('#card-last-result-div', "test message"); 
      return array('#type' => 'ajax', '#commands' => $commands);
    }
  • ここで、ajax_commandを利用しなくても、ajax_deliverでメッセージの返還もできます
drupal
development
form

やりたいこと:Drupalのフォーム(FormAPI)でajaxを実装して各フォーム要素を動的に制御したいです

  • 環境:Drupal7.54
  • フォーム(FormAPI)で各要素の表示/非表示などの制御が簡単にできます(Drupalのフォーム(Form API)の「#states」で各フォーム要素の動作制御が可能)。
    • フォームを作成時にJavascriptを意識しなくてよい
    • 事前にフォームの要素を用意して表示/非表示のようなお動作制御
    • データ取得するなどの動作制御はできません
  • ajaxで高等な動作(データ取得など)制御ができるので、FormAPIもこれ基盤を用意して、簡単に実装できます。

FormAPIで「#ajax」の記述(ポイント:callback、wrapper)だけで良いのでJavascriptの意識必要はありません

  • FormAPIがajaxのインターフェースを用意しています。Form記述で「#ajax」要素を追加すれば、Javascriptなどのコーティングはいらないです
    • callbak:ajaxのリクエストが来た時に呼び出される関数
    • wrapper:ajaxのサーバー処理完了後に結果を画面に表示させる場所の指定
  • 簡単の例:テキスト入力フォームを生成して、入力したメッセージを画面のどこかに再表示させるajax処理
    FormAPIのajaxの実装方法
  • ajaxの記述はFormAPIの実装時に追加します。
    /**
     *  Implementation of hook_menu()
     *  新規フォームを表示するページのメニュー設定
     */
    function my_module_name_menu() {
      $items['test/form'] = array(
          'title' => 'Ajaxテスト',
          'page callback' => 'drupal_get_form',
          'page arguments' => array('my_sample_form'),
          'access arguments' => array('access content'),
      );
    }
    
    /**
     * フォームの各要素の記述
     */
    function my_sample_form($form, &$form_state){
      // メッセージ入力フィールド
      $form['message'] = array(
          '#type' => 'textfield',
          '#title' => t('メッセージを入力'),
      );
    
      // 入力されたメッセージをajaxで表示する場所
      $form['msg_wrapper'] = array(
          '#type' => 'markup',
          '#markup' => "",
          '#prefix' => '<div id="msg-wrapper">',
          '#suffix' => '</div>',
      );
    
      // サブミットボタン
      $form['submit'] = array(
          '#type' => 'submit',
          '#value' => '送信',
          '#ajax' => array(
              'callback' => 'test_sample_form_ajax_callback',
              'wrapper' => 'msg-wrapper',
              'effect' => 'fade',
          ),
      );
    
      return $form;
    }
    
    /**
     * ajaxに呼び出される関数
     */
    function test_sample_form_ajax_callback($form, $form_state) {
      // 入力されたメッセージを指定した場所にセット
      $form['msg_wrapper']['#markup'] = '入力されたメッセージ:' .
                  check_plain($form_state['values']['message']) ;
      // 置換する部品を返す
      return $form['msg_wrapper'] ;
    }

     
drupal
development
ajax

やりたいこと:Drupalのプログラムレベルで簡単にajaxを利用してクライアント側でデータ交信をしたいです

  • 環境:Drupal7.54
  • DrupalのFormAPIで簡単にajaxの実装ができます(Drupalのフォーム(FromAPI)でのajaxの実装 )
  • FormAPIだけではなく、Drupalをカスタマイズ時にいろいろなところでajaxを実装したいことがあります

ポイント1:Drupalでajaxに必要なライブラリをロードし、クライアント側にjquery.form.jsファイルをセット

  • サーバー側でdrupal.ajaxのライブラリをロードする必要があります
  • クライアント側にjquery.form.jsファイルを設置する必要があります
  • この処理はajax処理するページをロード時に行えれば良いです。
    • 例:hook_init()内で処理する
      /**
       * Implements hook_init().
       */
      function YOUR_MODULE_NAME_init()
      {
        drupal_add_js('misc/jquery.form.js');
        drupal_add_library('system','drupal.ajax');
      }
  • クライアント側のブラウザのプロパティでjquery.form.jsがセットされたことの確認ができます

ポイント2:クライアント側のajax起動リンク内にajax対応可否のパラメーター「nojs」とクラス属性「use-ajax」のセット

  • ajaxの起動リンクの作成基本パターン: 
    <a href="text/ajax/nojs/1234" class="use-ajax">ajaxリンク</a>
    • hrefにある「nojs」が決まりの文字
    • hrefにある「1234」はサーバー側に転送したい必要なパラメーター
    • class="use-ajax"はこのリンクがajax用に決める
  • クライアント側のjsで使用しているブラウザがajax対応可能かを判断して、ajax起動リンクに「nojs」のパラメーターを書き換え(利用可能:nojs⇒ajax)てサーバー側に転送
  • サーバー側がajax利用可否よりクライアント側にajax対応有無の結果を返します
    Drupalのajaxフレームワークの利用
  • 上記例のプログラムは以下のようで
    /**
     * Implements hook_init().
     */
    function test_module_init()
    {
      drupal_add_js('misc/jquery.form.js');
      drupal_add_library('system','drupal.ajax');
    }
    
    /**
     *  Implementation of hook_menu()
     */
    function test_module_menu() {
      $items['test/ajax/%/%']=array(     // URLの2,3番目がクライアント側で生成
          'page callback' => 'ajax_node_response',
          'page arguments' => array(2,3),   // URLの2,3番目の引数をコールバック関数に渡す
          'access callback' => 'user_access',
          'access arguments' => array('access content'),
          'type' => MENU_CALLBACK,
      );
      return $items;
    }
    
    function ajax_node_response($type="ajax", $nid=0){
      $node = node_load( $nid, NULL, false );
      $vnode = node_view($node);
      $output = theme('node', $vnode);
      if( $type="ajax" ){
        $commands=array();
        $commands[]=ajax_command_replace( '#block-system-main','<section id="block-system-main">'.$output.'</section>' ) ;
        $page = array(
          '#type' => 'ajax',
          '#commands' => $commands,
        );
        ajax_deliver( $page ) ;   // ajax対応ブラウザの結果
      } else {
        $output = '<div id="content">'.$output.'</div>';  // ajax非対応ブラウザの結果
        return $output;
      }
    }
    

ポイント3:クライアント側で実行させたい部分はajax_commandを使用します

  • クライアント側で処理結果をどこに入り替えはajax_command_replaceで指定します
  • 結果の挿入、入れ替え、削除、css処理などがいろいろあります。詳細は本家のajax_command一覧を参考してください

 

drupal
form
ajax

Drupalのajax_commandの基本:登録されているコマンド(例:ajax_command_invokeなど)でクライアント側に実行コマンドを送ります

  • 背景:Drupal7.54、コアーモジュールajaxの利用
  • Drupalのajax利用は別の記事を参考してください
    • Drupalでajaxのフレームワークが簡単に作成できる
    • Drupalのajaxの仕組みおよびプログラム上での扱う
  • サーバーサイトの処理結果をクライアント側に送る方法:
    • FormAPIに"#ajax"セットにある"wrapper"に指定されたエレメントに処理結果の置換 <-  'replaceWith', 'append', 'prepend', 'before', 'after', or 'html'
    • ajax_commadよりクライアント側の要素挿入、置換、削除などの操作ができます
  • ajax_commandがサーバー側での処理結果をクライアント側により柔軟に操作することができます
    • ajax_commandに登録されている関数が本家のページを参考してください
    • クライアント側の要素挿入、置換、削除、javascript実行などができます

処理結果をクライアント側に実行させるためカスタムajaxコマンドの作成

  • クライアント側でjQueryのセレクターで選択できる要素の操作にはajax_commandに登録された関数で行うことができます
  • 複雑なjascript実行、複数のセレクターなどの場合、カスタムajax_commandの作成が必要となります
    • クライアント側のjavascript関数を呼び出します
    • サーバーサイトの処理ロジックをクライアント側で行います

jQueryで登録さた関数をajax_command_invokeで呼び出します

  • クライアント側で事前にjQueryのjavascript関数を定義します
  • ajax_command_invokeで定義された関数を呼び出します
    ajax_command_invokeでカスタムajax関数の呼び出し

Drupal.ajaxネームスペースのプロトタイプに登録されたjavascript関数をajax_commandで呼び出します

  • Drupal.ajaネームスペースのプロトタイプを利用して、javascript関数を事前に登録します
  • ajax_command(登録済みの関数ではない)でjavascript関数を呼び出します
    ajax_commandに登録されていないjs関数の呼び出し
drupal
development
ajax

やりたいこと:Drupalのプログラムレベルで簡単にajaxを利用してクライアント側でデータ交信をしたいです

  • 環境:Drupal7.54
  • DrupalのFormAPIで簡単にajaxの実装ができます(Drupalのフォーム(FromAPI)でのajaxの実装 )
  • FormAPIだけではなく、Drupalをカスタマイズ時にいろいろなところでajaxを実装したいことがあります

ポイント1:Drupalでajaxに必要なライブラリをロードし、クライアント側にjquery.form.jsファイルをセット

  • サーバー側でdrupal.ajaxのライブラリをロードする必要があります
  • クライアント側にjquery.form.jsファイルを設置する必要があります
  • この処理はajax処理するページをロード時に行えれば良いです。
    • 例:hook_init()内で処理する
      /**
       * Implements hook_init().
       */
      function YOUR_MODULE_NAME_init()
      {
        drupal_add_js('misc/jquery.form.js');
        drupal_add_library('system','drupal.ajax');
      }
  • クライアント側のブラウザのプロパティでjquery.form.jsがセットされたことの確認ができます

ポイント2:クライアント側のajax起動リンク内にajax対応可否のパラメーター「nojs」とクラス属性「use-ajax」のセット

  • ajaxの起動リンクの作成基本パターン: 
    <a href="text/ajax/nojs/1234" class="use-ajax">ajaxリンク</a>
    • hrefにある「nojs」が決まりの文字
    • hrefにある「1234」はサーバー側に転送したい必要なパラメーター
    • class="use-ajax"はこのリンクがajax用に決める
  • クライアント側のjsで使用しているブラウザがajax対応可能かを判断して、ajax起動リンクに「nojs」のパラメーターを書き換え(利用可能:nojs⇒ajax)てサーバー側に転送
  • サーバー側がajax利用可否よりクライアント側にajax対応有無の結果を返します
    Drupalのajaxフレームワークの利用
  • 上記例のプログラムは以下のようで
    /**
     * Implements hook_init().
     */
    function test_module_init()
    {
      drupal_add_js('misc/jquery.form.js');
      drupal_add_library('system','drupal.ajax');
    }
    
    /**
     *  Implementation of hook_menu()
     */
    function test_module_menu() {
      $items['test/ajax/%/%']=array(     // URLの2,3番目がクライアント側で生成
          'page callback' => 'ajax_node_response',
          'page arguments' => array(2,3),   // URLの2,3番目の引数をコールバック関数に渡す
          'access callback' => 'user_access',
          'access arguments' => array('access content'),
          'type' => MENU_CALLBACK,
      );
      return $items;
    }
    
    function ajax_node_response($type="ajax", $nid=0){
      $node = node_load( $nid, NULL, false );
      $vnode = node_view($node);
      $output = theme('node', $vnode);
      if( $type="ajax" ){
        $commands=array();
        $commands[]=ajax_command_replace( '#block-system-main','<section id="block-system-main">'.$output.'</section>' ) ;
        $page = array(
          '#type' => 'ajax',
          '#commands' => $commands,
        );
        ajax_deliver( $page ) ;   // ajax対応ブラウザの結果
      } else {
        $output = '<div id="content">'.$output.'</div>';  // ajax非対応ブラウザの結果
        return $output;
      }
    }
    

ポイント3:クライアント側で実行させたい部分はajax_commandを使用します

  • クライアント側で処理結果をどこに入り替えはajax_command_replaceで指定します
  • 結果の挿入、入れ替え、削除、css処理などがいろいろあります。詳細は本家のajax_command一覧を参考してください

 

drupal
development
system_management
ajax

DrupalのFormAPIでフォーム内でAJAXを扱うのは基本です

  • DrupalのFormAPIがAJAXを実装しています
  • FormAPIでのAJAXの扱う:「Drupalのフォーム(FromAPI)でのajaxの実装」を参考してください
  • FormAPIでのAJAXでの扱う利点:
    • フォームを作成しているときに簡単にAJAXの実装が可能
    • AJAXの仕組みを知らなくても、手順通りに実装すればよいです
  • 大半のケースでFormAPIで解決できるので、AJAXをFormAPIで実装するのは一般的となります

FormAPI以外にAJAXの実装はDrupal.ajaxオブジェクトで行います

  • DrupalのAJAXのフレームワークは「misc/ajax.js」にあります
  • AJAXを実装する場合、このjsファイルを必ずインポートする必要があります
    drupal_add_js("/misc/ajax.js") ;  // ajaxのjsファイルをインポート
  • ここで、あるフォーム(text_form)のボタンを押してajaxを通じてサーバーとの交信を行う例とします
    Drupalのajaxの仕組みと扱い方法
  • フォームはDrupalのFormAPIで生成、または別の方法で生成します
    // 例: DrupalのAPIでフォームを作成
    //     送信ボタンを押して、"test message"の文字列でフォームを置換します
      $form['card_last']=array(
          "#type" => "markup",
          "#markup" => "",
          "#prefix" => "<div id='card-last-result-div'>",  // ajaxで置換したいエリア
          "#suffix" => "</div>",
      );
    
      $form['card_last']['submit'] = array(
          '#type' => 'submit',
          '#value' => '送信',
          '#attributes' => array( 'id'=>'test-form-submit' ),  // ajaxのIDを指定します
          "#ajax" => array(
            "callback" => "_ajax_callback_form",  // ajaxのコールバック
            'wrapper' => 'card-last-result-div',
            'method' => 'replace',
            'effect' => 'fade',
          ),
      );
    
    // カスタムJSファイルをフォームと一緒に添付
      $form['#attached']['js'] = array( "file_path/custom_ajax.js" );

DrupalのAJAXオブジェクトを生成してサーバーとの交信を用意します

  • 一つカスタムjsファイルを用意して(例:custom_ajax.js)、フォーム生成と同時にクライアント側に渡します
  • Drupal.ajaxオブジェクトを生成します
    (function($){
      Drupal.behaviors.custom_module_name={
        attach:function(cotext,settings){
          $("#test-form-submit").once("test-form-submit",function(){ //指定したフォームのみ
            var base = $(this).attr('id');  //フォームIDの使用
            var element_settings = {
              url: window.location.protocol + "//"+ window.location.hostname + settings.basePath + settings.pathPrefix + "system/ajax",
              event: 'click',
              progress: { type: 'throbber', },
            };
        // Drupalのajaxオブジェクトを生成します
            Drupal.ajax[base] = new Drupal.ajax(base, this, element_settings);
    
        // 送信ボタンにListenerを追加
            $("#test-form-submit").on( 'click',function(){
              $(this).click();  // ajaxを作動させます
            });
          });
        }
      };
    })(jQuery)
    
    • base(必須): ajaxの識別、ここでフォームID(test-form-submit)で指定
    • url(必須): サイトのパス/system/ajax
    • event: ajaxを作動させるイベントの指定
    • progress: ajaxでデータ交信中にロードの動画アイコンの表示
  • サーバーサイトでajaxに呼び出されるファンクションを用意します、"test message"をajaxに返還します
    function _ajax_callback_card_last_form($form, &$form_state){
      $commands[] = ajax_command_replace('#card-last-result-div', "test message"); 
      return array('#type' => 'ajax', '#commands' => $commands);
    }
  • ここで、ajax_commandを利用しなくても、ajax_deliverでメッセージの返還もできます
drupal
development
form

やりたいこと:Drupalのフォーム(FormAPI)でajaxを実装して各フォーム要素を動的に制御したいです

  • 環境:Drupal7.54
  • フォーム(FormAPI)で各要素の表示/非表示などの制御が簡単にできます(Drupalのフォーム(Form API)の「#states」で各フォーム要素の動作制御が可能)。
    • フォームを作成時にJavascriptを意識しなくてよい
    • 事前にフォームの要素を用意して表示/非表示のようなお動作制御
    • データ取得するなどの動作制御はできません
  • ajaxで高等な動作(データ取得など)制御ができるので、FormAPIもこれ基盤を用意して、簡単に実装できます。

FormAPIで「#ajax」の記述(ポイント:callback、wrapper)だけで良いのでJavascriptの意識必要はありません

  • FormAPIがajaxのインターフェースを用意しています。Form記述で「#ajax」要素を追加すれば、Javascriptなどのコーティングはいらないです
    • callbak:ajaxのリクエストが来た時に呼び出される関数
    • wrapper:ajaxのサーバー処理完了後に結果を画面に表示させる場所の指定
  • 簡単の例:テキスト入力フォームを生成して、入力したメッセージを画面のどこかに再表示させるajax処理
    FormAPIのajaxの実装方法
  • ajaxの記述はFormAPIの実装時に追加します。
    /**
     *  Implementation of hook_menu()
     *  新規フォームを表示するページのメニュー設定
     */
    function my_module_name_menu() {
      $items['test/form'] = array(
          'title' => 'Ajaxテスト',
          'page callback' => 'drupal_get_form',
          'page arguments' => array('my_sample_form'),
          'access arguments' => array('access content'),
      );
    }
    
    /**
     * フォームの各要素の記述
     */
    function my_sample_form($form, &$form_state){
      // メッセージ入力フィールド
      $form['message'] = array(
          '#type' => 'textfield',
          '#title' => t('メッセージを入力'),
      );
    
      // 入力されたメッセージをajaxで表示する場所
      $form['msg_wrapper'] = array(
          '#type' => 'markup',
          '#markup' => "",
          '#prefix' => '<div id="msg-wrapper">',
          '#suffix' => '</div>',
      );
    
      // サブミットボタン
      $form['submit'] = array(
          '#type' => 'submit',
          '#value' => '送信',
          '#ajax' => array(
              'callback' => 'test_sample_form_ajax_callback',
              'wrapper' => 'msg-wrapper',
              'effect' => 'fade',
          ),
      );
    
      return $form;
    }
    
    /**
     * ajaxに呼び出される関数
     */
    function test_sample_form_ajax_callback($form, $form_state) {
      // 入力されたメッセージを指定した場所にセット
      $form['msg_wrapper']['#markup'] = '入力されたメッセージ:' .
                  check_plain($form_state['values']['message']) ;
      // 置換する部品を返す
      return $form['msg_wrapper'] ;
    }

     
drupal
development
ajax

やりたいこと:Drupalのプログラムレベルで簡単にajaxを利用してクライアント側でデータ交信をしたいです

  • 環境:Drupal7.54
  • DrupalのFormAPIで簡単にajaxの実装ができます(Drupalのフォーム(FromAPI)でのajaxの実装 )
  • FormAPIだけではなく、Drupalをカスタマイズ時にいろいろなところでajaxを実装したいことがあります

ポイント1:Drupalでajaxに必要なライブラリをロードし、クライアント側にjquery.form.jsファイルをセット

  • サーバー側でdrupal.ajaxのライブラリをロードする必要があります
  • クライアント側にjquery.form.jsファイルを設置する必要があります
  • この処理はajax処理するページをロード時に行えれば良いです。
    • 例:hook_init()内で処理する
      /**
       * Implements hook_init().
       */
      function YOUR_MODULE_NAME_init()
      {
        drupal_add_js('misc/jquery.form.js');
        drupal_add_library('system','drupal.ajax');
      }
  • クライアント側のブラウザのプロパティでjquery.form.jsがセットされたことの確認ができます

ポイント2:クライアント側のajax起動リンク内にajax対応可否のパラメーター「nojs」とクラス属性「use-ajax」のセット

  • ajaxの起動リンクの作成基本パターン: 
    <a href="text/ajax/nojs/1234" class="use-ajax">ajaxリンク</a>
    • hrefにある「nojs」が決まりの文字
    • hrefにある「1234」はサーバー側に転送したい必要なパラメーター
    • class="use-ajax"はこのリンクがajax用に決める
  • クライアント側のjsで使用しているブラウザがajax対応可能かを判断して、ajax起動リンクに「nojs」のパラメーターを書き換え(利用可能:nojs⇒ajax)てサーバー側に転送
  • サーバー側がajax利用可否よりクライアント側にajax対応有無の結果を返します
    Drupalのajaxフレームワークの利用
  • 上記例のプログラムは以下のようで
    /**
     * Implements hook_init().
     */
    function test_module_init()
    {
      drupal_add_js('misc/jquery.form.js');
      drupal_add_library('system','drupal.ajax');
    }
    
    /**
     *  Implementation of hook_menu()
     */
    function test_module_menu() {
      $items['test/ajax/%/%']=array(     // URLの2,3番目がクライアント側で生成
          'page callback' => 'ajax_node_response',
          'page arguments' => array(2,3),   // URLの2,3番目の引数をコールバック関数に渡す
          'access callback' => 'user_access',
          'access arguments' => array('access content'),
          'type' => MENU_CALLBACK,
      );
      return $items;
    }
    
    function ajax_node_response($type="ajax", $nid=0){
      $node = node_load( $nid, NULL, false );
      $vnode = node_view($node);
      $output = theme('node', $vnode);
      if( $type="ajax" ){
        $commands=array();
        $commands[]=ajax_command_replace( '#block-system-main','<section id="block-system-main">'.$output.'</section>' ) ;
        $page = array(
          '#type' => 'ajax',
          '#commands' => $commands,
        );
        ajax_deliver( $page ) ;   // ajax対応ブラウザの結果
      } else {
        $output = '<div id="content">'.$output.'</div>';  // ajax非対応ブラウザの結果
        return $output;
      }
    }
    

ポイント3:クライアント側で実行させたい部分はajax_commandを使用します

  • クライアント側で処理結果をどこに入り替えはajax_command_replaceで指定します
  • 結果の挿入、入れ替え、削除、css処理などがいろいろあります。詳細は本家のajax_command一覧を参考してください

 

drupal
form
ajax

Drupalのajax_commandの基本:登録されているコマンド(例:ajax_command_invokeなど)でクライアント側に実行コマンドを送ります

  • 背景:Drupal7.54、コアーモジュールajaxの利用
  • Drupalのajax利用は別の記事を参考してください
    • Drupalでajaxのフレームワークが簡単に作成できる
    • Drupalのajaxの仕組みおよびプログラム上での扱う
  • サーバーサイトの処理結果をクライアント側に送る方法:
    • FormAPIに"#ajax"セットにある"wrapper"に指定されたエレメントに処理結果の置換 <-  'replaceWith', 'append', 'prepend', 'before', 'after', or 'html'
    • ajax_commadよりクライアント側の要素挿入、置換、削除などの操作ができます
  • ajax_commandがサーバー側での処理結果をクライアント側により柔軟に操作することができます
    • ajax_commandに登録されている関数が本家のページを参考してください
    • クライアント側の要素挿入、置換、削除、javascript実行などができます

処理結果をクライアント側に実行させるためカスタムajaxコマンドの作成

  • クライアント側でjQueryのセレクターで選択できる要素の操作にはajax_commandに登録された関数で行うことができます
  • 複雑なjascript実行、複数のセレクターなどの場合、カスタムajax_commandの作成が必要となります
    • クライアント側のjavascript関数を呼び出します
    • サーバーサイトの処理ロジックをクライアント側で行います

jQueryで登録さた関数をajax_command_invokeで呼び出します

  • クライアント側で事前にjQueryのjavascript関数を定義します
  • ajax_command_invokeで定義された関数を呼び出します
    ajax_command_invokeでカスタムajax関数の呼び出し

Drupal.ajaxネームスペースのプロトタイプに登録されたjavascript関数をajax_commandで呼び出します

  • Drupal.ajaネームスペースのプロトタイプを利用して、javascript関数を事前に登録します
  • ajax_command(登録済みの関数ではない)でjavascript関数を呼び出します
    ajax_commandに登録されていないjs関数の呼び出し
drupal
development
ajax

やりたいこと:Drupalのプログラムレベルで簡単にajaxを利用してクライアント側でデータ交信をしたいです

  • 環境:Drupal7.54
  • DrupalのFormAPIで簡単にajaxの実装ができます(Drupalのフォーム(FromAPI)でのajaxの実装 )
  • FormAPIだけではなく、Drupalをカスタマイズ時にいろいろなところでajaxを実装したいことがあります

ポイント1:Drupalでajaxに必要なライブラリをロードし、クライアント側にjquery.form.jsファイルをセット

  • サーバー側でdrupal.ajaxのライブラリをロードする必要があります
  • クライアント側にjquery.form.jsファイルを設置する必要があります
  • この処理はajax処理するページをロード時に行えれば良いです。
    • 例:hook_init()内で処理する
      /**
       * Implements hook_init().
       */
      function YOUR_MODULE_NAME_init()
      {
        drupal_add_js('misc/jquery.form.js');
        drupal_add_library('system','drupal.ajax');
      }
  • クライアント側のブラウザのプロパティでjquery.form.jsがセットされたことの確認ができます

ポイント2:クライアント側のajax起動リンク内にajax対応可否のパラメーター「nojs」とクラス属性「use-ajax」のセット

  • ajaxの起動リンクの作成基本パターン: 
    <a href="text/ajax/nojs/1234" class="use-ajax">ajaxリンク</a>
    • hrefにある「nojs」が決まりの文字
    • hrefにある「1234」はサーバー側に転送したい必要なパラメーター
    • class="use-ajax"はこのリンクがajax用に決める
  • クライアント側のjsで使用しているブラウザがajax対応可能かを判断して、ajax起動リンクに「nojs」のパラメーターを書き換え(利用可能:nojs⇒ajax)てサーバー側に転送
  • サーバー側がajax利用可否よりクライアント側にajax対応有無の結果を返します
    Drupalのajaxフレームワークの利用
  • 上記例のプログラムは以下のようで
    /**
     * Implements hook_init().
     */
    function test_module_init()
    {
      drupal_add_js('misc/jquery.form.js');
      drupal_add_library('system','drupal.ajax');
    }
    
    /**
     *  Implementation of hook_menu()
     */
    function test_module_menu() {
      $items['test/ajax/%/%']=array(     // URLの2,3番目がクライアント側で生成
          'page callback' => 'ajax_node_response',
          'page arguments' => array(2,3),   // URLの2,3番目の引数をコールバック関数に渡す
          'access callback' => 'user_access',
          'access arguments' => array('access content'),
          'type' => MENU_CALLBACK,
      );
      return $items;
    }
    
    function ajax_node_response($type="ajax", $nid=0){
      $node = node_load( $nid, NULL, false );
      $vnode = node_view($node);
      $output = theme('node', $vnode);
      if( $type="ajax" ){
        $commands=array();
        $commands[]=ajax_command_replace( '#block-system-main','<section id="block-system-main">'.$output.'</section>' ) ;
        $page = array(
          '#type' => 'ajax',
          '#commands' => $commands,
        );
        ajax_deliver( $page ) ;   // ajax対応ブラウザの結果
      } else {
        $output = '<div id="content">'.$output.'</div>';  // ajax非対応ブラウザの結果
        return $output;
      }
    }
    

ポイント3:クライアント側で実行させたい部分はajax_commandを使用します

  • クライアント側で処理結果をどこに入り替えはajax_command_replaceで指定します
  • 結果の挿入、入れ替え、削除、css処理などがいろいろあります。詳細は本家のajax_command一覧を参考してください

 

drupal
development
system_management
ajax

DrupalのFormAPIでフォーム内でAJAXを扱うのは基本です

  • DrupalのFormAPIがAJAXを実装しています
  • FormAPIでのAJAXの扱う:「Drupalのフォーム(FromAPI)でのajaxの実装」を参考してください
  • FormAPIでのAJAXでの扱う利点:
    • フォームを作成しているときに簡単にAJAXの実装が可能
    • AJAXの仕組みを知らなくても、手順通りに実装すればよいです
  • 大半のケースでFormAPIで解決できるので、AJAXをFormAPIで実装するのは一般的となります

FormAPI以外にAJAXの実装はDrupal.ajaxオブジェクトで行います

  • DrupalのAJAXのフレームワークは「misc/ajax.js」にあります
  • AJAXを実装する場合、このjsファイルを必ずインポートする必要があります
    drupal_add_js("/misc/ajax.js") ;  // ajaxのjsファイルをインポート
  • ここで、あるフォーム(text_form)のボタンを押してajaxを通じてサーバーとの交信を行う例とします
    Drupalのajaxの仕組みと扱い方法
  • フォームはDrupalのFormAPIで生成、または別の方法で生成します
    // 例: DrupalのAPIでフォームを作成
    //     送信ボタンを押して、"test message"の文字列でフォームを置換します
      $form['card_last']=array(
          "#type" => "markup",
          "#markup" => "",
          "#prefix" => "<div id='card-last-result-div'>",  // ajaxで置換したいエリア
          "#suffix" => "</div>",
      );
    
      $form['card_last']['submit'] = array(
          '#type' => 'submit',
          '#value' => '送信',
          '#attributes' => array( 'id'=>'test-form-submit' ),  // ajaxのIDを指定します
          "#ajax" => array(
            "callback" => "_ajax_callback_form",  // ajaxのコールバック
            'wrapper' => 'card-last-result-div',
            'method' => 'replace',
            'effect' => 'fade',
          ),
      );
    
    // カスタムJSファイルをフォームと一緒に添付
      $form['#attached']['js'] = array( "file_path/custom_ajax.js" );

DrupalのAJAXオブジェクトを生成してサーバーとの交信を用意します

  • 一つカスタムjsファイルを用意して(例:custom_ajax.js)、フォーム生成と同時にクライアント側に渡します
  • Drupal.ajaxオブジェクトを生成します
    (function($){
      Drupal.behaviors.custom_module_name={
        attach:function(cotext,settings){
          $("#test-form-submit").once("test-form-submit",function(){ //指定したフォームのみ
            var base = $(this).attr('id');  //フォームIDの使用
            var element_settings = {
              url: window.location.protocol + "//"+ window.location.hostname + settings.basePath + settings.pathPrefix + "system/ajax",
              event: 'click',
              progress: { type: 'throbber', },
            };
        // Drupalのajaxオブジェクトを生成します
            Drupal.ajax[base] = new Drupal.ajax(base, this, element_settings);
    
        // 送信ボタンにListenerを追加
            $("#test-form-submit").on( 'click',function(){
              $(this).click();  // ajaxを作動させます
            });
          });
        }
      };
    })(jQuery)
    
    • base(必須): ajaxの識別、ここでフォームID(test-form-submit)で指定
    • url(必須): サイトのパス/system/ajax
    • event: ajaxを作動させるイベントの指定
    • progress: ajaxでデータ交信中にロードの動画アイコンの表示
  • サーバーサイトでajaxに呼び出されるファンクションを用意します、"test message"をajaxに返還します
    function _ajax_callback_card_last_form($form, &$form_state){
      $commands[] = ajax_command_replace('#card-last-result-div', "test message"); 
      return array('#type' => 'ajax', '#commands' => $commands);
    }
  • ここで、ajax_commandを利用しなくても、ajax_deliverでメッセージの返還もできます
drupal
ctools
form

Drupalでダイナミックフォーム作成方法:Ctoolsのdependent/FromAPIのstates/FormAPIのajaxがあります

  • Drupalでダイナミックフォーム作成するには大体3っつの方法があります

    • Ctoolsのdependent: Drupalのダイナミックフォーム1:モジュール(Ctools)のDependent Systemよりエレメントの表示/非表示
    • FormAPIのstates:Drupalのダイナミックフォーム2:FormAPIのStatesプロパティよりエレメントの表示/非表示などの処理
    • FormAPIのajax:Drupalのajaxの仕組みおよびプログラム上での扱う
  • この三つの方法の中にCtoolsのdependentの利用はお勧めはしません

制御条件が単純的の場合にFormAPIのstatesを利用すべきです

  • 制御条件は単純的な、条件数は少ない場合はFormAPIのstatesを利用すべき
    • 例:ラジオボタン/チェックボックスが選択されたかどうか
  • 制御される要素の表示/非表示など単純の場合はFormAPIのstatesを利用すべき
  • 上記条件では、Ctoolsのdependentを利用する結果は同じですが、Ctoolsのdependentの設定に特殊性があり、利用しないほうが良いでしょう
  • また、CtoolsのdependentよりFormAPIのstatesのほうが定義ルール、コーティングルール、柔軟性などが優れています

サーバーでデータやり取り必要な場合にFormAPIのajaxを利用します

  • 制御条件は複雑、データの検索が必要などの場合にFormAPIのajaxを利用するしかないです
    • 例:キーワードの検索より、そのキーワードの編集フォームを開くなど
    • サーバーへのデータ保存、保存後に詳細のデータを表示します
  • この場合に、FormAPIのstates/Ctoolsのdependentが実現できないです
drupal
video
form

DrupalのFormAPIの"#states"プロパティの設定でダイナミックフォーム要素を制御します

  • Drupalのフォームに関する開発/カスタマイズの場合に、FormAPIがほぼ必須になる状態です
  • FormAPIにある様々のプロパティに"#states"が初心者にあまり気づかないかもしれないですが、ダイナミックフォームの要素制御に使用されます
  • 基本として、制御要素と制御される要素となります
    • 制御要素は:入力系要素(チェックボックス/ラジオボタン/セレクトボックス/テキストフィールドなど)
    • 制御される要素は:任意の要素の表示/非表示/有効化/無効化/Collapseなどの制御
  • "#states"プロパティの定義に、制御要素の識別はjQueryのセレクター(:input)が利用されています
    // "#"states" 定義の基本
    "#"states" => array(
      'visible' => array(
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        ...
      ),
    )
    
    // 例:チェックボックスがチェックされたときに要素が表示される
    "#"states" => array(
        'visible' => array(
            ':input[name="remote_checkbox"]' => array('checked' => TRUE),
        ),
    )

    FormAPIのstatesプロパティの使用

  • 今回のカスタムモジュール(formapi_states_example)は、前回のCtoolsのdependentの使用と同じようなフォーム要素を作成しました

制御要素の動き(empty/filled/chechedなど)を利用します

  • 制御要素がラジオボタン/チェックボックス/セレクトボックスがよく利用されますが、テキストフィールドなども利用することができます
        $form['select_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
        );
    
        $form['select_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'select',
            '#options' => array (
                'none'=>t('Select one'),
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
                'uncollapse'=>t('次の要素を開く'),
            ),
            '#default_value' => array('none'),
    
        );
        $form['select_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
            '#states' => array(
                // セレクトが「旅行」の場合にこのエレメントが表示される
                'visible' => array(':input[id="edit-restrict-by"]' => array('value'=>'trip')),
    
            ),
        );
        $form['select_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            '#states' => array(
                // セレクトが「カレンダー」の場合にこのエレメントが表示される
                'visible' => array(':input[name="restrict_by"]' => array('value'=>'month')),
            ),
        );
  • 使用可能な要素のプロパティ:
    • empty
    • filled
    • checked
    • unchecked
    • expanded
    • collapsed
    • value

制御される要素の動き(enabled/disabled/visible/invisibleなど)を定義することができます

  • 制御される要素の動きは表示/非表示がよく利用されます
  • ほかに様々の動き(collapse/extendedなど)の制御は可能です
     // フィールドセットの畳む/開く制御例
        $form['radio_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
            '#collapsible' => TRUE,
            '#collapsed' => TRUE,
            '#states' => array(
                'expanded' => array(':input[name="restrict_by"]' => array('value'=>'uncollapse')),
            ),
        );
    
  • 制御される要素の動き一覧は
    • enabled
    • disabled
    • required
    • optional
    • visible
    • invisible
    • checked
    • unchecked
    • expanded
    • collapsed

複数の制御条件(AND/OR)の設定が可能

  • 制御条件は複数にすることができます
  • 制御条件はANDの場合に以下のような構文
    // 二つのAND制御条件に
    array(
      'visible' => array(
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        ...
      ),
    )
    
    // 例:ニッカ所にチェックされた場合、要素が表示される
        $form['Checkbox_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Checkbox Set'),
            '#states' => array(
                'visible' => array(
                    ':input[name="radio_restrict_by"]' => array('value' => 'enable_next'),
                    ':input[id="edit-restrict-by"]' => array('value'=>'uncollapse')
                ),
            ),
        );
  • 制御条件はORの場合に以下のような構文
    // ORの複数条件で表示/非表示制御
    array(
      'visible' => array(
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        ...
      ),
      'visible' => array(
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        ...
      ),
    )
    
     // 例:ニッカ所のところに、一か所がチェックされたら、要素が表示される
        $form['Checkbox_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Checkbox Set'),
            '#states' => array(
                'visible' => array(
                    ':input[name="radio_restrict_by"]' => array('value' => 'enable_next'),
                ),
                'visible' => array(
                    ':input[id="edit-restrict-by"]' => array('value'=>'uncollapse')
                ),
            ),
        );

結論・感想:FormAPIの"#states"プロパティ制御条件の設定は分かりやすく、統一性があり、柔軟性が高いものです

  • 要素のプロパティ"#states"の定義/コーティングルールは比較的にシンプルで、わかりやすいです
  • 要素特、定などにはjQueryのセレクター(:input)が利用しているので、コーティングルールの統一感があります
  • 要素の動き制御は表示/非表示だけではなく、有効/無効/折りたたむなども制御可能で、より柔軟性があります
添付 サイズ
formapi_states_test.zip (1.45 KB) 1.45 KB
Embedded thumbnail for Drupalのダイナミックフォーム2:FormAPIのStatesプロパティよりエレメントの表示/非表示などの処理
drupal
ctools
form

Drupalのモジュール(Ctools)がAPIモジュールであり、幅広く使用されている

  • Drupalのモジュール(Ctools)がAPIモジュールなので、直接に利用するのではなく、いろいろなモジュールに使用されています
    • 例:Views、PanelsなどがCtoolsを利用しています
  • 主な機能は以下のようです(Drupalの中核な存在です)
    • Plugins
    • Exportables
    • AJAX responder
    • Form tools
    • Object caching
    • Contexts
    • Modal dialog
    • Dependent
    • Content
    • Form wizard
    • CSS tools

CtoolsのDependent(依存)がフォーム要素を表示/非表示されるダイナミックな変化に使用されます

  • ダイナミックフォーム: フォーム要素がある条件で表示、非表示を行います
    • 例:セレクトボックス:カレンダー、旅行 二つあります
    • 別の要素(例:セレクト/ラジオボタン/チェックボックス)で上記要素(カレンダー/旅行)の表示/非表示を制御します(ビデオを参考)CtoolsのDependent Systemでフォーム要素の表示/非表示を制御する
  • CtoolsがFormAPIにプロパティ("#dependency")をプラグインしています
        // 1. Include CTools Dependent helper
        ctools_include('dependent');
    
        $form['select_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
        );
    
        $form['select_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'select',
            '#options' => array (
                'none'=>t('Select one'),
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
            ),
            '#default_value' => array('none'),
    
        );
        $form['select_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
            // セレクトが「旅行」の場合にこのエレメントが表示される
            '#dependency' => array('edit-restrict-by' => array('trip')),
        );
        $form['select_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            // セレクトが「カレンダー」の場合にこのエレメントが表示される
            '#dependency' => array('edit-restrict-by' => array('month')),
        );
    
    • フォームの構成はDrupalのFormAPIに従っています
    • 制御される要素は"#dependency"プロパティで記述されています

Ctoolsの"#depencency"の要素識別方法にラジオボタンが特別に扱われています

  • 制御要素が先に定義します(例:セレクトボックス:(restrict_by)
  • 制御される要素が二つ:trip、month セレクトボックス
  • 制御される要素の"#dependency"設定より制御要素の状態で要素の表示/非表示がjavascriptで操作されます
  • "#dependency"の定義は配列で行います
    ”#dependency” => array( "依存先要素のID" => "依存先要素の状態" )
    • 例:依存先は「セレクトボックス」(restrict_by)とします
    • 依存先(restrict_by)のid(htmlソースにある要素id):edit-restrict-by
    • 依存先の状態: none/trip/month 三種類です。
    • trip、またはmonthが選ばれたら、旅行、またはカレンダーのセレクトボックスを表示させる(選ばれなかったら、表示させない)
  • 但し、制御要素がラジオボタン("radios")の場合に"依存先要素のID"書き方が変わります
    '#dependency' => array('radio:restrict_by' => array('trip')),
    // radio: 決まり文言
    // restrict_by: 要素ID
    • 特に、ラジオボタンの要素IDはhtml上の要素IDではありません。FormAPIで定義する要素のIDです
  • "依存先要素の状態"は要素の性質より変わります
    • ラジオボタン: FormAPIの"radios"での"#opetions"に選択された要素のキー:none/trip/month の一つ
      '#dependency' => array('edit-restrict-by' => array('month')),
    • セレクトボックス: FormAPIの"select"での"#opetions"に選択された要素のキー:none/trip/month の一つ
      '#dependency' => array('edit-restrict-by' => array('trip')),
    • チェックボックス: html上に各チェックボックスIDごとに、チェックされた(true:1)かチェックされていない(false:0)の一つ
      '#dependency' => array('edit-restrict-by-month--2' => array(true)),
  • 今回テスト(セレクトボックス/チェックボックス/ラジオボタン)したソースは以下のとなります
    function example_page($form, &$form_state){
    
        // 1. Include CTools Dependent helper
        ctools_include('dependent');
    
        $form['select_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
        );
    
        $form['select_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'select',
            '#options' => array (
                'none'=>t('Select one'),
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
            ),
            '#default_value' => array('none'),
    
        );
        $form['select_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
            // セレクトが「旅行」の場合にこのエレメントが表示される
            '#dependency' => array('edit-restrict-by' => array('trip')),
        );
        $form['select_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            // セレクトが「カレンダー」の場合にこのエレメントが表示される
            '#dependency' => array('edit-restrict-by' => array('month')),
        );
    
    
        $form['radio_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
        );
        $form['radio_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'radios',
            '#options' => array (
                'none'=>t('Select one'),
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
            ),
            '#default_value' => 'none',
    
        );
        $form['radio_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
            '#dependency' => array('radio:restrict_by' => array('trip')),
        );
    
        $form['radio_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            '#dependency' => array('radio:restrict_by' => array('month')),
        );
        $form['Checkbox_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Checkbox Set'),
        );
    
        $form['Checkbox_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'checkboxes',
            '#options' => array (
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
            ),
    
        );
    
        $form['Checkbox_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
    
            // チェックボックスのIDが変わったので注意が必要
            '#dependency' => array('edit-restrict-by-trip--2' => array(true)),
        );
    
        $form['Checkbox_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            '#dependency' => array('edit-restrict-by-month--2' => array(true)),
        );
    
    
        return $form;
    }
    

Ctoolsの依存(dependent)が表示/非表示制御のみ、FormAPIのstatesより制御範囲が狭いです

  • FormAPIに"#dependency"プロパティをプラグインは、表示/非表示のみとなります
  • FormAPIのstatesプロパティの制御と比較すると、制御できる範囲は狭いです
    • FormAPIのstatesプロパティは、表示/非表示/collapse/extended/enabled/disabledなどの制御ができます

感想と結論:Ctoolsの依存(dependent)の設定、コーティングルールに統一性が足りなく、わかりずらいです

  • 依存性の設定定義にラジオボタンの特別扱いを認識しなければならない(最初は戸惑いがあるだろう)
  • これらの特別なコーティングルールを覚える必要があります
  • 要素特定にはjQueryを利用していない
  • 比較してみると、FormAPIの”#states”プロパティの使用で、より統一性があり、柔軟性のダイナミックフォーム作成ができます
添付 サイズ
ctools_dependent_test.zip (1.4 KB) 1.4 KB
Embedded thumbnail for Drupalのダイナミックフォーム1:モジュール(Ctools)のDependent Systemよりエレメントの表示/非表示
drupal
video
form

DrupalのFormAPIの"#states"プロパティの設定でダイナミックフォーム要素を制御します

  • Drupalのフォームに関する開発/カスタマイズの場合に、FormAPIがほぼ必須になる状態です
  • FormAPIにある様々のプロパティに"#states"が初心者にあまり気づかないかもしれないですが、ダイナミックフォームの要素制御に使用されます
  • 基本として、制御要素と制御される要素となります
    • 制御要素は:入力系要素(チェックボックス/ラジオボタン/セレクトボックス/テキストフィールドなど)
    • 制御される要素は:任意の要素の表示/非表示/有効化/無効化/Collapseなどの制御
  • "#states"プロパティの定義に、制御要素の識別はjQueryのセレクター(:input)が利用されています
    // "#"states" 定義の基本
    "#"states" => array(
      'visible' => array(
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        ...
      ),
    )
    
    // 例:チェックボックスがチェックされたときに要素が表示される
    "#"states" => array(
        'visible' => array(
            ':input[name="remote_checkbox"]' => array('checked' => TRUE),
        ),
    )

    FormAPIのstatesプロパティの使用

  • 今回のカスタムモジュール(formapi_states_example)は、前回のCtoolsのdependentの使用と同じようなフォーム要素を作成しました

制御要素の動き(empty/filled/chechedなど)を利用します

  • 制御要素がラジオボタン/チェックボックス/セレクトボックスがよく利用されますが、テキストフィールドなども利用することができます
        $form['select_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
        );
    
        $form['select_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'select',
            '#options' => array (
                'none'=>t('Select one'),
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
                'uncollapse'=>t('次の要素を開く'),
            ),
            '#default_value' => array('none'),
    
        );
        $form['select_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
            '#states' => array(
                // セレクトが「旅行」の場合にこのエレメントが表示される
                'visible' => array(':input[id="edit-restrict-by"]' => array('value'=>'trip')),
    
            ),
        );
        $form['select_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            '#states' => array(
                // セレクトが「カレンダー」の場合にこのエレメントが表示される
                'visible' => array(':input[name="restrict_by"]' => array('value'=>'month')),
            ),
        );
  • 使用可能な要素のプロパティ:
    • empty
    • filled
    • checked
    • unchecked
    • expanded
    • collapsed
    • value

制御される要素の動き(enabled/disabled/visible/invisibleなど)を定義することができます

  • 制御される要素の動きは表示/非表示がよく利用されます
  • ほかに様々の動き(collapse/extendedなど)の制御は可能です
     // フィールドセットの畳む/開く制御例
        $form['radio_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
            '#collapsible' => TRUE,
            '#collapsed' => TRUE,
            '#states' => array(
                'expanded' => array(':input[name="restrict_by"]' => array('value'=>'uncollapse')),
            ),
        );
    
  • 制御される要素の動き一覧は
    • enabled
    • disabled
    • required
    • optional
    • visible
    • invisible
    • checked
    • unchecked
    • expanded
    • collapsed

複数の制御条件(AND/OR)の設定が可能

  • 制御条件は複数にすることができます
  • 制御条件はANDの場合に以下のような構文
    // 二つのAND制御条件に
    array(
      'visible' => array(
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        ...
      ),
    )
    
    // 例:ニッカ所にチェックされた場合、要素が表示される
        $form['Checkbox_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Checkbox Set'),
            '#states' => array(
                'visible' => array(
                    ':input[name="radio_restrict_by"]' => array('value' => 'enable_next'),
                    ':input[id="edit-restrict-by"]' => array('value'=>'uncollapse')
                ),
            ),
        );
  • 制御条件はORの場合に以下のような構文
    // ORの複数条件で表示/非表示制御
    array(
      'visible' => array(
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        ...
      ),
      'visible' => array(
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        ...
      ),
    )
    
     // 例:ニッカ所のところに、一か所がチェックされたら、要素が表示される
        $form['Checkbox_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Checkbox Set'),
            '#states' => array(
                'visible' => array(
                    ':input[name="radio_restrict_by"]' => array('value' => 'enable_next'),
                ),
                'visible' => array(
                    ':input[id="edit-restrict-by"]' => array('value'=>'uncollapse')
                ),
            ),
        );

結論・感想:FormAPIの"#states"プロパティ制御条件の設定は分かりやすく、統一性があり、柔軟性が高いものです

  • 要素のプロパティ"#states"の定義/コーティングルールは比較的にシンプルで、わかりやすいです
  • 要素特、定などにはjQueryのセレクター(:input)が利用しているので、コーティングルールの統一感があります
  • 要素の動き制御は表示/非表示だけではなく、有効/無効/折りたたむなども制御可能で、より柔軟性があります
添付 サイズ
formapi_states_test.zip (1.45 KB) 1.45 KB
Embedded thumbnail for Drupalのダイナミックフォーム2:FormAPIのStatesプロパティよりエレメントの表示/非表示などの処理
drupal
ctools
form

Drupalのモジュール(Ctools)がAPIモジュールであり、幅広く使用されている

  • Drupalのモジュール(Ctools)がAPIモジュールなので、直接に利用するのではなく、いろいろなモジュールに使用されています
    • 例:Views、PanelsなどがCtoolsを利用しています
  • 主な機能は以下のようです(Drupalの中核な存在です)
    • Plugins
    • Exportables
    • AJAX responder
    • Form tools
    • Object caching
    • Contexts
    • Modal dialog
    • Dependent
    • Content
    • Form wizard
    • CSS tools

CtoolsのDependent(依存)がフォーム要素を表示/非表示されるダイナミックな変化に使用されます

  • ダイナミックフォーム: フォーム要素がある条件で表示、非表示を行います
    • 例:セレクトボックス:カレンダー、旅行 二つあります
    • 別の要素(例:セレクト/ラジオボタン/チェックボックス)で上記要素(カレンダー/旅行)の表示/非表示を制御します(ビデオを参考)CtoolsのDependent Systemでフォーム要素の表示/非表示を制御する
  • CtoolsがFormAPIにプロパティ("#dependency")をプラグインしています
        // 1. Include CTools Dependent helper
        ctools_include('dependent');
    
        $form['select_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
        );
    
        $form['select_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'select',
            '#options' => array (
                'none'=>t('Select one'),
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
            ),
            '#default_value' => array('none'),
    
        );
        $form['select_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
            // セレクトが「旅行」の場合にこのエレメントが表示される
            '#dependency' => array('edit-restrict-by' => array('trip')),
        );
        $form['select_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            // セレクトが「カレンダー」の場合にこのエレメントが表示される
            '#dependency' => array('edit-restrict-by' => array('month')),
        );
    
    • フォームの構成はDrupalのFormAPIに従っています
    • 制御される要素は"#dependency"プロパティで記述されています

Ctoolsの"#depencency"の要素識別方法にラジオボタンが特別に扱われています

  • 制御要素が先に定義します(例:セレクトボックス:(restrict_by)
  • 制御される要素が二つ:trip、month セレクトボックス
  • 制御される要素の"#dependency"設定より制御要素の状態で要素の表示/非表示がjavascriptで操作されます
  • "#dependency"の定義は配列で行います
    ”#dependency” => array( "依存先要素のID" => "依存先要素の状態" )
    • 例:依存先は「セレクトボックス」(restrict_by)とします
    • 依存先(restrict_by)のid(htmlソースにある要素id):edit-restrict-by
    • 依存先の状態: none/trip/month 三種類です。
    • trip、またはmonthが選ばれたら、旅行、またはカレンダーのセレクトボックスを表示させる(選ばれなかったら、表示させない)
  • 但し、制御要素がラジオボタン("radios")の場合に"依存先要素のID"書き方が変わります
    '#dependency' => array('radio:restrict_by' => array('trip')),
    // radio: 決まり文言
    // restrict_by: 要素ID
    • 特に、ラジオボタンの要素IDはhtml上の要素IDではありません。FormAPIで定義する要素のIDです
  • "依存先要素の状態"は要素の性質より変わります
    • ラジオボタン: FormAPIの"radios"での"#opetions"に選択された要素のキー:none/trip/month の一つ
      '#dependency' => array('edit-restrict-by' => array('month')),
    • セレクトボックス: FormAPIの"select"での"#opetions"に選択された要素のキー:none/trip/month の一つ
      '#dependency' => array('edit-restrict-by' => array('trip')),
    • チェックボックス: html上に各チェックボックスIDごとに、チェックされた(true:1)かチェックされていない(false:0)の一つ
      '#dependency' => array('edit-restrict-by-month--2' => array(true)),
  • 今回テスト(セレクトボックス/チェックボックス/ラジオボタン)したソースは以下のとなります
    function example_page($form, &$form_state){
    
        // 1. Include CTools Dependent helper
        ctools_include('dependent');
    
        $form['select_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
        );
    
        $form['select_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'select',
            '#options' => array (
                'none'=>t('Select one'),
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
            ),
            '#default_value' => array('none'),
    
        );
        $form['select_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
            // セレクトが「旅行」の場合にこのエレメントが表示される
            '#dependency' => array('edit-restrict-by' => array('trip')),
        );
        $form['select_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            // セレクトが「カレンダー」の場合にこのエレメントが表示される
            '#dependency' => array('edit-restrict-by' => array('month')),
        );
    
    
        $form['radio_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
        );
        $form['radio_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'radios',
            '#options' => array (
                'none'=>t('Select one'),
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
            ),
            '#default_value' => 'none',
    
        );
        $form['radio_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
            '#dependency' => array('radio:restrict_by' => array('trip')),
        );
    
        $form['radio_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            '#dependency' => array('radio:restrict_by' => array('month')),
        );
        $form['Checkbox_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Checkbox Set'),
        );
    
        $form['Checkbox_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'checkboxes',
            '#options' => array (
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
            ),
    
        );
    
        $form['Checkbox_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
    
            // チェックボックスのIDが変わったので注意が必要
            '#dependency' => array('edit-restrict-by-trip--2' => array(true)),
        );
    
        $form['Checkbox_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            '#dependency' => array('edit-restrict-by-month--2' => array(true)),
        );
    
    
        return $form;
    }
    

Ctoolsの依存(dependent)が表示/非表示制御のみ、FormAPIのstatesより制御範囲が狭いです

  • FormAPIに"#dependency"プロパティをプラグインは、表示/非表示のみとなります
  • FormAPIのstatesプロパティの制御と比較すると、制御できる範囲は狭いです
    • FormAPIのstatesプロパティは、表示/非表示/collapse/extended/enabled/disabledなどの制御ができます

感想と結論:Ctoolsの依存(dependent)の設定、コーティングルールに統一性が足りなく、わかりずらいです

  • 依存性の設定定義にラジオボタンの特別扱いを認識しなければならない(最初は戸惑いがあるだろう)
  • これらの特別なコーティングルールを覚える必要があります
  • 要素特定にはjQueryを利用していない
  • 比較してみると、FormAPIの”#states”プロパティの使用で、より統一性があり、柔軟性のダイナミックフォーム作成ができます
添付 サイズ
ctools_dependent_test.zip (1.4 KB) 1.4 KB
Embedded thumbnail for Drupalのダイナミックフォーム1:モジュール(Ctools)のDependent Systemよりエレメントの表示/非表示
drupal
video
form

DrupalのFormAPIの"#states"プロパティの設定でダイナミックフォーム要素を制御します

  • Drupalのフォームに関する開発/カスタマイズの場合に、FormAPIがほぼ必須になる状態です
  • FormAPIにある様々のプロパティに"#states"が初心者にあまり気づかないかもしれないですが、ダイナミックフォームの要素制御に使用されます
  • 基本として、制御要素と制御される要素となります
    • 制御要素は:入力系要素(チェックボックス/ラジオボタン/セレクトボックス/テキストフィールドなど)
    • 制御される要素は:任意の要素の表示/非表示/有効化/無効化/Collapseなどの制御
  • "#states"プロパティの定義に、制御要素の識別はjQueryのセレクター(:input)が利用されています
    // "#"states" 定義の基本
    "#"states" => array(
      'visible' => array(
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        ...
      ),
    )
    
    // 例:チェックボックスがチェックされたときに要素が表示される
    "#"states" => array(
        'visible' => array(
            ':input[name="remote_checkbox"]' => array('checked' => TRUE),
        ),
    )

    FormAPIのstatesプロパティの使用

  • 今回のカスタムモジュール(formapi_states_example)は、前回のCtoolsのdependentの使用と同じようなフォーム要素を作成しました

制御要素の動き(empty/filled/chechedなど)を利用します

  • 制御要素がラジオボタン/チェックボックス/セレクトボックスがよく利用されますが、テキストフィールドなども利用することができます
        $form['select_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
        );
    
        $form['select_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'select',
            '#options' => array (
                'none'=>t('Select one'),
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
                'uncollapse'=>t('次の要素を開く'),
            ),
            '#default_value' => array('none'),
    
        );
        $form['select_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
            '#states' => array(
                // セレクトが「旅行」の場合にこのエレメントが表示される
                'visible' => array(':input[id="edit-restrict-by"]' => array('value'=>'trip')),
    
            ),
        );
        $form['select_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            '#states' => array(
                // セレクトが「カレンダー」の場合にこのエレメントが表示される
                'visible' => array(':input[name="restrict_by"]' => array('value'=>'month')),
            ),
        );
  • 使用可能な要素のプロパティ:
    • empty
    • filled
    • checked
    • unchecked
    • expanded
    • collapsed
    • value

制御される要素の動き(enabled/disabled/visible/invisibleなど)を定義することができます

  • 制御される要素の動きは表示/非表示がよく利用されます
  • ほかに様々の動き(collapse/extendedなど)の制御は可能です
     // フィールドセットの畳む/開く制御例
        $form['radio_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
            '#collapsible' => TRUE,
            '#collapsed' => TRUE,
            '#states' => array(
                'expanded' => array(':input[name="restrict_by"]' => array('value'=>'uncollapse')),
            ),
        );
    
  • 制御される要素の動き一覧は
    • enabled
    • disabled
    • required
    • optional
    • visible
    • invisible
    • checked
    • unchecked
    • expanded
    • collapsed

複数の制御条件(AND/OR)の設定が可能

  • 制御条件は複数にすることができます
  • 制御条件はANDの場合に以下のような構文
    // 二つのAND制御条件に
    array(
      'visible' => array(
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        ...
      ),
    )
    
    // 例:ニッカ所にチェックされた場合、要素が表示される
        $form['Checkbox_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Checkbox Set'),
            '#states' => array(
                'visible' => array(
                    ':input[name="radio_restrict_by"]' => array('value' => 'enable_next'),
                    ':input[id="edit-restrict-by"]' => array('value'=>'uncollapse')
                ),
            ),
        );
  • 制御条件はORの場合に以下のような構文
    // ORの複数条件で表示/非表示制御
    array(
      'visible' => array(
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        ...
      ),
      'visible' => array(
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        ...
      ),
    )
    
     // 例:ニッカ所のところに、一か所がチェックされたら、要素が表示される
        $form['Checkbox_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Checkbox Set'),
            '#states' => array(
                'visible' => array(
                    ':input[name="radio_restrict_by"]' => array('value' => 'enable_next'),
                ),
                'visible' => array(
                    ':input[id="edit-restrict-by"]' => array('value'=>'uncollapse')
                ),
            ),
        );

結論・感想:FormAPIの"#states"プロパティ制御条件の設定は分かりやすく、統一性があり、柔軟性が高いものです

  • 要素のプロパティ"#states"の定義/コーティングルールは比較的にシンプルで、わかりやすいです
  • 要素特、定などにはjQueryのセレクター(:input)が利用しているので、コーティングルールの統一感があります
  • 要素の動き制御は表示/非表示だけではなく、有効/無効/折りたたむなども制御可能で、より柔軟性があります
添付 サイズ
formapi_states_test.zip (1.45 KB) 1.45 KB
Embedded thumbnail for Drupalのダイナミックフォーム2:FormAPIのStatesプロパティよりエレメントの表示/非表示などの処理
drupal
ctools
form

Drupalのモジュール(Ctools)がAPIモジュールであり、幅広く使用されている

  • Drupalのモジュール(Ctools)がAPIモジュールなので、直接に利用するのではなく、いろいろなモジュールに使用されています
    • 例:Views、PanelsなどがCtoolsを利用しています
  • 主な機能は以下のようです(Drupalの中核な存在です)
    • Plugins
    • Exportables
    • AJAX responder
    • Form tools
    • Object caching
    • Contexts
    • Modal dialog
    • Dependent
    • Content
    • Form wizard
    • CSS tools

CtoolsのDependent(依存)がフォーム要素を表示/非表示されるダイナミックな変化に使用されます

  • ダイナミックフォーム: フォーム要素がある条件で表示、非表示を行います
    • 例:セレクトボックス:カレンダー、旅行 二つあります
    • 別の要素(例:セレクト/ラジオボタン/チェックボックス)で上記要素(カレンダー/旅行)の表示/非表示を制御します(ビデオを参考)CtoolsのDependent Systemでフォーム要素の表示/非表示を制御する
  • CtoolsがFormAPIにプロパティ("#dependency")をプラグインしています
        // 1. Include CTools Dependent helper
        ctools_include('dependent');
    
        $form['select_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
        );
    
        $form['select_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'select',
            '#options' => array (
                'none'=>t('Select one'),
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
            ),
            '#default_value' => array('none'),
    
        );
        $form['select_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
            // セレクトが「旅行」の場合にこのエレメントが表示される
            '#dependency' => array('edit-restrict-by' => array('trip')),
        );
        $form['select_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            // セレクトが「カレンダー」の場合にこのエレメントが表示される
            '#dependency' => array('edit-restrict-by' => array('month')),
        );
    
    • フォームの構成はDrupalのFormAPIに従っています
    • 制御される要素は"#dependency"プロパティで記述されています

Ctoolsの"#depencency"の要素識別方法にラジオボタンが特別に扱われています

  • 制御要素が先に定義します(例:セレクトボックス:(restrict_by)
  • 制御される要素が二つ:trip、month セレクトボックス
  • 制御される要素の"#dependency"設定より制御要素の状態で要素の表示/非表示がjavascriptで操作されます
  • "#dependency"の定義は配列で行います
    ”#dependency” => array( "依存先要素のID" => "依存先要素の状態" )
    • 例:依存先は「セレクトボックス」(restrict_by)とします
    • 依存先(restrict_by)のid(htmlソースにある要素id):edit-restrict-by
    • 依存先の状態: none/trip/month 三種類です。
    • trip、またはmonthが選ばれたら、旅行、またはカレンダーのセレクトボックスを表示させる(選ばれなかったら、表示させない)
  • 但し、制御要素がラジオボタン("radios")の場合に"依存先要素のID"書き方が変わります
    '#dependency' => array('radio:restrict_by' => array('trip')),
    // radio: 決まり文言
    // restrict_by: 要素ID
    • 特に、ラジオボタンの要素IDはhtml上の要素IDではありません。FormAPIで定義する要素のIDです
  • "依存先要素の状態"は要素の性質より変わります
    • ラジオボタン: FormAPIの"radios"での"#opetions"に選択された要素のキー:none/trip/month の一つ
      '#dependency' => array('edit-restrict-by' => array('month')),
    • セレクトボックス: FormAPIの"select"での"#opetions"に選択された要素のキー:none/trip/month の一つ
      '#dependency' => array('edit-restrict-by' => array('trip')),
    • チェックボックス: html上に各チェックボックスIDごとに、チェックされた(true:1)かチェックされていない(false:0)の一つ
      '#dependency' => array('edit-restrict-by-month--2' => array(true)),
  • 今回テスト(セレクトボックス/チェックボックス/ラジオボタン)したソースは以下のとなります
    function example_page($form, &$form_state){
    
        // 1. Include CTools Dependent helper
        ctools_include('dependent');
    
        $form['select_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
        );
    
        $form['select_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'select',
            '#options' => array (
                'none'=>t('Select one'),
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
            ),
            '#default_value' => array('none'),
    
        );
        $form['select_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
            // セレクトが「旅行」の場合にこのエレメントが表示される
            '#dependency' => array('edit-restrict-by' => array('trip')),
        );
        $form['select_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            // セレクトが「カレンダー」の場合にこのエレメントが表示される
            '#dependency' => array('edit-restrict-by' => array('month')),
        );
    
    
        $form['radio_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
        );
        $form['radio_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'radios',
            '#options' => array (
                'none'=>t('Select one'),
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
            ),
            '#default_value' => 'none',
    
        );
        $form['radio_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
            '#dependency' => array('radio:restrict_by' => array('trip')),
        );
    
        $form['radio_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            '#dependency' => array('radio:restrict_by' => array('month')),
        );
        $form['Checkbox_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Checkbox Set'),
        );
    
        $form['Checkbox_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'checkboxes',
            '#options' => array (
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
            ),
    
        );
    
        $form['Checkbox_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
    
            // チェックボックスのIDが変わったので注意が必要
            '#dependency' => array('edit-restrict-by-trip--2' => array(true)),
        );
    
        $form['Checkbox_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            '#dependency' => array('edit-restrict-by-month--2' => array(true)),
        );
    
    
        return $form;
    }
    

Ctoolsの依存(dependent)が表示/非表示制御のみ、FormAPIのstatesより制御範囲が狭いです

  • FormAPIに"#dependency"プロパティをプラグインは、表示/非表示のみとなります
  • FormAPIのstatesプロパティの制御と比較すると、制御できる範囲は狭いです
    • FormAPIのstatesプロパティは、表示/非表示/collapse/extended/enabled/disabledなどの制御ができます

感想と結論:Ctoolsの依存(dependent)の設定、コーティングルールに統一性が足りなく、わかりずらいです

  • 依存性の設定定義にラジオボタンの特別扱いを認識しなければならない(最初は戸惑いがあるだろう)
  • これらの特別なコーティングルールを覚える必要があります
  • 要素特定にはjQueryを利用していない
  • 比較してみると、FormAPIの”#states”プロパティの使用で、より統一性があり、柔軟性のダイナミックフォーム作成ができます
添付 サイズ
ctools_dependent_test.zip (1.4 KB) 1.4 KB
Embedded thumbnail for Drupalのダイナミックフォーム1:モジュール(Ctools)のDependent Systemよりエレメントの表示/非表示
drupal
video
form

DrupalのFormAPIの"#states"プロパティの設定でダイナミックフォーム要素を制御します

  • Drupalのフォームに関する開発/カスタマイズの場合に、FormAPIがほぼ必須になる状態です
  • FormAPIにある様々のプロパティに"#states"が初心者にあまり気づかないかもしれないですが、ダイナミックフォームの要素制御に使用されます
  • 基本として、制御要素と制御される要素となります
    • 制御要素は:入力系要素(チェックボックス/ラジオボタン/セレクトボックス/テキストフィールドなど)
    • 制御される要素は:任意の要素の表示/非表示/有効化/無効化/Collapseなどの制御
  • "#states"プロパティの定義に、制御要素の識別はjQueryのセレクター(:input)が利用されています
    // "#"states" 定義の基本
    "#"states" => array(
      'visible' => array(
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        ...
      ),
    )
    
    // 例:チェックボックスがチェックされたときに要素が表示される
    "#"states" => array(
        'visible' => array(
            ':input[name="remote_checkbox"]' => array('checked' => TRUE),
        ),
    )

    FormAPIのstatesプロパティの使用

  • 今回のカスタムモジュール(formapi_states_example)は、前回のCtoolsのdependentの使用と同じようなフォーム要素を作成しました

制御要素の動き(empty/filled/chechedなど)を利用します

  • 制御要素がラジオボタン/チェックボックス/セレクトボックスがよく利用されますが、テキストフィールドなども利用することができます
        $form['select_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
        );
    
        $form['select_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'select',
            '#options' => array (
                'none'=>t('Select one'),
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
                'uncollapse'=>t('次の要素を開く'),
            ),
            '#default_value' => array('none'),
    
        );
        $form['select_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
            '#states' => array(
                // セレクトが「旅行」の場合にこのエレメントが表示される
                'visible' => array(':input[id="edit-restrict-by"]' => array('value'=>'trip')),
    
            ),
        );
        $form['select_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            '#states' => array(
                // セレクトが「カレンダー」の場合にこのエレメントが表示される
                'visible' => array(':input[name="restrict_by"]' => array('value'=>'month')),
            ),
        );
  • 使用可能な要素のプロパティ:
    • empty
    • filled
    • checked
    • unchecked
    • expanded
    • collapsed
    • value

制御される要素の動き(enabled/disabled/visible/invisibleなど)を定義することができます

  • 制御される要素の動きは表示/非表示がよく利用されます
  • ほかに様々の動き(collapse/extendedなど)の制御は可能です
     // フィールドセットの畳む/開く制御例
        $form['radio_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
            '#collapsible' => TRUE,
            '#collapsed' => TRUE,
            '#states' => array(
                'expanded' => array(':input[name="restrict_by"]' => array('value'=>'uncollapse')),
            ),
        );
    
  • 制御される要素の動き一覧は
    • enabled
    • disabled
    • required
    • optional
    • visible
    • invisible
    • checked
    • unchecked
    • expanded
    • collapsed

複数の制御条件(AND/OR)の設定が可能

  • 制御条件は複数にすることができます
  • 制御条件はANDの場合に以下のような構文
    // 二つのAND制御条件に
    array(
      'visible' => array(
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        ...
      ),
    )
    
    // 例:ニッカ所にチェックされた場合、要素が表示される
        $form['Checkbox_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Checkbox Set'),
            '#states' => array(
                'visible' => array(
                    ':input[name="radio_restrict_by"]' => array('value' => 'enable_next'),
                    ':input[id="edit-restrict-by"]' => array('value'=>'uncollapse')
                ),
            ),
        );
  • 制御条件はORの場合に以下のような構文
    // ORの複数条件で表示/非表示制御
    array(
      'visible' => array(
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        ...
      ),
      'visible' => array(
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        ...
      ),
    )
    
     // 例:ニッカ所のところに、一か所がチェックされたら、要素が表示される
        $form['Checkbox_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Checkbox Set'),
            '#states' => array(
                'visible' => array(
                    ':input[name="radio_restrict_by"]' => array('value' => 'enable_next'),
                ),
                'visible' => array(
                    ':input[id="edit-restrict-by"]' => array('value'=>'uncollapse')
                ),
            ),
        );

結論・感想:FormAPIの"#states"プロパティ制御条件の設定は分かりやすく、統一性があり、柔軟性が高いものです

  • 要素のプロパティ"#states"の定義/コーティングルールは比較的にシンプルで、わかりやすいです
  • 要素特、定などにはjQueryのセレクター(:input)が利用しているので、コーティングルールの統一感があります
  • 要素の動き制御は表示/非表示だけではなく、有効/無効/折りたたむなども制御可能で、より柔軟性があります
添付 サイズ
formapi_states_test.zip (1.45 KB) 1.45 KB
Embedded thumbnail for Drupalのダイナミックフォーム2:FormAPIのStatesプロパティよりエレメントの表示/非表示などの処理
drupal
ctools
form

Drupalのモジュール(Ctools)がAPIモジュールであり、幅広く使用されている

  • Drupalのモジュール(Ctools)がAPIモジュールなので、直接に利用するのではなく、いろいろなモジュールに使用されています
    • 例:Views、PanelsなどがCtoolsを利用しています
  • 主な機能は以下のようです(Drupalの中核な存在です)
    • Plugins
    • Exportables
    • AJAX responder
    • Form tools
    • Object caching
    • Contexts
    • Modal dialog
    • Dependent
    • Content
    • Form wizard
    • CSS tools

CtoolsのDependent(依存)がフォーム要素を表示/非表示されるダイナミックな変化に使用されます

  • ダイナミックフォーム: フォーム要素がある条件で表示、非表示を行います
    • 例:セレクトボックス:カレンダー、旅行 二つあります
    • 別の要素(例:セレクト/ラジオボタン/チェックボックス)で上記要素(カレンダー/旅行)の表示/非表示を制御します(ビデオを参考)CtoolsのDependent Systemでフォーム要素の表示/非表示を制御する
  • CtoolsがFormAPIにプロパティ("#dependency")をプラグインしています
        // 1. Include CTools Dependent helper
        ctools_include('dependent');
    
        $form['select_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
        );
    
        $form['select_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'select',
            '#options' => array (
                'none'=>t('Select one'),
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
            ),
            '#default_value' => array('none'),
    
        );
        $form['select_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
            // セレクトが「旅行」の場合にこのエレメントが表示される
            '#dependency' => array('edit-restrict-by' => array('trip')),
        );
        $form['select_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            // セレクトが「カレンダー」の場合にこのエレメントが表示される
            '#dependency' => array('edit-restrict-by' => array('month')),
        );
    
    • フォームの構成はDrupalのFormAPIに従っています
    • 制御される要素は"#dependency"プロパティで記述されています

Ctoolsの"#depencency"の要素識別方法にラジオボタンが特別に扱われています

  • 制御要素が先に定義します(例:セレクトボックス:(restrict_by)
  • 制御される要素が二つ:trip、month セレクトボックス
  • 制御される要素の"#dependency"設定より制御要素の状態で要素の表示/非表示がjavascriptで操作されます
  • "#dependency"の定義は配列で行います
    ”#dependency” => array( "依存先要素のID" => "依存先要素の状態" )
    • 例:依存先は「セレクトボックス」(restrict_by)とします
    • 依存先(restrict_by)のid(htmlソースにある要素id):edit-restrict-by
    • 依存先の状態: none/trip/month 三種類です。
    • trip、またはmonthが選ばれたら、旅行、またはカレンダーのセレクトボックスを表示させる(選ばれなかったら、表示させない)
  • 但し、制御要素がラジオボタン("radios")の場合に"依存先要素のID"書き方が変わります
    '#dependency' => array('radio:restrict_by' => array('trip')),
    // radio: 決まり文言
    // restrict_by: 要素ID
    • 特に、ラジオボタンの要素IDはhtml上の要素IDではありません。FormAPIで定義する要素のIDです
  • "依存先要素の状態"は要素の性質より変わります
    • ラジオボタン: FormAPIの"radios"での"#opetions"に選択された要素のキー:none/trip/month の一つ
      '#dependency' => array('edit-restrict-by' => array('month')),
    • セレクトボックス: FormAPIの"select"での"#opetions"に選択された要素のキー:none/trip/month の一つ
      '#dependency' => array('edit-restrict-by' => array('trip')),
    • チェックボックス: html上に各チェックボックスIDごとに、チェックされた(true:1)かチェックされていない(false:0)の一つ
      '#dependency' => array('edit-restrict-by-month--2' => array(true)),
  • 今回テスト(セレクトボックス/チェックボックス/ラジオボタン)したソースは以下のとなります
    function example_page($form, &$form_state){
    
        // 1. Include CTools Dependent helper
        ctools_include('dependent');
    
        $form['select_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
        );
    
        $form['select_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'select',
            '#options' => array (
                'none'=>t('Select one'),
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
            ),
            '#default_value' => array('none'),
    
        );
        $form['select_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
            // セレクトが「旅行」の場合にこのエレメントが表示される
            '#dependency' => array('edit-restrict-by' => array('trip')),
        );
        $form['select_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            // セレクトが「カレンダー」の場合にこのエレメントが表示される
            '#dependency' => array('edit-restrict-by' => array('month')),
        );
    
    
        $form['radio_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
        );
        $form['radio_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'radios',
            '#options' => array (
                'none'=>t('Select one'),
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
            ),
            '#default_value' => 'none',
    
        );
        $form['radio_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
            '#dependency' => array('radio:restrict_by' => array('trip')),
        );
    
        $form['radio_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            '#dependency' => array('radio:restrict_by' => array('month')),
        );
        $form['Checkbox_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Checkbox Set'),
        );
    
        $form['Checkbox_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'checkboxes',
            '#options' => array (
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
            ),
    
        );
    
        $form['Checkbox_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
    
            // チェックボックスのIDが変わったので注意が必要
            '#dependency' => array('edit-restrict-by-trip--2' => array(true)),
        );
    
        $form['Checkbox_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            '#dependency' => array('edit-restrict-by-month--2' => array(true)),
        );
    
    
        return $form;
    }
    

Ctoolsの依存(dependent)が表示/非表示制御のみ、FormAPIのstatesより制御範囲が狭いです

  • FormAPIに"#dependency"プロパティをプラグインは、表示/非表示のみとなります
  • FormAPIのstatesプロパティの制御と比較すると、制御できる範囲は狭いです
    • FormAPIのstatesプロパティは、表示/非表示/collapse/extended/enabled/disabledなどの制御ができます

感想と結論:Ctoolsの依存(dependent)の設定、コーティングルールに統一性が足りなく、わかりずらいです

  • 依存性の設定定義にラジオボタンの特別扱いを認識しなければならない(最初は戸惑いがあるだろう)
  • これらの特別なコーティングルールを覚える必要があります
  • 要素特定にはjQueryを利用していない
  • 比較してみると、FormAPIの”#states”プロパティの使用で、より統一性があり、柔軟性のダイナミックフォーム作成ができます
添付 サイズ
ctools_dependent_test.zip (1.4 KB) 1.4 KB
Embedded thumbnail for Drupalのダイナミックフォーム1:モジュール(Ctools)のDependent Systemよりエレメントの表示/非表示
drupal
video
form

DrupalのFormAPIの"#states"プロパティの設定でダイナミックフォーム要素を制御します

  • Drupalのフォームに関する開発/カスタマイズの場合に、FormAPIがほぼ必須になる状態です
  • FormAPIにある様々のプロパティに"#states"が初心者にあまり気づかないかもしれないですが、ダイナミックフォームの要素制御に使用されます
  • 基本として、制御要素と制御される要素となります
    • 制御要素は:入力系要素(チェックボックス/ラジオボタン/セレクトボックス/テキストフィールドなど)
    • 制御される要素は:任意の要素の表示/非表示/有効化/無効化/Collapseなどの制御
  • "#states"プロパティの定義に、制御要素の識別はjQueryのセレクター(:input)が利用されています
    // "#"states" 定義の基本
    "#"states" => array(
      'visible' => array(
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        ...
      ),
    )
    
    // 例:チェックボックスがチェックされたときに要素が表示される
    "#"states" => array(
        'visible' => array(
            ':input[name="remote_checkbox"]' => array('checked' => TRUE),
        ),
    )

    FormAPIのstatesプロパティの使用

  • 今回のカスタムモジュール(formapi_states_example)は、前回のCtoolsのdependentの使用と同じようなフォーム要素を作成しました

制御要素の動き(empty/filled/chechedなど)を利用します

  • 制御要素がラジオボタン/チェックボックス/セレクトボックスがよく利用されますが、テキストフィールドなども利用することができます
        $form['select_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
        );
    
        $form['select_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'select',
            '#options' => array (
                'none'=>t('Select one'),
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
                'uncollapse'=>t('次の要素を開く'),
            ),
            '#default_value' => array('none'),
    
        );
        $form['select_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
            '#states' => array(
                // セレクトが「旅行」の場合にこのエレメントが表示される
                'visible' => array(':input[id="edit-restrict-by"]' => array('value'=>'trip')),
    
            ),
        );
        $form['select_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            '#states' => array(
                // セレクトが「カレンダー」の場合にこのエレメントが表示される
                'visible' => array(':input[name="restrict_by"]' => array('value'=>'month')),
            ),
        );
  • 使用可能な要素のプロパティ:
    • empty
    • filled
    • checked
    • unchecked
    • expanded
    • collapsed
    • value

制御される要素の動き(enabled/disabled/visible/invisibleなど)を定義することができます

  • 制御される要素の動きは表示/非表示がよく利用されます
  • ほかに様々の動き(collapse/extendedなど)の制御は可能です
     // フィールドセットの畳む/開く制御例
        $form['radio_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
            '#collapsible' => TRUE,
            '#collapsed' => TRUE,
            '#states' => array(
                'expanded' => array(':input[name="restrict_by"]' => array('value'=>'uncollapse')),
            ),
        );
    
  • 制御される要素の動き一覧は
    • enabled
    • disabled
    • required
    • optional
    • visible
    • invisible
    • checked
    • unchecked
    • expanded
    • collapsed

複数の制御条件(AND/OR)の設定が可能

  • 制御条件は複数にすることができます
  • 制御条件はANDの場合に以下のような構文
    // 二つのAND制御条件に
    array(
      'visible' => array(
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        ...
      ),
    )
    
    // 例:ニッカ所にチェックされた場合、要素が表示される
        $form['Checkbox_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Checkbox Set'),
            '#states' => array(
                'visible' => array(
                    ':input[name="radio_restrict_by"]' => array('value' => 'enable_next'),
                    ':input[id="edit-restrict-by"]' => array('value'=>'uncollapse')
                ),
            ),
        );
  • 制御条件はORの場合に以下のような構文
    // ORの複数条件で表示/非表示制御
    array(
      'visible' => array(
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        ...
      ),
      'visible' => array(
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        ...
      ),
    )
    
     // 例:ニッカ所のところに、一か所がチェックされたら、要素が表示される
        $form['Checkbox_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Checkbox Set'),
            '#states' => array(
                'visible' => array(
                    ':input[name="radio_restrict_by"]' => array('value' => 'enable_next'),
                ),
                'visible' => array(
                    ':input[id="edit-restrict-by"]' => array('value'=>'uncollapse')
                ),
            ),
        );

結論・感想:FormAPIの"#states"プロパティ制御条件の設定は分かりやすく、統一性があり、柔軟性が高いものです

  • 要素のプロパティ"#states"の定義/コーティングルールは比較的にシンプルで、わかりやすいです
  • 要素特、定などにはjQueryのセレクター(:input)が利用しているので、コーティングルールの統一感があります
  • 要素の動き制御は表示/非表示だけではなく、有効/無効/折りたたむなども制御可能で、より柔軟性があります
添付 サイズ
formapi_states_test.zip (1.45 KB) 1.45 KB
Embedded thumbnail for Drupalのダイナミックフォーム2:FormAPIのStatesプロパティよりエレメントの表示/非表示などの処理
drupal
ctools
form

Drupalのモジュール(Ctools)がAPIモジュールであり、幅広く使用されている

  • Drupalのモジュール(Ctools)がAPIモジュールなので、直接に利用するのではなく、いろいろなモジュールに使用されています
    • 例:Views、PanelsなどがCtoolsを利用しています
  • 主な機能は以下のようです(Drupalの中核な存在です)
    • Plugins
    • Exportables
    • AJAX responder
    • Form tools
    • Object caching
    • Contexts
    • Modal dialog
    • Dependent
    • Content
    • Form wizard
    • CSS tools

CtoolsのDependent(依存)がフォーム要素を表示/非表示されるダイナミックな変化に使用されます

  • ダイナミックフォーム: フォーム要素がある条件で表示、非表示を行います
    • 例:セレクトボックス:カレンダー、旅行 二つあります
    • 別の要素(例:セレクト/ラジオボタン/チェックボックス)で上記要素(カレンダー/旅行)の表示/非表示を制御します(ビデオを参考)CtoolsのDependent Systemでフォーム要素の表示/非表示を制御する
  • CtoolsがFormAPIにプロパティ("#dependency")をプラグインしています
        // 1. Include CTools Dependent helper
        ctools_include('dependent');
    
        $form['select_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
        );
    
        $form['select_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'select',
            '#options' => array (
                'none'=>t('Select one'),
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
            ),
            '#default_value' => array('none'),
    
        );
        $form['select_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
            // セレクトが「旅行」の場合にこのエレメントが表示される
            '#dependency' => array('edit-restrict-by' => array('trip')),
        );
        $form['select_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            // セレクトが「カレンダー」の場合にこのエレメントが表示される
            '#dependency' => array('edit-restrict-by' => array('month')),
        );
    
    • フォームの構成はDrupalのFormAPIに従っています
    • 制御される要素は"#dependency"プロパティで記述されています

Ctoolsの"#depencency"の要素識別方法にラジオボタンが特別に扱われています

  • 制御要素が先に定義します(例:セレクトボックス:(restrict_by)
  • 制御される要素が二つ:trip、month セレクトボックス
  • 制御される要素の"#dependency"設定より制御要素の状態で要素の表示/非表示がjavascriptで操作されます
  • "#dependency"の定義は配列で行います
    ”#dependency” => array( "依存先要素のID" => "依存先要素の状態" )
    • 例:依存先は「セレクトボックス」(restrict_by)とします
    • 依存先(restrict_by)のid(htmlソースにある要素id):edit-restrict-by
    • 依存先の状態: none/trip/month 三種類です。
    • trip、またはmonthが選ばれたら、旅行、またはカレンダーのセレクトボックスを表示させる(選ばれなかったら、表示させない)
  • 但し、制御要素がラジオボタン("radios")の場合に"依存先要素のID"書き方が変わります
    '#dependency' => array('radio:restrict_by' => array('trip')),
    // radio: 決まり文言
    // restrict_by: 要素ID
    • 特に、ラジオボタンの要素IDはhtml上の要素IDではありません。FormAPIで定義する要素のIDです
  • "依存先要素の状態"は要素の性質より変わります
    • ラジオボタン: FormAPIの"radios"での"#opetions"に選択された要素のキー:none/trip/month の一つ
      '#dependency' => array('edit-restrict-by' => array('month')),
    • セレクトボックス: FormAPIの"select"での"#opetions"に選択された要素のキー:none/trip/month の一つ
      '#dependency' => array('edit-restrict-by' => array('trip')),
    • チェックボックス: html上に各チェックボックスIDごとに、チェックされた(true:1)かチェックされていない(false:0)の一つ
      '#dependency' => array('edit-restrict-by-month--2' => array(true)),
  • 今回テスト(セレクトボックス/チェックボックス/ラジオボタン)したソースは以下のとなります
    function example_page($form, &$form_state){
    
        // 1. Include CTools Dependent helper
        ctools_include('dependent');
    
        $form['select_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
        );
    
        $form['select_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'select',
            '#options' => array (
                'none'=>t('Select one'),
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
            ),
            '#default_value' => array('none'),
    
        );
        $form['select_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
            // セレクトが「旅行」の場合にこのエレメントが表示される
            '#dependency' => array('edit-restrict-by' => array('trip')),
        );
        $form['select_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            // セレクトが「カレンダー」の場合にこのエレメントが表示される
            '#dependency' => array('edit-restrict-by' => array('month')),
        );
    
    
        $form['radio_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
        );
        $form['radio_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'radios',
            '#options' => array (
                'none'=>t('Select one'),
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
            ),
            '#default_value' => 'none',
    
        );
        $form['radio_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
            '#dependency' => array('radio:restrict_by' => array('trip')),
        );
    
        $form['radio_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            '#dependency' => array('radio:restrict_by' => array('month')),
        );
        $form['Checkbox_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Checkbox Set'),
        );
    
        $form['Checkbox_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'checkboxes',
            '#options' => array (
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
            ),
    
        );
    
        $form['Checkbox_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
    
            // チェックボックスのIDが変わったので注意が必要
            '#dependency' => array('edit-restrict-by-trip--2' => array(true)),
        );
    
        $form['Checkbox_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            '#dependency' => array('edit-restrict-by-month--2' => array(true)),
        );
    
    
        return $form;
    }
    

Ctoolsの依存(dependent)が表示/非表示制御のみ、FormAPIのstatesより制御範囲が狭いです

  • FormAPIに"#dependency"プロパティをプラグインは、表示/非表示のみとなります
  • FormAPIのstatesプロパティの制御と比較すると、制御できる範囲は狭いです
    • FormAPIのstatesプロパティは、表示/非表示/collapse/extended/enabled/disabledなどの制御ができます

感想と結論:Ctoolsの依存(dependent)の設定、コーティングルールに統一性が足りなく、わかりずらいです

  • 依存性の設定定義にラジオボタンの特別扱いを認識しなければならない(最初は戸惑いがあるだろう)
  • これらの特別なコーティングルールを覚える必要があります
  • 要素特定にはjQueryを利用していない
  • 比較してみると、FormAPIの”#states”プロパティの使用で、より統一性があり、柔軟性のダイナミックフォーム作成ができます
添付 サイズ
ctools_dependent_test.zip (1.4 KB) 1.4 KB
Embedded thumbnail for Drupalのダイナミックフォーム1:モジュール(Ctools)のDependent Systemよりエレメントの表示/非表示
drupal
video
form

DrupalのFormAPIの"#states"プロパティの設定でダイナミックフォーム要素を制御します

  • Drupalのフォームに関する開発/カスタマイズの場合に、FormAPIがほぼ必須になる状態です
  • FormAPIにある様々のプロパティに"#states"が初心者にあまり気づかないかもしれないですが、ダイナミックフォームの要素制御に使用されます
  • 基本として、制御要素と制御される要素となります
    • 制御要素は:入力系要素(チェックボックス/ラジオボタン/セレクトボックス/テキストフィールドなど)
    • 制御される要素は:任意の要素の表示/非表示/有効化/無効化/Collapseなどの制御
  • "#states"プロパティの定義に、制御要素の識別はjQueryのセレクター(:input)が利用されています
    // "#"states" 定義の基本
    "#"states" => array(
      'visible' => array(
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        ...
      ),
    )
    
    // 例:チェックボックスがチェックされたときに要素が表示される
    "#"states" => array(
        'visible' => array(
            ':input[name="remote_checkbox"]' => array('checked' => TRUE),
        ),
    )

    FormAPIのstatesプロパティの使用

  • 今回のカスタムモジュール(formapi_states_example)は、前回のCtoolsのdependentの使用と同じようなフォーム要素を作成しました

制御要素の動き(empty/filled/chechedなど)を利用します

  • 制御要素がラジオボタン/チェックボックス/セレクトボックスがよく利用されますが、テキストフィールドなども利用することができます
        $form['select_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
        );
    
        $form['select_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'select',
            '#options' => array (
                'none'=>t('Select one'),
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
                'uncollapse'=>t('次の要素を開く'),
            ),
            '#default_value' => array('none'),
    
        );
        $form['select_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
            '#states' => array(
                // セレクトが「旅行」の場合にこのエレメントが表示される
                'visible' => array(':input[id="edit-restrict-by"]' => array('value'=>'trip')),
    
            ),
        );
        $form['select_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            '#states' => array(
                // セレクトが「カレンダー」の場合にこのエレメントが表示される
                'visible' => array(':input[name="restrict_by"]' => array('value'=>'month')),
            ),
        );
  • 使用可能な要素のプロパティ:
    • empty
    • filled
    • checked
    • unchecked
    • expanded
    • collapsed
    • value

制御される要素の動き(enabled/disabled/visible/invisibleなど)を定義することができます

  • 制御される要素の動きは表示/非表示がよく利用されます
  • ほかに様々の動き(collapse/extendedなど)の制御は可能です
     // フィールドセットの畳む/開く制御例
        $form['radio_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
            '#collapsible' => TRUE,
            '#collapsed' => TRUE,
            '#states' => array(
                'expanded' => array(':input[name="restrict_by"]' => array('value'=>'uncollapse')),
            ),
        );
    
  • 制御される要素の動き一覧は
    • enabled
    • disabled
    • required
    • optional
    • visible
    • invisible
    • checked
    • unchecked
    • expanded
    • collapsed

複数の制御条件(AND/OR)の設定が可能

  • 制御条件は複数にすることができます
  • 制御条件はANDの場合に以下のような構文
    // 二つのAND制御条件に
    array(
      'visible' => array(
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        ...
      ),
    )
    
    // 例:ニッカ所にチェックされた場合、要素が表示される
        $form['Checkbox_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Checkbox Set'),
            '#states' => array(
                'visible' => array(
                    ':input[name="radio_restrict_by"]' => array('value' => 'enable_next'),
                    ':input[id="edit-restrict-by"]' => array('value'=>'uncollapse')
                ),
            ),
        );
  • 制御条件はORの場合に以下のような構文
    // ORの複数条件で表示/非表示制御
    array(
      'visible' => array(
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        ...
      ),
      'visible' => array(
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        ...
      ),
    )
    
     // 例:ニッカ所のところに、一か所がチェックされたら、要素が表示される
        $form['Checkbox_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Checkbox Set'),
            '#states' => array(
                'visible' => array(
                    ':input[name="radio_restrict_by"]' => array('value' => 'enable_next'),
                ),
                'visible' => array(
                    ':input[id="edit-restrict-by"]' => array('value'=>'uncollapse')
                ),
            ),
        );

結論・感想:FormAPIの"#states"プロパティ制御条件の設定は分かりやすく、統一性があり、柔軟性が高いものです

  • 要素のプロパティ"#states"の定義/コーティングルールは比較的にシンプルで、わかりやすいです
  • 要素特、定などにはjQueryのセレクター(:input)が利用しているので、コーティングルールの統一感があります
  • 要素の動き制御は表示/非表示だけではなく、有効/無効/折りたたむなども制御可能で、より柔軟性があります
添付 サイズ
formapi_states_test.zip (1.45 KB) 1.45 KB
Embedded thumbnail for Drupalのダイナミックフォーム2:FormAPIのStatesプロパティよりエレメントの表示/非表示などの処理
drupal
ctools
form

Drupalのモジュール(Ctools)がAPIモジュールであり、幅広く使用されている

  • Drupalのモジュール(Ctools)がAPIモジュールなので、直接に利用するのではなく、いろいろなモジュールに使用されています
    • 例:Views、PanelsなどがCtoolsを利用しています
  • 主な機能は以下のようです(Drupalの中核な存在です)
    • Plugins
    • Exportables
    • AJAX responder
    • Form tools
    • Object caching
    • Contexts
    • Modal dialog
    • Dependent
    • Content
    • Form wizard
    • CSS tools

CtoolsのDependent(依存)がフォーム要素を表示/非表示されるダイナミックな変化に使用されます

  • ダイナミックフォーム: フォーム要素がある条件で表示、非表示を行います
    • 例:セレクトボックス:カレンダー、旅行 二つあります
    • 別の要素(例:セレクト/ラジオボタン/チェックボックス)で上記要素(カレンダー/旅行)の表示/非表示を制御します(ビデオを参考)CtoolsのDependent Systemでフォーム要素の表示/非表示を制御する
  • CtoolsがFormAPIにプロパティ("#dependency")をプラグインしています
        // 1. Include CTools Dependent helper
        ctools_include('dependent');
    
        $form['select_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
        );
    
        $form['select_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'select',
            '#options' => array (
                'none'=>t('Select one'),
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
            ),
            '#default_value' => array('none'),
    
        );
        $form['select_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
            // セレクトが「旅行」の場合にこのエレメントが表示される
            '#dependency' => array('edit-restrict-by' => array('trip')),
        );
        $form['select_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            // セレクトが「カレンダー」の場合にこのエレメントが表示される
            '#dependency' => array('edit-restrict-by' => array('month')),
        );
    
    • フォームの構成はDrupalのFormAPIに従っています
    • 制御される要素は"#dependency"プロパティで記述されています

Ctoolsの"#depencency"の要素識別方法にラジオボタンが特別に扱われています

  • 制御要素が先に定義します(例:セレクトボックス:(restrict_by)
  • 制御される要素が二つ:trip、month セレクトボックス
  • 制御される要素の"#dependency"設定より制御要素の状態で要素の表示/非表示がjavascriptで操作されます
  • "#dependency"の定義は配列で行います
    ”#dependency” => array( "依存先要素のID" => "依存先要素の状態" )
    • 例:依存先は「セレクトボックス」(restrict_by)とします
    • 依存先(restrict_by)のid(htmlソースにある要素id):edit-restrict-by
    • 依存先の状態: none/trip/month 三種類です。
    • trip、またはmonthが選ばれたら、旅行、またはカレンダーのセレクトボックスを表示させる(選ばれなかったら、表示させない)
  • 但し、制御要素がラジオボタン("radios")の場合に"依存先要素のID"書き方が変わります
    '#dependency' => array('radio:restrict_by' => array('trip')),
    // radio: 決まり文言
    // restrict_by: 要素ID
    • 特に、ラジオボタンの要素IDはhtml上の要素IDではありません。FormAPIで定義する要素のIDです
  • "依存先要素の状態"は要素の性質より変わります
    • ラジオボタン: FormAPIの"radios"での"#opetions"に選択された要素のキー:none/trip/month の一つ
      '#dependency' => array('edit-restrict-by' => array('month')),
    • セレクトボックス: FormAPIの"select"での"#opetions"に選択された要素のキー:none/trip/month の一つ
      '#dependency' => array('edit-restrict-by' => array('trip')),
    • チェックボックス: html上に各チェックボックスIDごとに、チェックされた(true:1)かチェックされていない(false:0)の一つ
      '#dependency' => array('edit-restrict-by-month--2' => array(true)),
  • 今回テスト(セレクトボックス/チェックボックス/ラジオボタン)したソースは以下のとなります
    function example_page($form, &$form_state){
    
        // 1. Include CTools Dependent helper
        ctools_include('dependent');
    
        $form['select_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
        );
    
        $form['select_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'select',
            '#options' => array (
                'none'=>t('Select one'),
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
            ),
            '#default_value' => array('none'),
    
        );
        $form['select_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
            // セレクトが「旅行」の場合にこのエレメントが表示される
            '#dependency' => array('edit-restrict-by' => array('trip')),
        );
        $form['select_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            // セレクトが「カレンダー」の場合にこのエレメントが表示される
            '#dependency' => array('edit-restrict-by' => array('month')),
        );
    
    
        $form['radio_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
        );
        $form['radio_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'radios',
            '#options' => array (
                'none'=>t('Select one'),
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
            ),
            '#default_value' => 'none',
    
        );
        $form['radio_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
            '#dependency' => array('radio:restrict_by' => array('trip')),
        );
    
        $form['radio_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            '#dependency' => array('radio:restrict_by' => array('month')),
        );
        $form['Checkbox_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Checkbox Set'),
        );
    
        $form['Checkbox_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'checkboxes',
            '#options' => array (
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
            ),
    
        );
    
        $form['Checkbox_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
    
            // チェックボックスのIDが変わったので注意が必要
            '#dependency' => array('edit-restrict-by-trip--2' => array(true)),
        );
    
        $form['Checkbox_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            '#dependency' => array('edit-restrict-by-month--2' => array(true)),
        );
    
    
        return $form;
    }
    

Ctoolsの依存(dependent)が表示/非表示制御のみ、FormAPIのstatesより制御範囲が狭いです

  • FormAPIに"#dependency"プロパティをプラグインは、表示/非表示のみとなります
  • FormAPIのstatesプロパティの制御と比較すると、制御できる範囲は狭いです
    • FormAPIのstatesプロパティは、表示/非表示/collapse/extended/enabled/disabledなどの制御ができます

感想と結論:Ctoolsの依存(dependent)の設定、コーティングルールに統一性が足りなく、わかりずらいです

  • 依存性の設定定義にラジオボタンの特別扱いを認識しなければならない(最初は戸惑いがあるだろう)
  • これらの特別なコーティングルールを覚える必要があります
  • 要素特定にはjQueryを利用していない
  • 比較してみると、FormAPIの”#states”プロパティの使用で、より統一性があり、柔軟性のダイナミックフォーム作成ができます
添付 サイズ
ctools_dependent_test.zip (1.4 KB) 1.4 KB
Embedded thumbnail for Drupalのダイナミックフォーム1:モジュール(Ctools)のDependent Systemよりエレメントの表示/非表示
drupal
video
form

DrupalのFormAPIの"#states"プロパティの設定でダイナミックフォーム要素を制御します

  • Drupalのフォームに関する開発/カスタマイズの場合に、FormAPIがほぼ必須になる状態です
  • FormAPIにある様々のプロパティに"#states"が初心者にあまり気づかないかもしれないですが、ダイナミックフォームの要素制御に使用されます
  • 基本として、制御要素と制御される要素となります
    • 制御要素は:入力系要素(チェックボックス/ラジオボタン/セレクトボックス/テキストフィールドなど)
    • 制御される要素は:任意の要素の表示/非表示/有効化/無効化/Collapseなどの制御
  • "#states"プロパティの定義に、制御要素の識別はjQueryのセレクター(:input)が利用されています
    // "#"states" 定義の基本
    "#"states" => array(
      'visible' => array(
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        ...
      ),
    )
    
    // 例:チェックボックスがチェックされたときに要素が表示される
    "#"states" => array(
        'visible' => array(
            ':input[name="remote_checkbox"]' => array('checked' => TRUE),
        ),
    )

    FormAPIのstatesプロパティの使用

  • 今回のカスタムモジュール(formapi_states_example)は、前回のCtoolsのdependentの使用と同じようなフォーム要素を作成しました

制御要素の動き(empty/filled/chechedなど)を利用します

  • 制御要素がラジオボタン/チェックボックス/セレクトボックスがよく利用されますが、テキストフィールドなども利用することができます
        $form['select_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
        );
    
        $form['select_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'select',
            '#options' => array (
                'none'=>t('Select one'),
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
                'uncollapse'=>t('次の要素を開く'),
            ),
            '#default_value' => array('none'),
    
        );
        $form['select_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
            '#states' => array(
                // セレクトが「旅行」の場合にこのエレメントが表示される
                'visible' => array(':input[id="edit-restrict-by"]' => array('value'=>'trip')),
    
            ),
        );
        $form['select_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            '#states' => array(
                // セレクトが「カレンダー」の場合にこのエレメントが表示される
                'visible' => array(':input[name="restrict_by"]' => array('value'=>'month')),
            ),
        );
  • 使用可能な要素のプロパティ:
    • empty
    • filled
    • checked
    • unchecked
    • expanded
    • collapsed
    • value

制御される要素の動き(enabled/disabled/visible/invisibleなど)を定義することができます

  • 制御される要素の動きは表示/非表示がよく利用されます
  • ほかに様々の動き(collapse/extendedなど)の制御は可能です
     // フィールドセットの畳む/開く制御例
        $form['radio_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
            '#collapsible' => TRUE,
            '#collapsed' => TRUE,
            '#states' => array(
                'expanded' => array(':input[name="restrict_by"]' => array('value'=>'uncollapse')),
            ),
        );
    
  • 制御される要素の動き一覧は
    • enabled
    • disabled
    • required
    • optional
    • visible
    • invisible
    • checked
    • unchecked
    • expanded
    • collapsed

複数の制御条件(AND/OR)の設定が可能

  • 制御条件は複数にすることができます
  • 制御条件はANDの場合に以下のような構文
    // 二つのAND制御条件に
    array(
      'visible' => array(
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        ...
      ),
    )
    
    // 例:ニッカ所にチェックされた場合、要素が表示される
        $form['Checkbox_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Checkbox Set'),
            '#states' => array(
                'visible' => array(
                    ':input[name="radio_restrict_by"]' => array('value' => 'enable_next'),
                    ':input[id="edit-restrict-by"]' => array('value'=>'uncollapse')
                ),
            ),
        );
  • 制御条件はORの場合に以下のような構文
    // ORの複数条件で表示/非表示制御
    array(
      'visible' => array(
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        ...
      ),
      'visible' => array(
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        ...
      ),
    )
    
     // 例:ニッカ所のところに、一か所がチェックされたら、要素が表示される
        $form['Checkbox_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Checkbox Set'),
            '#states' => array(
                'visible' => array(
                    ':input[name="radio_restrict_by"]' => array('value' => 'enable_next'),
                ),
                'visible' => array(
                    ':input[id="edit-restrict-by"]' => array('value'=>'uncollapse')
                ),
            ),
        );

結論・感想:FormAPIの"#states"プロパティ制御条件の設定は分かりやすく、統一性があり、柔軟性が高いものです

  • 要素のプロパティ"#states"の定義/コーティングルールは比較的にシンプルで、わかりやすいです
  • 要素特、定などにはjQueryのセレクター(:input)が利用しているので、コーティングルールの統一感があります
  • 要素の動き制御は表示/非表示だけではなく、有効/無効/折りたたむなども制御可能で、より柔軟性があります
添付 サイズ
formapi_states_test.zip (1.45 KB) 1.45 KB
Embedded thumbnail for Drupalのダイナミックフォーム2:FormAPIのStatesプロパティよりエレメントの表示/非表示などの処理
drupal
ctools
form

Drupalのモジュール(Ctools)がAPIモジュールであり、幅広く使用されている

  • Drupalのモジュール(Ctools)がAPIモジュールなので、直接に利用するのではなく、いろいろなモジュールに使用されています
    • 例:Views、PanelsなどがCtoolsを利用しています
  • 主な機能は以下のようです(Drupalの中核な存在です)
    • Plugins
    • Exportables
    • AJAX responder
    • Form tools
    • Object caching
    • Contexts
    • Modal dialog
    • Dependent
    • Content
    • Form wizard
    • CSS tools

CtoolsのDependent(依存)がフォーム要素を表示/非表示されるダイナミックな変化に使用されます

  • ダイナミックフォーム: フォーム要素がある条件で表示、非表示を行います
    • 例:セレクトボックス:カレンダー、旅行 二つあります
    • 別の要素(例:セレクト/ラジオボタン/チェックボックス)で上記要素(カレンダー/旅行)の表示/非表示を制御します(ビデオを参考)CtoolsのDependent Systemでフォーム要素の表示/非表示を制御する
  • CtoolsがFormAPIにプロパティ("#dependency")をプラグインしています
        // 1. Include CTools Dependent helper
        ctools_include('dependent');
    
        $form['select_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
        );
    
        $form['select_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'select',
            '#options' => array (
                'none'=>t('Select one'),
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
            ),
            '#default_value' => array('none'),
    
        );
        $form['select_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
            // セレクトが「旅行」の場合にこのエレメントが表示される
            '#dependency' => array('edit-restrict-by' => array('trip')),
        );
        $form['select_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            // セレクトが「カレンダー」の場合にこのエレメントが表示される
            '#dependency' => array('edit-restrict-by' => array('month')),
        );
    
    • フォームの構成はDrupalのFormAPIに従っています
    • 制御される要素は"#dependency"プロパティで記述されています

Ctoolsの"#depencency"の要素識別方法にラジオボタンが特別に扱われています

  • 制御要素が先に定義します(例:セレクトボックス:(restrict_by)
  • 制御される要素が二つ:trip、month セレクトボックス
  • 制御される要素の"#dependency"設定より制御要素の状態で要素の表示/非表示がjavascriptで操作されます
  • "#dependency"の定義は配列で行います
    ”#dependency” => array( "依存先要素のID" => "依存先要素の状態" )
    • 例:依存先は「セレクトボックス」(restrict_by)とします
    • 依存先(restrict_by)のid(htmlソースにある要素id):edit-restrict-by
    • 依存先の状態: none/trip/month 三種類です。
    • trip、またはmonthが選ばれたら、旅行、またはカレンダーのセレクトボックスを表示させる(選ばれなかったら、表示させない)
  • 但し、制御要素がラジオボタン("radios")の場合に"依存先要素のID"書き方が変わります
    '#dependency' => array('radio:restrict_by' => array('trip')),
    // radio: 決まり文言
    // restrict_by: 要素ID
    • 特に、ラジオボタンの要素IDはhtml上の要素IDではありません。FormAPIで定義する要素のIDです
  • "依存先要素の状態"は要素の性質より変わります
    • ラジオボタン: FormAPIの"radios"での"#opetions"に選択された要素のキー:none/trip/month の一つ
      '#dependency' => array('edit-restrict-by' => array('month')),
    • セレクトボックス: FormAPIの"select"での"#opetions"に選択された要素のキー:none/trip/month の一つ
      '#dependency' => array('edit-restrict-by' => array('trip')),
    • チェックボックス: html上に各チェックボックスIDごとに、チェックされた(true:1)かチェックされていない(false:0)の一つ
      '#dependency' => array('edit-restrict-by-month--2' => array(true)),
  • 今回テスト(セレクトボックス/チェックボックス/ラジオボタン)したソースは以下のとなります
    function example_page($form, &$form_state){
    
        // 1. Include CTools Dependent helper
        ctools_include('dependent');
    
        $form['select_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
        );
    
        $form['select_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'select',
            '#options' => array (
                'none'=>t('Select one'),
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
            ),
            '#default_value' => array('none'),
    
        );
        $form['select_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
            // セレクトが「旅行」の場合にこのエレメントが表示される
            '#dependency' => array('edit-restrict-by' => array('trip')),
        );
        $form['select_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            // セレクトが「カレンダー」の場合にこのエレメントが表示される
            '#dependency' => array('edit-restrict-by' => array('month')),
        );
    
    
        $form['radio_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
        );
        $form['radio_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'radios',
            '#options' => array (
                'none'=>t('Select one'),
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
            ),
            '#default_value' => 'none',
    
        );
        $form['radio_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
            '#dependency' => array('radio:restrict_by' => array('trip')),
        );
    
        $form['radio_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            '#dependency' => array('radio:restrict_by' => array('month')),
        );
        $form['Checkbox_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Checkbox Set'),
        );
    
        $form['Checkbox_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'checkboxes',
            '#options' => array (
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
            ),
    
        );
    
        $form['Checkbox_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
    
            // チェックボックスのIDが変わったので注意が必要
            '#dependency' => array('edit-restrict-by-trip--2' => array(true)),
        );
    
        $form['Checkbox_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            '#dependency' => array('edit-restrict-by-month--2' => array(true)),
        );
    
    
        return $form;
    }
    

Ctoolsの依存(dependent)が表示/非表示制御のみ、FormAPIのstatesより制御範囲が狭いです

  • FormAPIに"#dependency"プロパティをプラグインは、表示/非表示のみとなります
  • FormAPIのstatesプロパティの制御と比較すると、制御できる範囲は狭いです
    • FormAPIのstatesプロパティは、表示/非表示/collapse/extended/enabled/disabledなどの制御ができます

感想と結論:Ctoolsの依存(dependent)の設定、コーティングルールに統一性が足りなく、わかりずらいです

  • 依存性の設定定義にラジオボタンの特別扱いを認識しなければならない(最初は戸惑いがあるだろう)
  • これらの特別なコーティングルールを覚える必要があります
  • 要素特定にはjQueryを利用していない
  • 比較してみると、FormAPIの”#states”プロパティの使用で、より統一性があり、柔軟性のダイナミックフォーム作成ができます
添付 サイズ
ctools_dependent_test.zip (1.4 KB) 1.4 KB
Embedded thumbnail for Drupalのダイナミックフォーム1:モジュール(Ctools)のDependent Systemよりエレメントの表示/非表示
drupal
video
form

DrupalのFormAPIの"#states"プロパティの設定でダイナミックフォーム要素を制御します

  • Drupalのフォームに関する開発/カスタマイズの場合に、FormAPIがほぼ必須になる状態です
  • FormAPIにある様々のプロパティに"#states"が初心者にあまり気づかないかもしれないですが、ダイナミックフォームの要素制御に使用されます
  • 基本として、制御要素と制御される要素となります
    • 制御要素は:入力系要素(チェックボックス/ラジオボタン/セレクトボックス/テキストフィールドなど)
    • 制御される要素は:任意の要素の表示/非表示/有効化/無効化/Collapseなどの制御
  • "#states"プロパティの定義に、制御要素の識別はjQueryのセレクター(:input)が利用されています
    // "#"states" 定義の基本
    "#"states" => array(
      'visible' => array(
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        ...
      ),
    )
    
    // 例:チェックボックスがチェックされたときに要素が表示される
    "#"states" => array(
        'visible' => array(
            ':input[name="remote_checkbox"]' => array('checked' => TRUE),
        ),
    )

    FormAPIのstatesプロパティの使用

  • 今回のカスタムモジュール(formapi_states_example)は、前回のCtoolsのdependentの使用と同じようなフォーム要素を作成しました

制御要素の動き(empty/filled/chechedなど)を利用します

  • 制御要素がラジオボタン/チェックボックス/セレクトボックスがよく利用されますが、テキストフィールドなども利用することができます
        $form['select_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
        );
    
        $form['select_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'select',
            '#options' => array (
                'none'=>t('Select one'),
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
                'uncollapse'=>t('次の要素を開く'),
            ),
            '#default_value' => array('none'),
    
        );
        $form['select_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
            '#states' => array(
                // セレクトが「旅行」の場合にこのエレメントが表示される
                'visible' => array(':input[id="edit-restrict-by"]' => array('value'=>'trip')),
    
            ),
        );
        $form['select_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            '#states' => array(
                // セレクトが「カレンダー」の場合にこのエレメントが表示される
                'visible' => array(':input[name="restrict_by"]' => array('value'=>'month')),
            ),
        );
  • 使用可能な要素のプロパティ:
    • empty
    • filled
    • checked
    • unchecked
    • expanded
    • collapsed
    • value

制御される要素の動き(enabled/disabled/visible/invisibleなど)を定義することができます

  • 制御される要素の動きは表示/非表示がよく利用されます
  • ほかに様々の動き(collapse/extendedなど)の制御は可能です
     // フィールドセットの畳む/開く制御例
        $form['radio_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
            '#collapsible' => TRUE,
            '#collapsed' => TRUE,
            '#states' => array(
                'expanded' => array(':input[name="restrict_by"]' => array('value'=>'uncollapse')),
            ),
        );
    
  • 制御される要素の動き一覧は
    • enabled
    • disabled
    • required
    • optional
    • visible
    • invisible
    • checked
    • unchecked
    • expanded
    • collapsed

複数の制御条件(AND/OR)の設定が可能

  • 制御条件は複数にすることができます
  • 制御条件はANDの場合に以下のような構文
    // 二つのAND制御条件に
    array(
      'visible' => array(
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        ...
      ),
    )
    
    // 例:ニッカ所にチェックされた場合、要素が表示される
        $form['Checkbox_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Checkbox Set'),
            '#states' => array(
                'visible' => array(
                    ':input[name="radio_restrict_by"]' => array('value' => 'enable_next'),
                    ':input[id="edit-restrict-by"]' => array('value'=>'uncollapse')
                ),
            ),
        );
  • 制御条件はORの場合に以下のような構文
    // ORの複数条件で表示/非表示制御
    array(
      'visible' => array(
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        ...
      ),
      'visible' => array(
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        ...
      ),
    )
    
     // 例:ニッカ所のところに、一か所がチェックされたら、要素が表示される
        $form['Checkbox_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Checkbox Set'),
            '#states' => array(
                'visible' => array(
                    ':input[name="radio_restrict_by"]' => array('value' => 'enable_next'),
                ),
                'visible' => array(
                    ':input[id="edit-restrict-by"]' => array('value'=>'uncollapse')
                ),
            ),
        );

結論・感想:FormAPIの"#states"プロパティ制御条件の設定は分かりやすく、統一性があり、柔軟性が高いものです

  • 要素のプロパティ"#states"の定義/コーティングルールは比較的にシンプルで、わかりやすいです
  • 要素特、定などにはjQueryのセレクター(:input)が利用しているので、コーティングルールの統一感があります
  • 要素の動き制御は表示/非表示だけではなく、有効/無効/折りたたむなども制御可能で、より柔軟性があります
添付 サイズ
formapi_states_test.zip (1.45 KB) 1.45 KB
Embedded thumbnail for Drupalのダイナミックフォーム2:FormAPIのStatesプロパティよりエレメントの表示/非表示などの処理
drupal
ctools
form

Drupalのモジュール(Ctools)がAPIモジュールであり、幅広く使用されている

  • Drupalのモジュール(Ctools)がAPIモジュールなので、直接に利用するのではなく、いろいろなモジュールに使用されています
    • 例:Views、PanelsなどがCtoolsを利用しています
  • 主な機能は以下のようです(Drupalの中核な存在です)
    • Plugins
    • Exportables
    • AJAX responder
    • Form tools
    • Object caching
    • Contexts
    • Modal dialog
    • Dependent
    • Content
    • Form wizard
    • CSS tools

CtoolsのDependent(依存)がフォーム要素を表示/非表示されるダイナミックな変化に使用されます

  • ダイナミックフォーム: フォーム要素がある条件で表示、非表示を行います
    • 例:セレクトボックス:カレンダー、旅行 二つあります
    • 別の要素(例:セレクト/ラジオボタン/チェックボックス)で上記要素(カレンダー/旅行)の表示/非表示を制御します(ビデオを参考)CtoolsのDependent Systemでフォーム要素の表示/非表示を制御する
  • CtoolsがFormAPIにプロパティ("#dependency")をプラグインしています
        // 1. Include CTools Dependent helper
        ctools_include('dependent');
    
        $form['select_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
        );
    
        $form['select_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'select',
            '#options' => array (
                'none'=>t('Select one'),
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
            ),
            '#default_value' => array('none'),
    
        );
        $form['select_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
            // セレクトが「旅行」の場合にこのエレメントが表示される
            '#dependency' => array('edit-restrict-by' => array('trip')),
        );
        $form['select_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            // セレクトが「カレンダー」の場合にこのエレメントが表示される
            '#dependency' => array('edit-restrict-by' => array('month')),
        );
    
    • フォームの構成はDrupalのFormAPIに従っています
    • 制御される要素は"#dependency"プロパティで記述されています

Ctoolsの"#depencency"の要素識別方法にラジオボタンが特別に扱われています

  • 制御要素が先に定義します(例:セレクトボックス:(restrict_by)
  • 制御される要素が二つ:trip、month セレクトボックス
  • 制御される要素の"#dependency"設定より制御要素の状態で要素の表示/非表示がjavascriptで操作されます
  • "#dependency"の定義は配列で行います
    ”#dependency” => array( "依存先要素のID" => "依存先要素の状態" )
    • 例:依存先は「セレクトボックス」(restrict_by)とします
    • 依存先(restrict_by)のid(htmlソースにある要素id):edit-restrict-by
    • 依存先の状態: none/trip/month 三種類です。
    • trip、またはmonthが選ばれたら、旅行、またはカレンダーのセレクトボックスを表示させる(選ばれなかったら、表示させない)
  • 但し、制御要素がラジオボタン("radios")の場合に"依存先要素のID"書き方が変わります
    '#dependency' => array('radio:restrict_by' => array('trip')),
    // radio: 決まり文言
    // restrict_by: 要素ID
    • 特に、ラジオボタンの要素IDはhtml上の要素IDではありません。FormAPIで定義する要素のIDです
  • "依存先要素の状態"は要素の性質より変わります
    • ラジオボタン: FormAPIの"radios"での"#opetions"に選択された要素のキー:none/trip/month の一つ
      '#dependency' => array('edit-restrict-by' => array('month')),
    • セレクトボックス: FormAPIの"select"での"#opetions"に選択された要素のキー:none/trip/month の一つ
      '#dependency' => array('edit-restrict-by' => array('trip')),
    • チェックボックス: html上に各チェックボックスIDごとに、チェックされた(true:1)かチェックされていない(false:0)の一つ
      '#dependency' => array('edit-restrict-by-month--2' => array(true)),
  • 今回テスト(セレクトボックス/チェックボックス/ラジオボタン)したソースは以下のとなります
    function example_page($form, &$form_state){
    
        // 1. Include CTools Dependent helper
        ctools_include('dependent');
    
        $form['select_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
        );
    
        $form['select_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'select',
            '#options' => array (
                'none'=>t('Select one'),
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
            ),
            '#default_value' => array('none'),
    
        );
        $form['select_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
            // セレクトが「旅行」の場合にこのエレメントが表示される
            '#dependency' => array('edit-restrict-by' => array('trip')),
        );
        $form['select_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            // セレクトが「カレンダー」の場合にこのエレメントが表示される
            '#dependency' => array('edit-restrict-by' => array('month')),
        );
    
    
        $form['radio_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
        );
        $form['radio_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'radios',
            '#options' => array (
                'none'=>t('Select one'),
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
            ),
            '#default_value' => 'none',
    
        );
        $form['radio_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
            '#dependency' => array('radio:restrict_by' => array('trip')),
        );
    
        $form['radio_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            '#dependency' => array('radio:restrict_by' => array('month')),
        );
        $form['Checkbox_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Checkbox Set'),
        );
    
        $form['Checkbox_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'checkboxes',
            '#options' => array (
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
            ),
    
        );
    
        $form['Checkbox_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
    
            // チェックボックスのIDが変わったので注意が必要
            '#dependency' => array('edit-restrict-by-trip--2' => array(true)),
        );
    
        $form['Checkbox_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            '#dependency' => array('edit-restrict-by-month--2' => array(true)),
        );
    
    
        return $form;
    }
    

Ctoolsの依存(dependent)が表示/非表示制御のみ、FormAPIのstatesより制御範囲が狭いです

  • FormAPIに"#dependency"プロパティをプラグインは、表示/非表示のみとなります
  • FormAPIのstatesプロパティの制御と比較すると、制御できる範囲は狭いです
    • FormAPIのstatesプロパティは、表示/非表示/collapse/extended/enabled/disabledなどの制御ができます

感想と結論:Ctoolsの依存(dependent)の設定、コーティングルールに統一性が足りなく、わかりずらいです

  • 依存性の設定定義にラジオボタンの特別扱いを認識しなければならない(最初は戸惑いがあるだろう)
  • これらの特別なコーティングルールを覚える必要があります
  • 要素特定にはjQueryを利用していない
  • 比較してみると、FormAPIの”#states”プロパティの使用で、より統一性があり、柔軟性のダイナミックフォーム作成ができます
添付 サイズ
ctools_dependent_test.zip (1.4 KB) 1.4 KB
Embedded thumbnail for Drupalのダイナミックフォーム1:モジュール(Ctools)のDependent Systemよりエレメントの表示/非表示
drupal
video
form

DrupalのFormAPIの"#states"プロパティの設定でダイナミックフォーム要素を制御します

  • Drupalのフォームに関する開発/カスタマイズの場合に、FormAPIがほぼ必須になる状態です
  • FormAPIにある様々のプロパティに"#states"が初心者にあまり気づかないかもしれないですが、ダイナミックフォームの要素制御に使用されます
  • 基本として、制御要素と制御される要素となります
    • 制御要素は:入力系要素(チェックボックス/ラジオボタン/セレクトボックス/テキストフィールドなど)
    • 制御される要素は:任意の要素の表示/非表示/有効化/無効化/Collapseなどの制御
  • "#states"プロパティの定義に、制御要素の識別はjQueryのセレクター(:input)が利用されています
    // "#"states" 定義の基本
    "#"states" => array(
      'visible' => array(
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        ...
      ),
    )
    
    // 例:チェックボックスがチェックされたときに要素が表示される
    "#"states" => array(
        'visible' => array(
            ':input[name="remote_checkbox"]' => array('checked' => TRUE),
        ),
    )

    FormAPIのstatesプロパティの使用

  • 今回のカスタムモジュール(formapi_states_example)は、前回のCtoolsのdependentの使用と同じようなフォーム要素を作成しました

制御要素の動き(empty/filled/chechedなど)を利用します

  • 制御要素がラジオボタン/チェックボックス/セレクトボックスがよく利用されますが、テキストフィールドなども利用することができます
        $form['select_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
        );
    
        $form['select_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'select',
            '#options' => array (
                'none'=>t('Select one'),
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
                'uncollapse'=>t('次の要素を開く'),
            ),
            '#default_value' => array('none'),
    
        );
        $form['select_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
            '#states' => array(
                // セレクトが「旅行」の場合にこのエレメントが表示される
                'visible' => array(':input[id="edit-restrict-by"]' => array('value'=>'trip')),
    
            ),
        );
        $form['select_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            '#states' => array(
                // セレクトが「カレンダー」の場合にこのエレメントが表示される
                'visible' => array(':input[name="restrict_by"]' => array('value'=>'month')),
            ),
        );
  • 使用可能な要素のプロパティ:
    • empty
    • filled
    • checked
    • unchecked
    • expanded
    • collapsed
    • value

制御される要素の動き(enabled/disabled/visible/invisibleなど)を定義することができます

  • 制御される要素の動きは表示/非表示がよく利用されます
  • ほかに様々の動き(collapse/extendedなど)の制御は可能です
     // フィールドセットの畳む/開く制御例
        $form['radio_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
            '#collapsible' => TRUE,
            '#collapsed' => TRUE,
            '#states' => array(
                'expanded' => array(':input[name="restrict_by"]' => array('value'=>'uncollapse')),
            ),
        );
    
  • 制御される要素の動き一覧は
    • enabled
    • disabled
    • required
    • optional
    • visible
    • invisible
    • checked
    • unchecked
    • expanded
    • collapsed

複数の制御条件(AND/OR)の設定が可能

  • 制御条件は複数にすることができます
  • 制御条件はANDの場合に以下のような構文
    // 二つのAND制御条件に
    array(
      'visible' => array(
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        ...
      ),
    )
    
    // 例:ニッカ所にチェックされた場合、要素が表示される
        $form['Checkbox_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Checkbox Set'),
            '#states' => array(
                'visible' => array(
                    ':input[name="radio_restrict_by"]' => array('value' => 'enable_next'),
                    ':input[id="edit-restrict-by"]' => array('value'=>'uncollapse')
                ),
            ),
        );
  • 制御条件はORの場合に以下のような構文
    // ORの複数条件で表示/非表示制御
    array(
      'visible' => array(
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        ...
      ),
      'visible' => array(
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        ...
      ),
    )
    
     // 例:ニッカ所のところに、一か所がチェックされたら、要素が表示される
        $form['Checkbox_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Checkbox Set'),
            '#states' => array(
                'visible' => array(
                    ':input[name="radio_restrict_by"]' => array('value' => 'enable_next'),
                ),
                'visible' => array(
                    ':input[id="edit-restrict-by"]' => array('value'=>'uncollapse')
                ),
            ),
        );

結論・感想:FormAPIの"#states"プロパティ制御条件の設定は分かりやすく、統一性があり、柔軟性が高いものです

  • 要素のプロパティ"#states"の定義/コーティングルールは比較的にシンプルで、わかりやすいです
  • 要素特、定などにはjQueryのセレクター(:input)が利用しているので、コーティングルールの統一感があります
  • 要素の動き制御は表示/非表示だけではなく、有効/無効/折りたたむなども制御可能で、より柔軟性があります
添付 サイズ
formapi_states_test.zip (1.45 KB) 1.45 KB
Embedded thumbnail for Drupalのダイナミックフォーム2:FormAPIのStatesプロパティよりエレメントの表示/非表示などの処理
drupal
ctools
form

Drupalのモジュール(Ctools)がAPIモジュールであり、幅広く使用されている

  • Drupalのモジュール(Ctools)がAPIモジュールなので、直接に利用するのではなく、いろいろなモジュールに使用されています
    • 例:Views、PanelsなどがCtoolsを利用しています
  • 主な機能は以下のようです(Drupalの中核な存在です)
    • Plugins
    • Exportables
    • AJAX responder
    • Form tools
    • Object caching
    • Contexts
    • Modal dialog
    • Dependent
    • Content
    • Form wizard
    • CSS tools

CtoolsのDependent(依存)がフォーム要素を表示/非表示されるダイナミックな変化に使用されます

  • ダイナミックフォーム: フォーム要素がある条件で表示、非表示を行います
    • 例:セレクトボックス:カレンダー、旅行 二つあります
    • 別の要素(例:セレクト/ラジオボタン/チェックボックス)で上記要素(カレンダー/旅行)の表示/非表示を制御します(ビデオを参考)CtoolsのDependent Systemでフォーム要素の表示/非表示を制御する
  • CtoolsがFormAPIにプロパティ("#dependency")をプラグインしています
        // 1. Include CTools Dependent helper
        ctools_include('dependent');
    
        $form['select_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
        );
    
        $form['select_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'select',
            '#options' => array (
                'none'=>t('Select one'),
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
            ),
            '#default_value' => array('none'),
    
        );
        $form['select_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
            // セレクトが「旅行」の場合にこのエレメントが表示される
            '#dependency' => array('edit-restrict-by' => array('trip')),
        );
        $form['select_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            // セレクトが「カレンダー」の場合にこのエレメントが表示される
            '#dependency' => array('edit-restrict-by' => array('month')),
        );
    
    • フォームの構成はDrupalのFormAPIに従っています
    • 制御される要素は"#dependency"プロパティで記述されています

Ctoolsの"#depencency"の要素識別方法にラジオボタンが特別に扱われています

  • 制御要素が先に定義します(例:セレクトボックス:(restrict_by)
  • 制御される要素が二つ:trip、month セレクトボックス
  • 制御される要素の"#dependency"設定より制御要素の状態で要素の表示/非表示がjavascriptで操作されます
  • "#dependency"の定義は配列で行います
    ”#dependency” => array( "依存先要素のID" => "依存先要素の状態" )
    • 例:依存先は「セレクトボックス」(restrict_by)とします
    • 依存先(restrict_by)のid(htmlソースにある要素id):edit-restrict-by
    • 依存先の状態: none/trip/month 三種類です。
    • trip、またはmonthが選ばれたら、旅行、またはカレンダーのセレクトボックスを表示させる(選ばれなかったら、表示させない)
  • 但し、制御要素がラジオボタン("radios")の場合に"依存先要素のID"書き方が変わります
    '#dependency' => array('radio:restrict_by' => array('trip')),
    // radio: 決まり文言
    // restrict_by: 要素ID
    • 特に、ラジオボタンの要素IDはhtml上の要素IDではありません。FormAPIで定義する要素のIDです
  • "依存先要素の状態"は要素の性質より変わります
    • ラジオボタン: FormAPIの"radios"での"#opetions"に選択された要素のキー:none/trip/month の一つ
      '#dependency' => array('edit-restrict-by' => array('month')),
    • セレクトボックス: FormAPIの"select"での"#opetions"に選択された要素のキー:none/trip/month の一つ
      '#dependency' => array('edit-restrict-by' => array('trip')),
    • チェックボックス: html上に各チェックボックスIDごとに、チェックされた(true:1)かチェックされていない(false:0)の一つ
      '#dependency' => array('edit-restrict-by-month--2' => array(true)),
  • 今回テスト(セレクトボックス/チェックボックス/ラジオボタン)したソースは以下のとなります
    function example_page($form, &$form_state){
    
        // 1. Include CTools Dependent helper
        ctools_include('dependent');
    
        $form['select_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
        );
    
        $form['select_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'select',
            '#options' => array (
                'none'=>t('Select one'),
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
            ),
            '#default_value' => array('none'),
    
        );
        $form['select_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
            // セレクトが「旅行」の場合にこのエレメントが表示される
            '#dependency' => array('edit-restrict-by' => array('trip')),
        );
        $form['select_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            // セレクトが「カレンダー」の場合にこのエレメントが表示される
            '#dependency' => array('edit-restrict-by' => array('month')),
        );
    
    
        $form['radio_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
        );
        $form['radio_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'radios',
            '#options' => array (
                'none'=>t('Select one'),
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
            ),
            '#default_value' => 'none',
    
        );
        $form['radio_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
            '#dependency' => array('radio:restrict_by' => array('trip')),
        );
    
        $form['radio_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            '#dependency' => array('radio:restrict_by' => array('month')),
        );
        $form['Checkbox_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Checkbox Set'),
        );
    
        $form['Checkbox_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'checkboxes',
            '#options' => array (
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
            ),
    
        );
    
        $form['Checkbox_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
    
            // チェックボックスのIDが変わったので注意が必要
            '#dependency' => array('edit-restrict-by-trip--2' => array(true)),
        );
    
        $form['Checkbox_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            '#dependency' => array('edit-restrict-by-month--2' => array(true)),
        );
    
    
        return $form;
    }
    

Ctoolsの依存(dependent)が表示/非表示制御のみ、FormAPIのstatesより制御範囲が狭いです

  • FormAPIに"#dependency"プロパティをプラグインは、表示/非表示のみとなります
  • FormAPIのstatesプロパティの制御と比較すると、制御できる範囲は狭いです
    • FormAPIのstatesプロパティは、表示/非表示/collapse/extended/enabled/disabledなどの制御ができます

感想と結論:Ctoolsの依存(dependent)の設定、コーティングルールに統一性が足りなく、わかりずらいです

  • 依存性の設定定義にラジオボタンの特別扱いを認識しなければならない(最初は戸惑いがあるだろう)
  • これらの特別なコーティングルールを覚える必要があります
  • 要素特定にはjQueryを利用していない
  • 比較してみると、FormAPIの”#states”プロパティの使用で、より統一性があり、柔軟性のダイナミックフォーム作成ができます
添付 サイズ
ctools_dependent_test.zip (1.4 KB) 1.4 KB
Embedded thumbnail for Drupalのダイナミックフォーム1:モジュール(Ctools)のDependent Systemよりエレメントの表示/非表示
drupal
video
form

DrupalのFormAPIの"#states"プロパティの設定でダイナミックフォーム要素を制御します

  • Drupalのフォームに関する開発/カスタマイズの場合に、FormAPIがほぼ必須になる状態です
  • FormAPIにある様々のプロパティに"#states"が初心者にあまり気づかないかもしれないですが、ダイナミックフォームの要素制御に使用されます
  • 基本として、制御要素と制御される要素となります
    • 制御要素は:入力系要素(チェックボックス/ラジオボタン/セレクトボックス/テキストフィールドなど)
    • 制御される要素は:任意の要素の表示/非表示/有効化/無効化/Collapseなどの制御
  • "#states"プロパティの定義に、制御要素の識別はjQueryのセレクター(:input)が利用されています
    // "#"states" 定義の基本
    "#"states" => array(
      'visible' => array(
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        ...
      ),
    )
    
    // 例:チェックボックスがチェックされたときに要素が表示される
    "#"states" => array(
        'visible' => array(
            ':input[name="remote_checkbox"]' => array('checked' => TRUE),
        ),
    )

    FormAPIのstatesプロパティの使用

  • 今回のカスタムモジュール(formapi_states_example)は、前回のCtoolsのdependentの使用と同じようなフォーム要素を作成しました

制御要素の動き(empty/filled/chechedなど)を利用します

  • 制御要素がラジオボタン/チェックボックス/セレクトボックスがよく利用されますが、テキストフィールドなども利用することができます
        $form['select_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
        );
    
        $form['select_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'select',
            '#options' => array (
                'none'=>t('Select one'),
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
                'uncollapse'=>t('次の要素を開く'),
            ),
            '#default_value' => array('none'),
    
        );
        $form['select_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
            '#states' => array(
                // セレクトが「旅行」の場合にこのエレメントが表示される
                'visible' => array(':input[id="edit-restrict-by"]' => array('value'=>'trip')),
    
            ),
        );
        $form['select_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            '#states' => array(
                // セレクトが「カレンダー」の場合にこのエレメントが表示される
                'visible' => array(':input[name="restrict_by"]' => array('value'=>'month')),
            ),
        );
  • 使用可能な要素のプロパティ:
    • empty
    • filled
    • checked
    • unchecked
    • expanded
    • collapsed
    • value

制御される要素の動き(enabled/disabled/visible/invisibleなど)を定義することができます

  • 制御される要素の動きは表示/非表示がよく利用されます
  • ほかに様々の動き(collapse/extendedなど)の制御は可能です
     // フィールドセットの畳む/開く制御例
        $form['radio_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
            '#collapsible' => TRUE,
            '#collapsed' => TRUE,
            '#states' => array(
                'expanded' => array(':input[name="restrict_by"]' => array('value'=>'uncollapse')),
            ),
        );
    
  • 制御される要素の動き一覧は
    • enabled
    • disabled
    • required
    • optional
    • visible
    • invisible
    • checked
    • unchecked
    • expanded
    • collapsed

複数の制御条件(AND/OR)の設定が可能

  • 制御条件は複数にすることができます
  • 制御条件はANDの場合に以下のような構文
    // 二つのAND制御条件に
    array(
      'visible' => array(
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        ...
      ),
    )
    
    // 例:ニッカ所にチェックされた場合、要素が表示される
        $form['Checkbox_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Checkbox Set'),
            '#states' => array(
                'visible' => array(
                    ':input[name="radio_restrict_by"]' => array('value' => 'enable_next'),
                    ':input[id="edit-restrict-by"]' => array('value'=>'uncollapse')
                ),
            ),
        );
  • 制御条件はORの場合に以下のような構文
    // ORの複数条件で表示/非表示制御
    array(
      'visible' => array(
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        ...
      ),
      'visible' => array(
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        ...
      ),
    )
    
     // 例:ニッカ所のところに、一か所がチェックされたら、要素が表示される
        $form['Checkbox_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Checkbox Set'),
            '#states' => array(
                'visible' => array(
                    ':input[name="radio_restrict_by"]' => array('value' => 'enable_next'),
                ),
                'visible' => array(
                    ':input[id="edit-restrict-by"]' => array('value'=>'uncollapse')
                ),
            ),
        );

結論・感想:FormAPIの"#states"プロパティ制御条件の設定は分かりやすく、統一性があり、柔軟性が高いものです

  • 要素のプロパティ"#states"の定義/コーティングルールは比較的にシンプルで、わかりやすいです
  • 要素特、定などにはjQueryのセレクター(:input)が利用しているので、コーティングルールの統一感があります
  • 要素の動き制御は表示/非表示だけではなく、有効/無効/折りたたむなども制御可能で、より柔軟性があります
添付 サイズ
formapi_states_test.zip (1.45 KB) 1.45 KB
Embedded thumbnail for Drupalのダイナミックフォーム2:FormAPIのStatesプロパティよりエレメントの表示/非表示などの処理
drupal
ctools
form

Drupalのモジュール(Ctools)がAPIモジュールであり、幅広く使用されている

  • Drupalのモジュール(Ctools)がAPIモジュールなので、直接に利用するのではなく、いろいろなモジュールに使用されています
    • 例:Views、PanelsなどがCtoolsを利用しています
  • 主な機能は以下のようです(Drupalの中核な存在です)
    • Plugins
    • Exportables
    • AJAX responder
    • Form tools
    • Object caching
    • Contexts
    • Modal dialog
    • Dependent
    • Content
    • Form wizard
    • CSS tools

CtoolsのDependent(依存)がフォーム要素を表示/非表示されるダイナミックな変化に使用されます

  • ダイナミックフォーム: フォーム要素がある条件で表示、非表示を行います
    • 例:セレクトボックス:カレンダー、旅行 二つあります
    • 別の要素(例:セレクト/ラジオボタン/チェックボックス)で上記要素(カレンダー/旅行)の表示/非表示を制御します(ビデオを参考)CtoolsのDependent Systemでフォーム要素の表示/非表示を制御する
  • CtoolsがFormAPIにプロパティ("#dependency")をプラグインしています
        // 1. Include CTools Dependent helper
        ctools_include('dependent');
    
        $form['select_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
        );
    
        $form['select_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'select',
            '#options' => array (
                'none'=>t('Select one'),
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
            ),
            '#default_value' => array('none'),
    
        );
        $form['select_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
            // セレクトが「旅行」の場合にこのエレメントが表示される
            '#dependency' => array('edit-restrict-by' => array('trip')),
        );
        $form['select_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            // セレクトが「カレンダー」の場合にこのエレメントが表示される
            '#dependency' => array('edit-restrict-by' => array('month')),
        );
    
    • フォームの構成はDrupalのFormAPIに従っています
    • 制御される要素は"#dependency"プロパティで記述されています

Ctoolsの"#depencency"の要素識別方法にラジオボタンが特別に扱われています

  • 制御要素が先に定義します(例:セレクトボックス:(restrict_by)
  • 制御される要素が二つ:trip、month セレクトボックス
  • 制御される要素の"#dependency"設定より制御要素の状態で要素の表示/非表示がjavascriptで操作されます
  • "#dependency"の定義は配列で行います
    ”#dependency” => array( "依存先要素のID" => "依存先要素の状態" )
    • 例:依存先は「セレクトボックス」(restrict_by)とします
    • 依存先(restrict_by)のid(htmlソースにある要素id):edit-restrict-by
    • 依存先の状態: none/trip/month 三種類です。
    • trip、またはmonthが選ばれたら、旅行、またはカレンダーのセレクトボックスを表示させる(選ばれなかったら、表示させない)
  • 但し、制御要素がラジオボタン("radios")の場合に"依存先要素のID"書き方が変わります
    '#dependency' => array('radio:restrict_by' => array('trip')),
    // radio: 決まり文言
    // restrict_by: 要素ID
    • 特に、ラジオボタンの要素IDはhtml上の要素IDではありません。FormAPIで定義する要素のIDです
  • "依存先要素の状態"は要素の性質より変わります
    • ラジオボタン: FormAPIの"radios"での"#opetions"に選択された要素のキー:none/trip/month の一つ
      '#dependency' => array('edit-restrict-by' => array('month')),
    • セレクトボックス: FormAPIの"select"での"#opetions"に選択された要素のキー:none/trip/month の一つ
      '#dependency' => array('edit-restrict-by' => array('trip')),
    • チェックボックス: html上に各チェックボックスIDごとに、チェックされた(true:1)かチェックされていない(false:0)の一つ
      '#dependency' => array('edit-restrict-by-month--2' => array(true)),
  • 今回テスト(セレクトボックス/チェックボックス/ラジオボタン)したソースは以下のとなります
    function example_page($form, &$form_state){
    
        // 1. Include CTools Dependent helper
        ctools_include('dependent');
    
        $form['select_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
        );
    
        $form['select_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'select',
            '#options' => array (
                'none'=>t('Select one'),
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
            ),
            '#default_value' => array('none'),
    
        );
        $form['select_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
            // セレクトが「旅行」の場合にこのエレメントが表示される
            '#dependency' => array('edit-restrict-by' => array('trip')),
        );
        $form['select_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            // セレクトが「カレンダー」の場合にこのエレメントが表示される
            '#dependency' => array('edit-restrict-by' => array('month')),
        );
    
    
        $form['radio_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
        );
        $form['radio_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'radios',
            '#options' => array (
                'none'=>t('Select one'),
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
            ),
            '#default_value' => 'none',
    
        );
        $form['radio_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
            '#dependency' => array('radio:restrict_by' => array('trip')),
        );
    
        $form['radio_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            '#dependency' => array('radio:restrict_by' => array('month')),
        );
        $form['Checkbox_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Checkbox Set'),
        );
    
        $form['Checkbox_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'checkboxes',
            '#options' => array (
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
            ),
    
        );
    
        $form['Checkbox_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
    
            // チェックボックスのIDが変わったので注意が必要
            '#dependency' => array('edit-restrict-by-trip--2' => array(true)),
        );
    
        $form['Checkbox_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            '#dependency' => array('edit-restrict-by-month--2' => array(true)),
        );
    
    
        return $form;
    }
    

Ctoolsの依存(dependent)が表示/非表示制御のみ、FormAPIのstatesより制御範囲が狭いです

  • FormAPIに"#dependency"プロパティをプラグインは、表示/非表示のみとなります
  • FormAPIのstatesプロパティの制御と比較すると、制御できる範囲は狭いです
    • FormAPIのstatesプロパティは、表示/非表示/collapse/extended/enabled/disabledなどの制御ができます

感想と結論:Ctoolsの依存(dependent)の設定、コーティングルールに統一性が足りなく、わかりずらいです

  • 依存性の設定定義にラジオボタンの特別扱いを認識しなければならない(最初は戸惑いがあるだろう)
  • これらの特別なコーティングルールを覚える必要があります
  • 要素特定にはjQueryを利用していない
  • 比較してみると、FormAPIの”#states”プロパティの使用で、より統一性があり、柔軟性のダイナミックフォーム作成ができます
添付 サイズ
ctools_dependent_test.zip (1.4 KB) 1.4 KB
Embedded thumbnail for Drupalのダイナミックフォーム1:モジュール(Ctools)のDependent Systemよりエレメントの表示/非表示
drupal
video
form

DrupalのFormAPIの"#states"プロパティの設定でダイナミックフォーム要素を制御します

  • Drupalのフォームに関する開発/カスタマイズの場合に、FormAPIがほぼ必須になる状態です
  • FormAPIにある様々のプロパティに"#states"が初心者にあまり気づかないかもしれないですが、ダイナミックフォームの要素制御に使用されます
  • 基本として、制御要素と制御される要素となります
    • 制御要素は:入力系要素(チェックボックス/ラジオボタン/セレクトボックス/テキストフィールドなど)
    • 制御される要素は:任意の要素の表示/非表示/有効化/無効化/Collapseなどの制御
  • "#states"プロパティの定義に、制御要素の識別はjQueryのセレクター(:input)が利用されています
    // "#"states" 定義の基本
    "#"states" => array(
      'visible' => array(
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        ...
      ),
    )
    
    // 例:チェックボックスがチェックされたときに要素が表示される
    "#"states" => array(
        'visible' => array(
            ':input[name="remote_checkbox"]' => array('checked' => TRUE),
        ),
    )

    FormAPIのstatesプロパティの使用

  • 今回のカスタムモジュール(formapi_states_example)は、前回のCtoolsのdependentの使用と同じようなフォーム要素を作成しました

制御要素の動き(empty/filled/chechedなど)を利用します

  • 制御要素がラジオボタン/チェックボックス/セレクトボックスがよく利用されますが、テキストフィールドなども利用することができます
        $form['select_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
        );
    
        $form['select_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'select',
            '#options' => array (
                'none'=>t('Select one'),
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
                'uncollapse'=>t('次の要素を開く'),
            ),
            '#default_value' => array('none'),
    
        );
        $form['select_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
            '#states' => array(
                // セレクトが「旅行」の場合にこのエレメントが表示される
                'visible' => array(':input[id="edit-restrict-by"]' => array('value'=>'trip')),
    
            ),
        );
        $form['select_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            '#states' => array(
                // セレクトが「カレンダー」の場合にこのエレメントが表示される
                'visible' => array(':input[name="restrict_by"]' => array('value'=>'month')),
            ),
        );
  • 使用可能な要素のプロパティ:
    • empty
    • filled
    • checked
    • unchecked
    • expanded
    • collapsed
    • value

制御される要素の動き(enabled/disabled/visible/invisibleなど)を定義することができます

  • 制御される要素の動きは表示/非表示がよく利用されます
  • ほかに様々の動き(collapse/extendedなど)の制御は可能です
     // フィールドセットの畳む/開く制御例
        $form['radio_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
            '#collapsible' => TRUE,
            '#collapsed' => TRUE,
            '#states' => array(
                'expanded' => array(':input[name="restrict_by"]' => array('value'=>'uncollapse')),
            ),
        );
    
  • 制御される要素の動き一覧は
    • enabled
    • disabled
    • required
    • optional
    • visible
    • invisible
    • checked
    • unchecked
    • expanded
    • collapsed

複数の制御条件(AND/OR)の設定が可能

  • 制御条件は複数にすることができます
  • 制御条件はANDの場合に以下のような構文
    // 二つのAND制御条件に
    array(
      'visible' => array(
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        ...
      ),
    )
    
    // 例:ニッカ所にチェックされた場合、要素が表示される
        $form['Checkbox_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Checkbox Set'),
            '#states' => array(
                'visible' => array(
                    ':input[name="radio_restrict_by"]' => array('value' => 'enable_next'),
                    ':input[id="edit-restrict-by"]' => array('value'=>'uncollapse')
                ),
            ),
        );
  • 制御条件はORの場合に以下のような構文
    // ORの複数条件で表示/非表示制御
    array(
      'visible' => array(
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        ...
      ),
      'visible' => array(
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        ...
      ),
    )
    
     // 例:ニッカ所のところに、一か所がチェックされたら、要素が表示される
        $form['Checkbox_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Checkbox Set'),
            '#states' => array(
                'visible' => array(
                    ':input[name="radio_restrict_by"]' => array('value' => 'enable_next'),
                ),
                'visible' => array(
                    ':input[id="edit-restrict-by"]' => array('value'=>'uncollapse')
                ),
            ),
        );

結論・感想:FormAPIの"#states"プロパティ制御条件の設定は分かりやすく、統一性があり、柔軟性が高いものです

  • 要素のプロパティ"#states"の定義/コーティングルールは比較的にシンプルで、わかりやすいです
  • 要素特、定などにはjQueryのセレクター(:input)が利用しているので、コーティングルールの統一感があります
  • 要素の動き制御は表示/非表示だけではなく、有効/無効/折りたたむなども制御可能で、より柔軟性があります
添付 サイズ
formapi_states_test.zip (1.45 KB) 1.45 KB
Embedded thumbnail for Drupalのダイナミックフォーム2:FormAPIのStatesプロパティよりエレメントの表示/非表示などの処理
drupal
ctools
form

Drupalのモジュール(Ctools)がAPIモジュールであり、幅広く使用されている

  • Drupalのモジュール(Ctools)がAPIモジュールなので、直接に利用するのではなく、いろいろなモジュールに使用されています
    • 例:Views、PanelsなどがCtoolsを利用しています
  • 主な機能は以下のようです(Drupalの中核な存在です)
    • Plugins
    • Exportables
    • AJAX responder
    • Form tools
    • Object caching
    • Contexts
    • Modal dialog
    • Dependent
    • Content
    • Form wizard
    • CSS tools

CtoolsのDependent(依存)がフォーム要素を表示/非表示されるダイナミックな変化に使用されます

  • ダイナミックフォーム: フォーム要素がある条件で表示、非表示を行います
    • 例:セレクトボックス:カレンダー、旅行 二つあります
    • 別の要素(例:セレクト/ラジオボタン/チェックボックス)で上記要素(カレンダー/旅行)の表示/非表示を制御します(ビデオを参考)CtoolsのDependent Systemでフォーム要素の表示/非表示を制御する
  • CtoolsがFormAPIにプロパティ("#dependency")をプラグインしています
        // 1. Include CTools Dependent helper
        ctools_include('dependent');
    
        $form['select_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
        );
    
        $form['select_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'select',
            '#options' => array (
                'none'=>t('Select one'),
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
            ),
            '#default_value' => array('none'),
    
        );
        $form['select_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
            // セレクトが「旅行」の場合にこのエレメントが表示される
            '#dependency' => array('edit-restrict-by' => array('trip')),
        );
        $form['select_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            // セレクトが「カレンダー」の場合にこのエレメントが表示される
            '#dependency' => array('edit-restrict-by' => array('month')),
        );
    
    • フォームの構成はDrupalのFormAPIに従っています
    • 制御される要素は"#dependency"プロパティで記述されています

Ctoolsの"#depencency"の要素識別方法にラジオボタンが特別に扱われています

  • 制御要素が先に定義します(例:セレクトボックス:(restrict_by)
  • 制御される要素が二つ:trip、month セレクトボックス
  • 制御される要素の"#dependency"設定より制御要素の状態で要素の表示/非表示がjavascriptで操作されます
  • "#dependency"の定義は配列で行います
    ”#dependency” => array( "依存先要素のID" => "依存先要素の状態" )
    • 例:依存先は「セレクトボックス」(restrict_by)とします
    • 依存先(restrict_by)のid(htmlソースにある要素id):edit-restrict-by
    • 依存先の状態: none/trip/month 三種類です。
    • trip、またはmonthが選ばれたら、旅行、またはカレンダーのセレクトボックスを表示させる(選ばれなかったら、表示させない)
  • 但し、制御要素がラジオボタン("radios")の場合に"依存先要素のID"書き方が変わります
    '#dependency' => array('radio:restrict_by' => array('trip')),
    // radio: 決まり文言
    // restrict_by: 要素ID
    • 特に、ラジオボタンの要素IDはhtml上の要素IDではありません。FormAPIで定義する要素のIDです
  • "依存先要素の状態"は要素の性質より変わります
    • ラジオボタン: FormAPIの"radios"での"#opetions"に選択された要素のキー:none/trip/month の一つ
      '#dependency' => array('edit-restrict-by' => array('month')),
    • セレクトボックス: FormAPIの"select"での"#opetions"に選択された要素のキー:none/trip/month の一つ
      '#dependency' => array('edit-restrict-by' => array('trip')),
    • チェックボックス: html上に各チェックボックスIDごとに、チェックされた(true:1)かチェックされていない(false:0)の一つ
      '#dependency' => array('edit-restrict-by-month--2' => array(true)),
  • 今回テスト(セレクトボックス/チェックボックス/ラジオボタン)したソースは以下のとなります
    function example_page($form, &$form_state){
    
        // 1. Include CTools Dependent helper
        ctools_include('dependent');
    
        $form['select_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
        );
    
        $form['select_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'select',
            '#options' => array (
                'none'=>t('Select one'),
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
            ),
            '#default_value' => array('none'),
    
        );
        $form['select_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
            // セレクトが「旅行」の場合にこのエレメントが表示される
            '#dependency' => array('edit-restrict-by' => array('trip')),
        );
        $form['select_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            // セレクトが「カレンダー」の場合にこのエレメントが表示される
            '#dependency' => array('edit-restrict-by' => array('month')),
        );
    
    
        $form['radio_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
        );
        $form['radio_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'radios',
            '#options' => array (
                'none'=>t('Select one'),
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
            ),
            '#default_value' => 'none',
    
        );
        $form['radio_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
            '#dependency' => array('radio:restrict_by' => array('trip')),
        );
    
        $form['radio_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            '#dependency' => array('radio:restrict_by' => array('month')),
        );
        $form['Checkbox_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Checkbox Set'),
        );
    
        $form['Checkbox_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'checkboxes',
            '#options' => array (
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
            ),
    
        );
    
        $form['Checkbox_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
    
            // チェックボックスのIDが変わったので注意が必要
            '#dependency' => array('edit-restrict-by-trip--2' => array(true)),
        );
    
        $form['Checkbox_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            '#dependency' => array('edit-restrict-by-month--2' => array(true)),
        );
    
    
        return $form;
    }
    

Ctoolsの依存(dependent)が表示/非表示制御のみ、FormAPIのstatesより制御範囲が狭いです

  • FormAPIに"#dependency"プロパティをプラグインは、表示/非表示のみとなります
  • FormAPIのstatesプロパティの制御と比較すると、制御できる範囲は狭いです
    • FormAPIのstatesプロパティは、表示/非表示/collapse/extended/enabled/disabledなどの制御ができます

感想と結論:Ctoolsの依存(dependent)の設定、コーティングルールに統一性が足りなく、わかりずらいです

  • 依存性の設定定義にラジオボタンの特別扱いを認識しなければならない(最初は戸惑いがあるだろう)
  • これらの特別なコーティングルールを覚える必要があります
  • 要素特定にはjQueryを利用していない
  • 比較してみると、FormAPIの”#states”プロパティの使用で、より統一性があり、柔軟性のダイナミックフォーム作成ができます
添付 サイズ
ctools_dependent_test.zip (1.4 KB) 1.4 KB
Embedded thumbnail for Drupalのダイナミックフォーム1:モジュール(Ctools)のDependent Systemよりエレメントの表示/非表示
drupal
video
form

DrupalのFormAPIの"#states"プロパティの設定でダイナミックフォーム要素を制御します

  • Drupalのフォームに関する開発/カスタマイズの場合に、FormAPIがほぼ必須になる状態です
  • FormAPIにある様々のプロパティに"#states"が初心者にあまり気づかないかもしれないですが、ダイナミックフォームの要素制御に使用されます
  • 基本として、制御要素と制御される要素となります
    • 制御要素は:入力系要素(チェックボックス/ラジオボタン/セレクトボックス/テキストフィールドなど)
    • 制御される要素は:任意の要素の表示/非表示/有効化/無効化/Collapseなどの制御
  • "#states"プロパティの定義に、制御要素の識別はjQueryのセレクター(:input)が利用されています
    // "#"states" 定義の基本
    "#"states" => array(
      'visible' => array(
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        ...
      ),
    )
    
    // 例:チェックボックスがチェックされたときに要素が表示される
    "#"states" => array(
        'visible' => array(
            ':input[name="remote_checkbox"]' => array('checked' => TRUE),
        ),
    )

    FormAPIのstatesプロパティの使用

  • 今回のカスタムモジュール(formapi_states_example)は、前回のCtoolsのdependentの使用と同じようなフォーム要素を作成しました

制御要素の動き(empty/filled/chechedなど)を利用します

  • 制御要素がラジオボタン/チェックボックス/セレクトボックスがよく利用されますが、テキストフィールドなども利用することができます
        $form['select_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
        );
    
        $form['select_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'select',
            '#options' => array (
                'none'=>t('Select one'),
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
                'uncollapse'=>t('次の要素を開く'),
            ),
            '#default_value' => array('none'),
    
        );
        $form['select_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
            '#states' => array(
                // セレクトが「旅行」の場合にこのエレメントが表示される
                'visible' => array(':input[id="edit-restrict-by"]' => array('value'=>'trip')),
    
            ),
        );
        $form['select_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            '#states' => array(
                // セレクトが「カレンダー」の場合にこのエレメントが表示される
                'visible' => array(':input[name="restrict_by"]' => array('value'=>'month')),
            ),
        );
  • 使用可能な要素のプロパティ:
    • empty
    • filled
    • checked
    • unchecked
    • expanded
    • collapsed
    • value

制御される要素の動き(enabled/disabled/visible/invisibleなど)を定義することができます

  • 制御される要素の動きは表示/非表示がよく利用されます
  • ほかに様々の動き(collapse/extendedなど)の制御は可能です
     // フィールドセットの畳む/開く制御例
        $form['radio_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
            '#collapsible' => TRUE,
            '#collapsed' => TRUE,
            '#states' => array(
                'expanded' => array(':input[name="restrict_by"]' => array('value'=>'uncollapse')),
            ),
        );
    
  • 制御される要素の動き一覧は
    • enabled
    • disabled
    • required
    • optional
    • visible
    • invisible
    • checked
    • unchecked
    • expanded
    • collapsed

複数の制御条件(AND/OR)の設定が可能

  • 制御条件は複数にすることができます
  • 制御条件はANDの場合に以下のような構文
    // 二つのAND制御条件に
    array(
      'visible' => array(
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        ...
      ),
    )
    
    // 例:ニッカ所にチェックされた場合、要素が表示される
        $form['Checkbox_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Checkbox Set'),
            '#states' => array(
                'visible' => array(
                    ':input[name="radio_restrict_by"]' => array('value' => 'enable_next'),
                    ':input[id="edit-restrict-by"]' => array('value'=>'uncollapse')
                ),
            ),
        );
  • 制御条件はORの場合に以下のような構文
    // ORの複数条件で表示/非表示制御
    array(
      'visible' => array(
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        ...
      ),
      'visible' => array(
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        ...
      ),
    )
    
     // 例:ニッカ所のところに、一か所がチェックされたら、要素が表示される
        $form['Checkbox_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Checkbox Set'),
            '#states' => array(
                'visible' => array(
                    ':input[name="radio_restrict_by"]' => array('value' => 'enable_next'),
                ),
                'visible' => array(
                    ':input[id="edit-restrict-by"]' => array('value'=>'uncollapse')
                ),
            ),
        );

結論・感想:FormAPIの"#states"プロパティ制御条件の設定は分かりやすく、統一性があり、柔軟性が高いものです

  • 要素のプロパティ"#states"の定義/コーティングルールは比較的にシンプルで、わかりやすいです
  • 要素特、定などにはjQueryのセレクター(:input)が利用しているので、コーティングルールの統一感があります
  • 要素の動き制御は表示/非表示だけではなく、有効/無効/折りたたむなども制御可能で、より柔軟性があります
添付 サイズ
formapi_states_test.zip (1.45 KB) 1.45 KB
Embedded thumbnail for Drupalのダイナミックフォーム2:FormAPIのStatesプロパティよりエレメントの表示/非表示などの処理
drupal
ctools
form

Drupalのモジュール(Ctools)がAPIモジュールであり、幅広く使用されている

  • Drupalのモジュール(Ctools)がAPIモジュールなので、直接に利用するのではなく、いろいろなモジュールに使用されています
    • 例:Views、PanelsなどがCtoolsを利用しています
  • 主な機能は以下のようです(Drupalの中核な存在です)
    • Plugins
    • Exportables
    • AJAX responder
    • Form tools
    • Object caching
    • Contexts
    • Modal dialog
    • Dependent
    • Content
    • Form wizard
    • CSS tools

CtoolsのDependent(依存)がフォーム要素を表示/非表示されるダイナミックな変化に使用されます

  • ダイナミックフォーム: フォーム要素がある条件で表示、非表示を行います
    • 例:セレクトボックス:カレンダー、旅行 二つあります
    • 別の要素(例:セレクト/ラジオボタン/チェックボックス)で上記要素(カレンダー/旅行)の表示/非表示を制御します(ビデオを参考)CtoolsのDependent Systemでフォーム要素の表示/非表示を制御する
  • CtoolsがFormAPIにプロパティ("#dependency")をプラグインしています
        // 1. Include CTools Dependent helper
        ctools_include('dependent');
    
        $form['select_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
        );
    
        $form['select_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'select',
            '#options' => array (
                'none'=>t('Select one'),
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
            ),
            '#default_value' => array('none'),
    
        );
        $form['select_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
            // セレクトが「旅行」の場合にこのエレメントが表示される
            '#dependency' => array('edit-restrict-by' => array('trip')),
        );
        $form['select_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            // セレクトが「カレンダー」の場合にこのエレメントが表示される
            '#dependency' => array('edit-restrict-by' => array('month')),
        );
    
    • フォームの構成はDrupalのFormAPIに従っています
    • 制御される要素は"#dependency"プロパティで記述されています

Ctoolsの"#depencency"の要素識別方法にラジオボタンが特別に扱われています

  • 制御要素が先に定義します(例:セレクトボックス:(restrict_by)
  • 制御される要素が二つ:trip、month セレクトボックス
  • 制御される要素の"#dependency"設定より制御要素の状態で要素の表示/非表示がjavascriptで操作されます
  • "#dependency"の定義は配列で行います
    ”#dependency” => array( "依存先要素のID" => "依存先要素の状態" )
    • 例:依存先は「セレクトボックス」(restrict_by)とします
    • 依存先(restrict_by)のid(htmlソースにある要素id):edit-restrict-by
    • 依存先の状態: none/trip/month 三種類です。
    • trip、またはmonthが選ばれたら、旅行、またはカレンダーのセレクトボックスを表示させる(選ばれなかったら、表示させない)
  • 但し、制御要素がラジオボタン("radios")の場合に"依存先要素のID"書き方が変わります
    '#dependency' => array('radio:restrict_by' => array('trip')),
    // radio: 決まり文言
    // restrict_by: 要素ID
    • 特に、ラジオボタンの要素IDはhtml上の要素IDではありません。FormAPIで定義する要素のIDです
  • "依存先要素の状態"は要素の性質より変わります
    • ラジオボタン: FormAPIの"radios"での"#opetions"に選択された要素のキー:none/trip/month の一つ
      '#dependency' => array('edit-restrict-by' => array('month')),
    • セレクトボックス: FormAPIの"select"での"#opetions"に選択された要素のキー:none/trip/month の一つ
      '#dependency' => array('edit-restrict-by' => array('trip')),
    • チェックボックス: html上に各チェックボックスIDごとに、チェックされた(true:1)かチェックされていない(false:0)の一つ
      '#dependency' => array('edit-restrict-by-month--2' => array(true)),
  • 今回テスト(セレクトボックス/チェックボックス/ラジオボタン)したソースは以下のとなります
    function example_page($form, &$form_state){
    
        // 1. Include CTools Dependent helper
        ctools_include('dependent');
    
        $form['select_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
        );
    
        $form['select_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'select',
            '#options' => array (
                'none'=>t('Select one'),
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
            ),
            '#default_value' => array('none'),
    
        );
        $form['select_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
            // セレクトが「旅行」の場合にこのエレメントが表示される
            '#dependency' => array('edit-restrict-by' => array('trip')),
        );
        $form['select_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            // セレクトが「カレンダー」の場合にこのエレメントが表示される
            '#dependency' => array('edit-restrict-by' => array('month')),
        );
    
    
        $form['radio_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
        );
        $form['radio_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'radios',
            '#options' => array (
                'none'=>t('Select one'),
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
            ),
            '#default_value' => 'none',
    
        );
        $form['radio_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
            '#dependency' => array('radio:restrict_by' => array('trip')),
        );
    
        $form['radio_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            '#dependency' => array('radio:restrict_by' => array('month')),
        );
        $form['Checkbox_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Checkbox Set'),
        );
    
        $form['Checkbox_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'checkboxes',
            '#options' => array (
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
            ),
    
        );
    
        $form['Checkbox_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
    
            // チェックボックスのIDが変わったので注意が必要
            '#dependency' => array('edit-restrict-by-trip--2' => array(true)),
        );
    
        $form['Checkbox_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            '#dependency' => array('edit-restrict-by-month--2' => array(true)),
        );
    
    
        return $form;
    }
    

Ctoolsの依存(dependent)が表示/非表示制御のみ、FormAPIのstatesより制御範囲が狭いです

  • FormAPIに"#dependency"プロパティをプラグインは、表示/非表示のみとなります
  • FormAPIのstatesプロパティの制御と比較すると、制御できる範囲は狭いです
    • FormAPIのstatesプロパティは、表示/非表示/collapse/extended/enabled/disabledなどの制御ができます

感想と結論:Ctoolsの依存(dependent)の設定、コーティングルールに統一性が足りなく、わかりずらいです

  • 依存性の設定定義にラジオボタンの特別扱いを認識しなければならない(最初は戸惑いがあるだろう)
  • これらの特別なコーティングルールを覚える必要があります
  • 要素特定にはjQueryを利用していない
  • 比較してみると、FormAPIの”#states”プロパティの使用で、より統一性があり、柔軟性のダイナミックフォーム作成ができます
添付 サイズ
ctools_dependent_test.zip (1.4 KB) 1.4 KB
Embedded thumbnail for Drupalのダイナミックフォーム1:モジュール(Ctools)のDependent Systemよりエレメントの表示/非表示
drupal
video
form

DrupalのFormAPIの"#states"プロパティの設定でダイナミックフォーム要素を制御します

  • Drupalのフォームに関する開発/カスタマイズの場合に、FormAPIがほぼ必須になる状態です
  • FormAPIにある様々のプロパティに"#states"が初心者にあまり気づかないかもしれないですが、ダイナミックフォームの要素制御に使用されます
  • 基本として、制御要素と制御される要素となります
    • 制御要素は:入力系要素(チェックボックス/ラジオボタン/セレクトボックス/テキストフィールドなど)
    • 制御される要素は:任意の要素の表示/非表示/有効化/無効化/Collapseなどの制御
  • "#states"プロパティの定義に、制御要素の識別はjQueryのセレクター(:input)が利用されています
    // "#"states" 定義の基本
    "#"states" => array(
      'visible' => array(
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        ...
      ),
    )
    
    // 例:チェックボックスがチェックされたときに要素が表示される
    "#"states" => array(
        'visible' => array(
            ':input[name="remote_checkbox"]' => array('checked' => TRUE),
        ),
    )

    FormAPIのstatesプロパティの使用

  • 今回のカスタムモジュール(formapi_states_example)は、前回のCtoolsのdependentの使用と同じようなフォーム要素を作成しました

制御要素の動き(empty/filled/chechedなど)を利用します

  • 制御要素がラジオボタン/チェックボックス/セレクトボックスがよく利用されますが、テキストフィールドなども利用することができます
        $form['select_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
        );
    
        $form['select_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'select',
            '#options' => array (
                'none'=>t('Select one'),
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
                'uncollapse'=>t('次の要素を開く'),
            ),
            '#default_value' => array('none'),
    
        );
        $form['select_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
            '#states' => array(
                // セレクトが「旅行」の場合にこのエレメントが表示される
                'visible' => array(':input[id="edit-restrict-by"]' => array('value'=>'trip')),
    
            ),
        );
        $form['select_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            '#states' => array(
                // セレクトが「カレンダー」の場合にこのエレメントが表示される
                'visible' => array(':input[name="restrict_by"]' => array('value'=>'month')),
            ),
        );
  • 使用可能な要素のプロパティ:
    • empty
    • filled
    • checked
    • unchecked
    • expanded
    • collapsed
    • value

制御される要素の動き(enabled/disabled/visible/invisibleなど)を定義することができます

  • 制御される要素の動きは表示/非表示がよく利用されます
  • ほかに様々の動き(collapse/extendedなど)の制御は可能です
     // フィールドセットの畳む/開く制御例
        $form['radio_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
            '#collapsible' => TRUE,
            '#collapsed' => TRUE,
            '#states' => array(
                'expanded' => array(':input[name="restrict_by"]' => array('value'=>'uncollapse')),
            ),
        );
    
  • 制御される要素の動き一覧は
    • enabled
    • disabled
    • required
    • optional
    • visible
    • invisible
    • checked
    • unchecked
    • expanded
    • collapsed

複数の制御条件(AND/OR)の設定が可能

  • 制御条件は複数にすることができます
  • 制御条件はANDの場合に以下のような構文
    // 二つのAND制御条件に
    array(
      'visible' => array(
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        ...
      ),
    )
    
    // 例:ニッカ所にチェックされた場合、要素が表示される
        $form['Checkbox_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Checkbox Set'),
            '#states' => array(
                'visible' => array(
                    ':input[name="radio_restrict_by"]' => array('value' => 'enable_next'),
                    ':input[id="edit-restrict-by"]' => array('value'=>'uncollapse')
                ),
            ),
        );
  • 制御条件はORの場合に以下のような構文
    // ORの複数条件で表示/非表示制御
    array(
      'visible' => array(
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        ...
      ),
      'visible' => array(
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        ...
      ),
    )
    
     // 例:ニッカ所のところに、一か所がチェックされたら、要素が表示される
        $form['Checkbox_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Checkbox Set'),
            '#states' => array(
                'visible' => array(
                    ':input[name="radio_restrict_by"]' => array('value' => 'enable_next'),
                ),
                'visible' => array(
                    ':input[id="edit-restrict-by"]' => array('value'=>'uncollapse')
                ),
            ),
        );

結論・感想:FormAPIの"#states"プロパティ制御条件の設定は分かりやすく、統一性があり、柔軟性が高いものです

  • 要素のプロパティ"#states"の定義/コーティングルールは比較的にシンプルで、わかりやすいです
  • 要素特、定などにはjQueryのセレクター(:input)が利用しているので、コーティングルールの統一感があります
  • 要素の動き制御は表示/非表示だけではなく、有効/無効/折りたたむなども制御可能で、より柔軟性があります
添付 サイズ
formapi_states_test.zip (1.45 KB) 1.45 KB
Embedded thumbnail for Drupalのダイナミックフォーム2:FormAPIのStatesプロパティよりエレメントの表示/非表示などの処理
drupal
ctools
form

Drupalのモジュール(Ctools)がAPIモジュールであり、幅広く使用されている

  • Drupalのモジュール(Ctools)がAPIモジュールなので、直接に利用するのではなく、いろいろなモジュールに使用されています
    • 例:Views、PanelsなどがCtoolsを利用しています
  • 主な機能は以下のようです(Drupalの中核な存在です)
    • Plugins
    • Exportables
    • AJAX responder
    • Form tools
    • Object caching
    • Contexts
    • Modal dialog
    • Dependent
    • Content
    • Form wizard
    • CSS tools

CtoolsのDependent(依存)がフォーム要素を表示/非表示されるダイナミックな変化に使用されます

  • ダイナミックフォーム: フォーム要素がある条件で表示、非表示を行います
    • 例:セレクトボックス:カレンダー、旅行 二つあります
    • 別の要素(例:セレクト/ラジオボタン/チェックボックス)で上記要素(カレンダー/旅行)の表示/非表示を制御します(ビデオを参考)CtoolsのDependent Systemでフォーム要素の表示/非表示を制御する
  • CtoolsがFormAPIにプロパティ("#dependency")をプラグインしています
        // 1. Include CTools Dependent helper
        ctools_include('dependent');
    
        $form['select_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
        );
    
        $form['select_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'select',
            '#options' => array (
                'none'=>t('Select one'),
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
            ),
            '#default_value' => array('none'),
    
        );
        $form['select_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
            // セレクトが「旅行」の場合にこのエレメントが表示される
            '#dependency' => array('edit-restrict-by' => array('trip')),
        );
        $form['select_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            // セレクトが「カレンダー」の場合にこのエレメントが表示される
            '#dependency' => array('edit-restrict-by' => array('month')),
        );
    
    • フォームの構成はDrupalのFormAPIに従っています
    • 制御される要素は"#dependency"プロパティで記述されています

Ctoolsの"#depencency"の要素識別方法にラジオボタンが特別に扱われています

  • 制御要素が先に定義します(例:セレクトボックス:(restrict_by)
  • 制御される要素が二つ:trip、month セレクトボックス
  • 制御される要素の"#dependency"設定より制御要素の状態で要素の表示/非表示がjavascriptで操作されます
  • "#dependency"の定義は配列で行います
    ”#dependency” => array( "依存先要素のID" => "依存先要素の状態" )
    • 例:依存先は「セレクトボックス」(restrict_by)とします
    • 依存先(restrict_by)のid(htmlソースにある要素id):edit-restrict-by
    • 依存先の状態: none/trip/month 三種類です。
    • trip、またはmonthが選ばれたら、旅行、またはカレンダーのセレクトボックスを表示させる(選ばれなかったら、表示させない)
  • 但し、制御要素がラジオボタン("radios")の場合に"依存先要素のID"書き方が変わります
    '#dependency' => array('radio:restrict_by' => array('trip')),
    // radio: 決まり文言
    // restrict_by: 要素ID
    • 特に、ラジオボタンの要素IDはhtml上の要素IDではありません。FormAPIで定義する要素のIDです
  • "依存先要素の状態"は要素の性質より変わります
    • ラジオボタン: FormAPIの"radios"での"#opetions"に選択された要素のキー:none/trip/month の一つ
      '#dependency' => array('edit-restrict-by' => array('month')),
    • セレクトボックス: FormAPIの"select"での"#opetions"に選択された要素のキー:none/trip/month の一つ
      '#dependency' => array('edit-restrict-by' => array('trip')),
    • チェックボックス: html上に各チェックボックスIDごとに、チェックされた(true:1)かチェックされていない(false:0)の一つ
      '#dependency' => array('edit-restrict-by-month--2' => array(true)),
  • 今回テスト(セレクトボックス/チェックボックス/ラジオボタン)したソースは以下のとなります
    function example_page($form, &$form_state){
    
        // 1. Include CTools Dependent helper
        ctools_include('dependent');
    
        $form['select_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
        );
    
        $form['select_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'select',
            '#options' => array (
                'none'=>t('Select one'),
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
            ),
            '#default_value' => array('none'),
    
        );
        $form['select_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
            // セレクトが「旅行」の場合にこのエレメントが表示される
            '#dependency' => array('edit-restrict-by' => array('trip')),
        );
        $form['select_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            // セレクトが「カレンダー」の場合にこのエレメントが表示される
            '#dependency' => array('edit-restrict-by' => array('month')),
        );
    
    
        $form['radio_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
        );
        $form['radio_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'radios',
            '#options' => array (
                'none'=>t('Select one'),
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
            ),
            '#default_value' => 'none',
    
        );
        $form['radio_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
            '#dependency' => array('radio:restrict_by' => array('trip')),
        );
    
        $form['radio_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            '#dependency' => array('radio:restrict_by' => array('month')),
        );
        $form['Checkbox_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Checkbox Set'),
        );
    
        $form['Checkbox_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'checkboxes',
            '#options' => array (
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
            ),
    
        );
    
        $form['Checkbox_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
    
            // チェックボックスのIDが変わったので注意が必要
            '#dependency' => array('edit-restrict-by-trip--2' => array(true)),
        );
    
        $form['Checkbox_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            '#dependency' => array('edit-restrict-by-month--2' => array(true)),
        );
    
    
        return $form;
    }
    

Ctoolsの依存(dependent)が表示/非表示制御のみ、FormAPIのstatesより制御範囲が狭いです

  • FormAPIに"#dependency"プロパティをプラグインは、表示/非表示のみとなります
  • FormAPIのstatesプロパティの制御と比較すると、制御できる範囲は狭いです
    • FormAPIのstatesプロパティは、表示/非表示/collapse/extended/enabled/disabledなどの制御ができます

感想と結論:Ctoolsの依存(dependent)の設定、コーティングルールに統一性が足りなく、わかりずらいです

  • 依存性の設定定義にラジオボタンの特別扱いを認識しなければならない(最初は戸惑いがあるだろう)
  • これらの特別なコーティングルールを覚える必要があります
  • 要素特定にはjQueryを利用していない
  • 比較してみると、FormAPIの”#states”プロパティの使用で、より統一性があり、柔軟性のダイナミックフォーム作成ができます
添付 サイズ
ctools_dependent_test.zip (1.4 KB) 1.4 KB
Embedded thumbnail for Drupalのダイナミックフォーム1:モジュール(Ctools)のDependent Systemよりエレメントの表示/非表示
drupal
video
form

DrupalのFormAPIの"#states"プロパティの設定でダイナミックフォーム要素を制御します

  • Drupalのフォームに関する開発/カスタマイズの場合に、FormAPIがほぼ必須になる状態です
  • FormAPIにある様々のプロパティに"#states"が初心者にあまり気づかないかもしれないですが、ダイナミックフォームの要素制御に使用されます
  • 基本として、制御要素と制御される要素となります
    • 制御要素は:入力系要素(チェックボックス/ラジオボタン/セレクトボックス/テキストフィールドなど)
    • 制御される要素は:任意の要素の表示/非表示/有効化/無効化/Collapseなどの制御
  • "#states"プロパティの定義に、制御要素の識別はjQueryのセレクター(:input)が利用されています
    // "#"states" 定義の基本
    "#"states" => array(
      'visible' => array(
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        ...
      ),
    )
    
    // 例:チェックボックスがチェックされたときに要素が表示される
    "#"states" => array(
        'visible' => array(
            ':input[name="remote_checkbox"]' => array('checked' => TRUE),
        ),
    )

    FormAPIのstatesプロパティの使用

  • 今回のカスタムモジュール(formapi_states_example)は、前回のCtoolsのdependentの使用と同じようなフォーム要素を作成しました

制御要素の動き(empty/filled/chechedなど)を利用します

  • 制御要素がラジオボタン/チェックボックス/セレクトボックスがよく利用されますが、テキストフィールドなども利用することができます
        $form['select_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
        );
    
        $form['select_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'select',
            '#options' => array (
                'none'=>t('Select one'),
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
                'uncollapse'=>t('次の要素を開く'),
            ),
            '#default_value' => array('none'),
    
        );
        $form['select_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
            '#states' => array(
                // セレクトが「旅行」の場合にこのエレメントが表示される
                'visible' => array(':input[id="edit-restrict-by"]' => array('value'=>'trip')),
    
            ),
        );
        $form['select_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            '#states' => array(
                // セレクトが「カレンダー」の場合にこのエレメントが表示される
                'visible' => array(':input[name="restrict_by"]' => array('value'=>'month')),
            ),
        );
  • 使用可能な要素のプロパティ:
    • empty
    • filled
    • checked
    • unchecked
    • expanded
    • collapsed
    • value

制御される要素の動き(enabled/disabled/visible/invisibleなど)を定義することができます

  • 制御される要素の動きは表示/非表示がよく利用されます
  • ほかに様々の動き(collapse/extendedなど)の制御は可能です
     // フィールドセットの畳む/開く制御例
        $form['radio_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
            '#collapsible' => TRUE,
            '#collapsed' => TRUE,
            '#states' => array(
                'expanded' => array(':input[name="restrict_by"]' => array('value'=>'uncollapse')),
            ),
        );
    
  • 制御される要素の動き一覧は
    • enabled
    • disabled
    • required
    • optional
    • visible
    • invisible
    • checked
    • unchecked
    • expanded
    • collapsed

複数の制御条件(AND/OR)の設定が可能

  • 制御条件は複数にすることができます
  • 制御条件はANDの場合に以下のような構文
    // 二つのAND制御条件に
    array(
      'visible' => array(
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        ...
      ),
    )
    
    // 例:ニッカ所にチェックされた場合、要素が表示される
        $form['Checkbox_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Checkbox Set'),
            '#states' => array(
                'visible' => array(
                    ':input[name="radio_restrict_by"]' => array('value' => 'enable_next'),
                    ':input[id="edit-restrict-by"]' => array('value'=>'uncollapse')
                ),
            ),
        );
  • 制御条件はORの場合に以下のような構文
    // ORの複数条件で表示/非表示制御
    array(
      'visible' => array(
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        ...
      ),
      'visible' => array(
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        ...
      ),
    )
    
     // 例:ニッカ所のところに、一か所がチェックされたら、要素が表示される
        $form['Checkbox_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Checkbox Set'),
            '#states' => array(
                'visible' => array(
                    ':input[name="radio_restrict_by"]' => array('value' => 'enable_next'),
                ),
                'visible' => array(
                    ':input[id="edit-restrict-by"]' => array('value'=>'uncollapse')
                ),
            ),
        );

結論・感想:FormAPIの"#states"プロパティ制御条件の設定は分かりやすく、統一性があり、柔軟性が高いものです

  • 要素のプロパティ"#states"の定義/コーティングルールは比較的にシンプルで、わかりやすいです
  • 要素特、定などにはjQueryのセレクター(:input)が利用しているので、コーティングルールの統一感があります
  • 要素の動き制御は表示/非表示だけではなく、有効/無効/折りたたむなども制御可能で、より柔軟性があります
添付 サイズ
formapi_states_test.zip (1.45 KB) 1.45 KB
Embedded thumbnail for Drupalのダイナミックフォーム2:FormAPIのStatesプロパティよりエレメントの表示/非表示などの処理
drupal
ctools
form

Drupalのモジュール(Ctools)がAPIモジュールであり、幅広く使用されている

  • Drupalのモジュール(Ctools)がAPIモジュールなので、直接に利用するのではなく、いろいろなモジュールに使用されています
    • 例:Views、PanelsなどがCtoolsを利用しています
  • 主な機能は以下のようです(Drupalの中核な存在です)
    • Plugins
    • Exportables
    • AJAX responder
    • Form tools
    • Object caching
    • Contexts
    • Modal dialog
    • Dependent
    • Content
    • Form wizard
    • CSS tools

CtoolsのDependent(依存)がフォーム要素を表示/非表示されるダイナミックな変化に使用されます

  • ダイナミックフォーム: フォーム要素がある条件で表示、非表示を行います
    • 例:セレクトボックス:カレンダー、旅行 二つあります
    • 別の要素(例:セレクト/ラジオボタン/チェックボックス)で上記要素(カレンダー/旅行)の表示/非表示を制御します(ビデオを参考)CtoolsのDependent Systemでフォーム要素の表示/非表示を制御する
  • CtoolsがFormAPIにプロパティ("#dependency")をプラグインしています
        // 1. Include CTools Dependent helper
        ctools_include('dependent');
    
        $form['select_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
        );
    
        $form['select_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'select',
            '#options' => array (
                'none'=>t('Select one'),
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
            ),
            '#default_value' => array('none'),
    
        );
        $form['select_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
            // セレクトが「旅行」の場合にこのエレメントが表示される
            '#dependency' => array('edit-restrict-by' => array('trip')),
        );
        $form['select_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            // セレクトが「カレンダー」の場合にこのエレメントが表示される
            '#dependency' => array('edit-restrict-by' => array('month')),
        );
    
    • フォームの構成はDrupalのFormAPIに従っています
    • 制御される要素は"#dependency"プロパティで記述されています

Ctoolsの"#depencency"の要素識別方法にラジオボタンが特別に扱われています

  • 制御要素が先に定義します(例:セレクトボックス:(restrict_by)
  • 制御される要素が二つ:trip、month セレクトボックス
  • 制御される要素の"#dependency"設定より制御要素の状態で要素の表示/非表示がjavascriptで操作されます
  • "#dependency"の定義は配列で行います
    ”#dependency” => array( "依存先要素のID" => "依存先要素の状態" )
    • 例:依存先は「セレクトボックス」(restrict_by)とします
    • 依存先(restrict_by)のid(htmlソースにある要素id):edit-restrict-by
    • 依存先の状態: none/trip/month 三種類です。
    • trip、またはmonthが選ばれたら、旅行、またはカレンダーのセレクトボックスを表示させる(選ばれなかったら、表示させない)
  • 但し、制御要素がラジオボタン("radios")の場合に"依存先要素のID"書き方が変わります
    '#dependency' => array('radio:restrict_by' => array('trip')),
    // radio: 決まり文言
    // restrict_by: 要素ID
    • 特に、ラジオボタンの要素IDはhtml上の要素IDではありません。FormAPIで定義する要素のIDです
  • "依存先要素の状態"は要素の性質より変わります
    • ラジオボタン: FormAPIの"radios"での"#opetions"に選択された要素のキー:none/trip/month の一つ
      '#dependency' => array('edit-restrict-by' => array('month')),
    • セレクトボックス: FormAPIの"select"での"#opetions"に選択された要素のキー:none/trip/month の一つ
      '#dependency' => array('edit-restrict-by' => array('trip')),
    • チェックボックス: html上に各チェックボックスIDごとに、チェックされた(true:1)かチェックされていない(false:0)の一つ
      '#dependency' => array('edit-restrict-by-month--2' => array(true)),
  • 今回テスト(セレクトボックス/チェックボックス/ラジオボタン)したソースは以下のとなります
    function example_page($form, &$form_state){
    
        // 1. Include CTools Dependent helper
        ctools_include('dependent');
    
        $form['select_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
        );
    
        $form['select_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'select',
            '#options' => array (
                'none'=>t('Select one'),
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
            ),
            '#default_value' => array('none'),
    
        );
        $form['select_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
            // セレクトが「旅行」の場合にこのエレメントが表示される
            '#dependency' => array('edit-restrict-by' => array('trip')),
        );
        $form['select_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            // セレクトが「カレンダー」の場合にこのエレメントが表示される
            '#dependency' => array('edit-restrict-by' => array('month')),
        );
    
    
        $form['radio_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
        );
        $form['radio_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'radios',
            '#options' => array (
                'none'=>t('Select one'),
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
            ),
            '#default_value' => 'none',
    
        );
        $form['radio_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
            '#dependency' => array('radio:restrict_by' => array('trip')),
        );
    
        $form['radio_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            '#dependency' => array('radio:restrict_by' => array('month')),
        );
        $form['Checkbox_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Checkbox Set'),
        );
    
        $form['Checkbox_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'checkboxes',
            '#options' => array (
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
            ),
    
        );
    
        $form['Checkbox_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
    
            // チェックボックスのIDが変わったので注意が必要
            '#dependency' => array('edit-restrict-by-trip--2' => array(true)),
        );
    
        $form['Checkbox_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            '#dependency' => array('edit-restrict-by-month--2' => array(true)),
        );
    
    
        return $form;
    }
    

Ctoolsの依存(dependent)が表示/非表示制御のみ、FormAPIのstatesより制御範囲が狭いです

  • FormAPIに"#dependency"プロパティをプラグインは、表示/非表示のみとなります
  • FormAPIのstatesプロパティの制御と比較すると、制御できる範囲は狭いです
    • FormAPIのstatesプロパティは、表示/非表示/collapse/extended/enabled/disabledなどの制御ができます

感想と結論:Ctoolsの依存(dependent)の設定、コーティングルールに統一性が足りなく、わかりずらいです

  • 依存性の設定定義にラジオボタンの特別扱いを認識しなければならない(最初は戸惑いがあるだろう)
  • これらの特別なコーティングルールを覚える必要があります
  • 要素特定にはjQueryを利用していない
  • 比較してみると、FormAPIの”#states”プロパティの使用で、より統一性があり、柔軟性のダイナミックフォーム作成ができます
添付 サイズ
ctools_dependent_test.zip (1.4 KB) 1.4 KB
Embedded thumbnail for Drupalのダイナミックフォーム1:モジュール(Ctools)のDependent Systemよりエレメントの表示/非表示
drupal
video
form

DrupalのFormAPIの"#states"プロパティの設定でダイナミックフォーム要素を制御します

  • Drupalのフォームに関する開発/カスタマイズの場合に、FormAPIがほぼ必須になる状態です
  • FormAPIにある様々のプロパティに"#states"が初心者にあまり気づかないかもしれないですが、ダイナミックフォームの要素制御に使用されます
  • 基本として、制御要素と制御される要素となります
    • 制御要素は:入力系要素(チェックボックス/ラジオボタン/セレクトボックス/テキストフィールドなど)
    • 制御される要素は:任意の要素の表示/非表示/有効化/無効化/Collapseなどの制御
  • "#states"プロパティの定義に、制御要素の識別はjQueryのセレクター(:input)が利用されています
    // "#"states" 定義の基本
    "#"states" => array(
      'visible' => array(
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        ...
      ),
    )
    
    // 例:チェックボックスがチェックされたときに要素が表示される
    "#"states" => array(
        'visible' => array(
            ':input[name="remote_checkbox"]' => array('checked' => TRUE),
        ),
    )

    FormAPIのstatesプロパティの使用

  • 今回のカスタムモジュール(formapi_states_example)は、前回のCtoolsのdependentの使用と同じようなフォーム要素を作成しました

制御要素の動き(empty/filled/chechedなど)を利用します

  • 制御要素がラジオボタン/チェックボックス/セレクトボックスがよく利用されますが、テキストフィールドなども利用することができます
        $form['select_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
        );
    
        $form['select_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'select',
            '#options' => array (
                'none'=>t('Select one'),
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
                'uncollapse'=>t('次の要素を開く'),
            ),
            '#default_value' => array('none'),
    
        );
        $form['select_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
            '#states' => array(
                // セレクトが「旅行」の場合にこのエレメントが表示される
                'visible' => array(':input[id="edit-restrict-by"]' => array('value'=>'trip')),
    
            ),
        );
        $form['select_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            '#states' => array(
                // セレクトが「カレンダー」の場合にこのエレメントが表示される
                'visible' => array(':input[name="restrict_by"]' => array('value'=>'month')),
            ),
        );
  • 使用可能な要素のプロパティ:
    • empty
    • filled
    • checked
    • unchecked
    • expanded
    • collapsed
    • value

制御される要素の動き(enabled/disabled/visible/invisibleなど)を定義することができます

  • 制御される要素の動きは表示/非表示がよく利用されます
  • ほかに様々の動き(collapse/extendedなど)の制御は可能です
     // フィールドセットの畳む/開く制御例
        $form['radio_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
            '#collapsible' => TRUE,
            '#collapsed' => TRUE,
            '#states' => array(
                'expanded' => array(':input[name="restrict_by"]' => array('value'=>'uncollapse')),
            ),
        );
    
  • 制御される要素の動き一覧は
    • enabled
    • disabled
    • required
    • optional
    • visible
    • invisible
    • checked
    • unchecked
    • expanded
    • collapsed

複数の制御条件(AND/OR)の設定が可能

  • 制御条件は複数にすることができます
  • 制御条件はANDの場合に以下のような構文
    // 二つのAND制御条件に
    array(
      'visible' => array(
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        ...
      ),
    )
    
    // 例:ニッカ所にチェックされた場合、要素が表示される
        $form['Checkbox_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Checkbox Set'),
            '#states' => array(
                'visible' => array(
                    ':input[name="radio_restrict_by"]' => array('value' => 'enable_next'),
                    ':input[id="edit-restrict-by"]' => array('value'=>'uncollapse')
                ),
            ),
        );
  • 制御条件はORの場合に以下のような構文
    // ORの複数条件で表示/非表示制御
    array(
      'visible' => array(
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        ...
      ),
      'visible' => array(
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        ...
      ),
    )
    
     // 例:ニッカ所のところに、一か所がチェックされたら、要素が表示される
        $form['Checkbox_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Checkbox Set'),
            '#states' => array(
                'visible' => array(
                    ':input[name="radio_restrict_by"]' => array('value' => 'enable_next'),
                ),
                'visible' => array(
                    ':input[id="edit-restrict-by"]' => array('value'=>'uncollapse')
                ),
            ),
        );

結論・感想:FormAPIの"#states"プロパティ制御条件の設定は分かりやすく、統一性があり、柔軟性が高いものです

  • 要素のプロパティ"#states"の定義/コーティングルールは比較的にシンプルで、わかりやすいです
  • 要素特、定などにはjQueryのセレクター(:input)が利用しているので、コーティングルールの統一感があります
  • 要素の動き制御は表示/非表示だけではなく、有効/無効/折りたたむなども制御可能で、より柔軟性があります
添付 サイズ
formapi_states_test.zip (1.45 KB) 1.45 KB
Embedded thumbnail for Drupalのダイナミックフォーム2:FormAPIのStatesプロパティよりエレメントの表示/非表示などの処理
drupal
ctools
form

Drupalのモジュール(Ctools)がAPIモジュールであり、幅広く使用されている

  • Drupalのモジュール(Ctools)がAPIモジュールなので、直接に利用するのではなく、いろいろなモジュールに使用されています
    • 例:Views、PanelsなどがCtoolsを利用しています
  • 主な機能は以下のようです(Drupalの中核な存在です)
    • Plugins
    • Exportables
    • AJAX responder
    • Form tools
    • Object caching
    • Contexts
    • Modal dialog
    • Dependent
    • Content
    • Form wizard
    • CSS tools

CtoolsのDependent(依存)がフォーム要素を表示/非表示されるダイナミックな変化に使用されます

  • ダイナミックフォーム: フォーム要素がある条件で表示、非表示を行います
    • 例:セレクトボックス:カレンダー、旅行 二つあります
    • 別の要素(例:セレクト/ラジオボタン/チェックボックス)で上記要素(カレンダー/旅行)の表示/非表示を制御します(ビデオを参考)CtoolsのDependent Systemでフォーム要素の表示/非表示を制御する
  • CtoolsがFormAPIにプロパティ("#dependency")をプラグインしています
        // 1. Include CTools Dependent helper
        ctools_include('dependent');
    
        $form['select_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
        );
    
        $form['select_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'select',
            '#options' => array (
                'none'=>t('Select one'),
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
            ),
            '#default_value' => array('none'),
    
        );
        $form['select_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
            // セレクトが「旅行」の場合にこのエレメントが表示される
            '#dependency' => array('edit-restrict-by' => array('trip')),
        );
        $form['select_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            // セレクトが「カレンダー」の場合にこのエレメントが表示される
            '#dependency' => array('edit-restrict-by' => array('month')),
        );
    
    • フォームの構成はDrupalのFormAPIに従っています
    • 制御される要素は"#dependency"プロパティで記述されています

Ctoolsの"#depencency"の要素識別方法にラジオボタンが特別に扱われています

  • 制御要素が先に定義します(例:セレクトボックス:(restrict_by)
  • 制御される要素が二つ:trip、month セレクトボックス
  • 制御される要素の"#dependency"設定より制御要素の状態で要素の表示/非表示がjavascriptで操作されます
  • "#dependency"の定義は配列で行います
    ”#dependency” => array( "依存先要素のID" => "依存先要素の状態" )
    • 例:依存先は「セレクトボックス」(restrict_by)とします
    • 依存先(restrict_by)のid(htmlソースにある要素id):edit-restrict-by
    • 依存先の状態: none/trip/month 三種類です。
    • trip、またはmonthが選ばれたら、旅行、またはカレンダーのセレクトボックスを表示させる(選ばれなかったら、表示させない)
  • 但し、制御要素がラジオボタン("radios")の場合に"依存先要素のID"書き方が変わります
    '#dependency' => array('radio:restrict_by' => array('trip')),
    // radio: 決まり文言
    // restrict_by: 要素ID
    • 特に、ラジオボタンの要素IDはhtml上の要素IDではありません。FormAPIで定義する要素のIDです
  • "依存先要素の状態"は要素の性質より変わります
    • ラジオボタン: FormAPIの"radios"での"#opetions"に選択された要素のキー:none/trip/month の一つ
      '#dependency' => array('edit-restrict-by' => array('month')),
    • セレクトボックス: FormAPIの"select"での"#opetions"に選択された要素のキー:none/trip/month の一つ
      '#dependency' => array('edit-restrict-by' => array('trip')),
    • チェックボックス: html上に各チェックボックスIDごとに、チェックされた(true:1)かチェックされていない(false:0)の一つ
      '#dependency' => array('edit-restrict-by-month--2' => array(true)),
  • 今回テスト(セレクトボックス/チェックボックス/ラジオボタン)したソースは以下のとなります
    function example_page($form, &$form_state){
    
        // 1. Include CTools Dependent helper
        ctools_include('dependent');
    
        $form['select_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
        );
    
        $form['select_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'select',
            '#options' => array (
                'none'=>t('Select one'),
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
            ),
            '#default_value' => array('none'),
    
        );
        $form['select_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
            // セレクトが「旅行」の場合にこのエレメントが表示される
            '#dependency' => array('edit-restrict-by' => array('trip')),
        );
        $form['select_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            // セレクトが「カレンダー」の場合にこのエレメントが表示される
            '#dependency' => array('edit-restrict-by' => array('month')),
        );
    
    
        $form['radio_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
        );
        $form['radio_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'radios',
            '#options' => array (
                'none'=>t('Select one'),
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
            ),
            '#default_value' => 'none',
    
        );
        $form['radio_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
            '#dependency' => array('radio:restrict_by' => array('trip')),
        );
    
        $form['radio_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            '#dependency' => array('radio:restrict_by' => array('month')),
        );
        $form['Checkbox_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Checkbox Set'),
        );
    
        $form['Checkbox_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'checkboxes',
            '#options' => array (
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
            ),
    
        );
    
        $form['Checkbox_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
    
            // チェックボックスのIDが変わったので注意が必要
            '#dependency' => array('edit-restrict-by-trip--2' => array(true)),
        );
    
        $form['Checkbox_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            '#dependency' => array('edit-restrict-by-month--2' => array(true)),
        );
    
    
        return $form;
    }
    

Ctoolsの依存(dependent)が表示/非表示制御のみ、FormAPIのstatesより制御範囲が狭いです

  • FormAPIに"#dependency"プロパティをプラグインは、表示/非表示のみとなります
  • FormAPIのstatesプロパティの制御と比較すると、制御できる範囲は狭いです
    • FormAPIのstatesプロパティは、表示/非表示/collapse/extended/enabled/disabledなどの制御ができます

感想と結論:Ctoolsの依存(dependent)の設定、コーティングルールに統一性が足りなく、わかりずらいです

  • 依存性の設定定義にラジオボタンの特別扱いを認識しなければならない(最初は戸惑いがあるだろう)
  • これらの特別なコーティングルールを覚える必要があります
  • 要素特定にはjQueryを利用していない
  • 比較してみると、FormAPIの”#states”プロパティの使用で、より統一性があり、柔軟性のダイナミックフォーム作成ができます
添付 サイズ
ctools_dependent_test.zip (1.4 KB) 1.4 KB
Embedded thumbnail for Drupalのダイナミックフォーム1:モジュール(Ctools)のDependent Systemよりエレメントの表示/非表示
drupal
video
form

DrupalのFormAPIの"#states"プロパティの設定でダイナミックフォーム要素を制御します

  • Drupalのフォームに関する開発/カスタマイズの場合に、FormAPIがほぼ必須になる状態です
  • FormAPIにある様々のプロパティに"#states"が初心者にあまり気づかないかもしれないですが、ダイナミックフォームの要素制御に使用されます
  • 基本として、制御要素と制御される要素となります
    • 制御要素は:入力系要素(チェックボックス/ラジオボタン/セレクトボックス/テキストフィールドなど)
    • 制御される要素は:任意の要素の表示/非表示/有効化/無効化/Collapseなどの制御
  • "#states"プロパティの定義に、制御要素の識別はjQueryのセレクター(:input)が利用されています
    // "#"states" 定義の基本
    "#"states" => array(
      'visible' => array(
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        ...
      ),
    )
    
    // 例:チェックボックスがチェックされたときに要素が表示される
    "#"states" => array(
        'visible' => array(
            ':input[name="remote_checkbox"]' => array('checked' => TRUE),
        ),
    )

    FormAPIのstatesプロパティの使用

  • 今回のカスタムモジュール(formapi_states_example)は、前回のCtoolsのdependentの使用と同じようなフォーム要素を作成しました

制御要素の動き(empty/filled/chechedなど)を利用します

  • 制御要素がラジオボタン/チェックボックス/セレクトボックスがよく利用されますが、テキストフィールドなども利用することができます
        $form['select_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
        );
    
        $form['select_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'select',
            '#options' => array (
                'none'=>t('Select one'),
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
                'uncollapse'=>t('次の要素を開く'),
            ),
            '#default_value' => array('none'),
    
        );
        $form['select_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
            '#states' => array(
                // セレクトが「旅行」の場合にこのエレメントが表示される
                'visible' => array(':input[id="edit-restrict-by"]' => array('value'=>'trip')),
    
            ),
        );
        $form['select_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            '#states' => array(
                // セレクトが「カレンダー」の場合にこのエレメントが表示される
                'visible' => array(':input[name="restrict_by"]' => array('value'=>'month')),
            ),
        );
  • 使用可能な要素のプロパティ:
    • empty
    • filled
    • checked
    • unchecked
    • expanded
    • collapsed
    • value

制御される要素の動き(enabled/disabled/visible/invisibleなど)を定義することができます

  • 制御される要素の動きは表示/非表示がよく利用されます
  • ほかに様々の動き(collapse/extendedなど)の制御は可能です
     // フィールドセットの畳む/開く制御例
        $form['radio_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
            '#collapsible' => TRUE,
            '#collapsed' => TRUE,
            '#states' => array(
                'expanded' => array(':input[name="restrict_by"]' => array('value'=>'uncollapse')),
            ),
        );
    
  • 制御される要素の動き一覧は
    • enabled
    • disabled
    • required
    • optional
    • visible
    • invisible
    • checked
    • unchecked
    • expanded
    • collapsed

複数の制御条件(AND/OR)の設定が可能

  • 制御条件は複数にすることができます
  • 制御条件はANDの場合に以下のような構文
    // 二つのAND制御条件に
    array(
      'visible' => array(
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        ...
      ),
    )
    
    // 例:ニッカ所にチェックされた場合、要素が表示される
        $form['Checkbox_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Checkbox Set'),
            '#states' => array(
                'visible' => array(
                    ':input[name="radio_restrict_by"]' => array('value' => 'enable_next'),
                    ':input[id="edit-restrict-by"]' => array('value'=>'uncollapse')
                ),
            ),
        );
  • 制御条件はORの場合に以下のような構文
    // ORの複数条件で表示/非表示制御
    array(
      'visible' => array(
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        ...
      ),
      'visible' => array(
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        ...
      ),
    )
    
     // 例:ニッカ所のところに、一か所がチェックされたら、要素が表示される
        $form['Checkbox_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Checkbox Set'),
            '#states' => array(
                'visible' => array(
                    ':input[name="radio_restrict_by"]' => array('value' => 'enable_next'),
                ),
                'visible' => array(
                    ':input[id="edit-restrict-by"]' => array('value'=>'uncollapse')
                ),
            ),
        );

結論・感想:FormAPIの"#states"プロパティ制御条件の設定は分かりやすく、統一性があり、柔軟性が高いものです

  • 要素のプロパティ"#states"の定義/コーティングルールは比較的にシンプルで、わかりやすいです
  • 要素特、定などにはjQueryのセレクター(:input)が利用しているので、コーティングルールの統一感があります
  • 要素の動き制御は表示/非表示だけではなく、有効/無効/折りたたむなども制御可能で、より柔軟性があります
添付 サイズ
formapi_states_test.zip (1.45 KB) 1.45 KB
Embedded thumbnail for Drupalのダイナミックフォーム2:FormAPIのStatesプロパティよりエレメントの表示/非表示などの処理
drupal
ctools
form

Drupalのモジュール(Ctools)がAPIモジュールであり、幅広く使用されている

  • Drupalのモジュール(Ctools)がAPIモジュールなので、直接に利用するのではなく、いろいろなモジュールに使用されています
    • 例:Views、PanelsなどがCtoolsを利用しています
  • 主な機能は以下のようです(Drupalの中核な存在です)
    • Plugins
    • Exportables
    • AJAX responder
    • Form tools
    • Object caching
    • Contexts
    • Modal dialog
    • Dependent
    • Content
    • Form wizard
    • CSS tools

CtoolsのDependent(依存)がフォーム要素を表示/非表示されるダイナミックな変化に使用されます

  • ダイナミックフォーム: フォーム要素がある条件で表示、非表示を行います
    • 例:セレクトボックス:カレンダー、旅行 二つあります
    • 別の要素(例:セレクト/ラジオボタン/チェックボックス)で上記要素(カレンダー/旅行)の表示/非表示を制御します(ビデオを参考)CtoolsのDependent Systemでフォーム要素の表示/非表示を制御する
  • CtoolsがFormAPIにプロパティ("#dependency")をプラグインしています
        // 1. Include CTools Dependent helper
        ctools_include('dependent');
    
        $form['select_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
        );
    
        $form['select_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'select',
            '#options' => array (
                'none'=>t('Select one'),
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
            ),
            '#default_value' => array('none'),
    
        );
        $form['select_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
            // セレクトが「旅行」の場合にこのエレメントが表示される
            '#dependency' => array('edit-restrict-by' => array('trip')),
        );
        $form['select_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            // セレクトが「カレンダー」の場合にこのエレメントが表示される
            '#dependency' => array('edit-restrict-by' => array('month')),
        );
    
    • フォームの構成はDrupalのFormAPIに従っています
    • 制御される要素は"#dependency"プロパティで記述されています

Ctoolsの"#depencency"の要素識別方法にラジオボタンが特別に扱われています

  • 制御要素が先に定義します(例:セレクトボックス:(restrict_by)
  • 制御される要素が二つ:trip、month セレクトボックス
  • 制御される要素の"#dependency"設定より制御要素の状態で要素の表示/非表示がjavascriptで操作されます
  • "#dependency"の定義は配列で行います
    ”#dependency” => array( "依存先要素のID" => "依存先要素の状態" )
    • 例:依存先は「セレクトボックス」(restrict_by)とします
    • 依存先(restrict_by)のid(htmlソースにある要素id):edit-restrict-by
    • 依存先の状態: none/trip/month 三種類です。
    • trip、またはmonthが選ばれたら、旅行、またはカレンダーのセレクトボックスを表示させる(選ばれなかったら、表示させない)
  • 但し、制御要素がラジオボタン("radios")の場合に"依存先要素のID"書き方が変わります
    '#dependency' => array('radio:restrict_by' => array('trip')),
    // radio: 決まり文言
    // restrict_by: 要素ID
    • 特に、ラジオボタンの要素IDはhtml上の要素IDではありません。FormAPIで定義する要素のIDです
  • "依存先要素の状態"は要素の性質より変わります
    • ラジオボタン: FormAPIの"radios"での"#opetions"に選択された要素のキー:none/trip/month の一つ
      '#dependency' => array('edit-restrict-by' => array('month')),
    • セレクトボックス: FormAPIの"select"での"#opetions"に選択された要素のキー:none/trip/month の一つ
      '#dependency' => array('edit-restrict-by' => array('trip')),
    • チェックボックス: html上に各チェックボックスIDごとに、チェックされた(true:1)かチェックされていない(false:0)の一つ
      '#dependency' => array('edit-restrict-by-month--2' => array(true)),
  • 今回テスト(セレクトボックス/チェックボックス/ラジオボタン)したソースは以下のとなります
    function example_page($form, &$form_state){
    
        // 1. Include CTools Dependent helper
        ctools_include('dependent');
    
        $form['select_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
        );
    
        $form['select_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'select',
            '#options' => array (
                'none'=>t('Select one'),
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
            ),
            '#default_value' => array('none'),
    
        );
        $form['select_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
            // セレクトが「旅行」の場合にこのエレメントが表示される
            '#dependency' => array('edit-restrict-by' => array('trip')),
        );
        $form['select_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            // セレクトが「カレンダー」の場合にこのエレメントが表示される
            '#dependency' => array('edit-restrict-by' => array('month')),
        );
    
    
        $form['radio_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
        );
        $form['radio_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'radios',
            '#options' => array (
                'none'=>t('Select one'),
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
            ),
            '#default_value' => 'none',
    
        );
        $form['radio_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
            '#dependency' => array('radio:restrict_by' => array('trip')),
        );
    
        $form['radio_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            '#dependency' => array('radio:restrict_by' => array('month')),
        );
        $form['Checkbox_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Checkbox Set'),
        );
    
        $form['Checkbox_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'checkboxes',
            '#options' => array (
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
            ),
    
        );
    
        $form['Checkbox_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
    
            // チェックボックスのIDが変わったので注意が必要
            '#dependency' => array('edit-restrict-by-trip--2' => array(true)),
        );
    
        $form['Checkbox_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            '#dependency' => array('edit-restrict-by-month--2' => array(true)),
        );
    
    
        return $form;
    }
    

Ctoolsの依存(dependent)が表示/非表示制御のみ、FormAPIのstatesより制御範囲が狭いです

  • FormAPIに"#dependency"プロパティをプラグインは、表示/非表示のみとなります
  • FormAPIのstatesプロパティの制御と比較すると、制御できる範囲は狭いです
    • FormAPIのstatesプロパティは、表示/非表示/collapse/extended/enabled/disabledなどの制御ができます

感想と結論:Ctoolsの依存(dependent)の設定、コーティングルールに統一性が足りなく、わかりずらいです

  • 依存性の設定定義にラジオボタンの特別扱いを認識しなければならない(最初は戸惑いがあるだろう)
  • これらの特別なコーティングルールを覚える必要があります
  • 要素特定にはjQueryを利用していない
  • 比較してみると、FormAPIの”#states”プロパティの使用で、より統一性があり、柔軟性のダイナミックフォーム作成ができます
添付 サイズ
ctools_dependent_test.zip (1.4 KB) 1.4 KB
Embedded thumbnail for Drupalのダイナミックフォーム1:モジュール(Ctools)のDependent Systemよりエレメントの表示/非表示
drupal
video
form

DrupalのFormAPIの"#states"プロパティの設定でダイナミックフォーム要素を制御します

  • Drupalのフォームに関する開発/カスタマイズの場合に、FormAPIがほぼ必須になる状態です
  • FormAPIにある様々のプロパティに"#states"が初心者にあまり気づかないかもしれないですが、ダイナミックフォームの要素制御に使用されます
  • 基本として、制御要素と制御される要素となります
    • 制御要素は:入力系要素(チェックボックス/ラジオボタン/セレクトボックス/テキストフィールドなど)
    • 制御される要素は:任意の要素の表示/非表示/有効化/無効化/Collapseなどの制御
  • "#states"プロパティの定義に、制御要素の識別はjQueryのセレクター(:input)が利用されています
    // "#"states" 定義の基本
    "#"states" => array(
      'visible' => array(
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        ...
      ),
    )
    
    // 例:チェックボックスがチェックされたときに要素が表示される
    "#"states" => array(
        'visible' => array(
            ':input[name="remote_checkbox"]' => array('checked' => TRUE),
        ),
    )

    FormAPIのstatesプロパティの使用

  • 今回のカスタムモジュール(formapi_states_example)は、前回のCtoolsのdependentの使用と同じようなフォーム要素を作成しました

制御要素の動き(empty/filled/chechedなど)を利用します

  • 制御要素がラジオボタン/チェックボックス/セレクトボックスがよく利用されますが、テキストフィールドなども利用することができます
        $form['select_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
        );
    
        $form['select_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'select',
            '#options' => array (
                'none'=>t('Select one'),
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
                'uncollapse'=>t('次の要素を開く'),
            ),
            '#default_value' => array('none'),
    
        );
        $form['select_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
            '#states' => array(
                // セレクトが「旅行」の場合にこのエレメントが表示される
                'visible' => array(':input[id="edit-restrict-by"]' => array('value'=>'trip')),
    
            ),
        );
        $form['select_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            '#states' => array(
                // セレクトが「カレンダー」の場合にこのエレメントが表示される
                'visible' => array(':input[name="restrict_by"]' => array('value'=>'month')),
            ),
        );
  • 使用可能な要素のプロパティ:
    • empty
    • filled
    • checked
    • unchecked
    • expanded
    • collapsed
    • value

制御される要素の動き(enabled/disabled/visible/invisibleなど)を定義することができます

  • 制御される要素の動きは表示/非表示がよく利用されます
  • ほかに様々の動き(collapse/extendedなど)の制御は可能です
     // フィールドセットの畳む/開く制御例
        $form['radio_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
            '#collapsible' => TRUE,
            '#collapsed' => TRUE,
            '#states' => array(
                'expanded' => array(':input[name="restrict_by"]' => array('value'=>'uncollapse')),
            ),
        );
    
  • 制御される要素の動き一覧は
    • enabled
    • disabled
    • required
    • optional
    • visible
    • invisible
    • checked
    • unchecked
    • expanded
    • collapsed

複数の制御条件(AND/OR)の設定が可能

  • 制御条件は複数にすることができます
  • 制御条件はANDの場合に以下のような構文
    // 二つのAND制御条件に
    array(
      'visible' => array(
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        ...
      ),
    )
    
    // 例:ニッカ所にチェックされた場合、要素が表示される
        $form['Checkbox_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Checkbox Set'),
            '#states' => array(
                'visible' => array(
                    ':input[name="radio_restrict_by"]' => array('value' => 'enable_next'),
                    ':input[id="edit-restrict-by"]' => array('value'=>'uncollapse')
                ),
            ),
        );
  • 制御条件はORの場合に以下のような構文
    // ORの複数条件で表示/非表示制御
    array(
      'visible' => array(
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        ...
      ),
      'visible' => array(
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        ...
      ),
    )
    
     // 例:ニッカ所のところに、一か所がチェックされたら、要素が表示される
        $form['Checkbox_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Checkbox Set'),
            '#states' => array(
                'visible' => array(
                    ':input[name="radio_restrict_by"]' => array('value' => 'enable_next'),
                ),
                'visible' => array(
                    ':input[id="edit-restrict-by"]' => array('value'=>'uncollapse')
                ),
            ),
        );

結論・感想:FormAPIの"#states"プロパティ制御条件の設定は分かりやすく、統一性があり、柔軟性が高いものです

  • 要素のプロパティ"#states"の定義/コーティングルールは比較的にシンプルで、わかりやすいです
  • 要素特、定などにはjQueryのセレクター(:input)が利用しているので、コーティングルールの統一感があります
  • 要素の動き制御は表示/非表示だけではなく、有効/無効/折りたたむなども制御可能で、より柔軟性があります
添付 サイズ
formapi_states_test.zip (1.45 KB) 1.45 KB
Embedded thumbnail for Drupalのダイナミックフォーム2:FormAPIのStatesプロパティよりエレメントの表示/非表示などの処理
drupal
ctools
form

Drupalのモジュール(Ctools)がAPIモジュールであり、幅広く使用されている

  • Drupalのモジュール(Ctools)がAPIモジュールなので、直接に利用するのではなく、いろいろなモジュールに使用されています
    • 例:Views、PanelsなどがCtoolsを利用しています
  • 主な機能は以下のようです(Drupalの中核な存在です)
    • Plugins
    • Exportables
    • AJAX responder
    • Form tools
    • Object caching
    • Contexts
    • Modal dialog
    • Dependent
    • Content
    • Form wizard
    • CSS tools

CtoolsのDependent(依存)がフォーム要素を表示/非表示されるダイナミックな変化に使用されます

  • ダイナミックフォーム: フォーム要素がある条件で表示、非表示を行います
    • 例:セレクトボックス:カレンダー、旅行 二つあります
    • 別の要素(例:セレクト/ラジオボタン/チェックボックス)で上記要素(カレンダー/旅行)の表示/非表示を制御します(ビデオを参考)CtoolsのDependent Systemでフォーム要素の表示/非表示を制御する
  • CtoolsがFormAPIにプロパティ("#dependency")をプラグインしています
        // 1. Include CTools Dependent helper
        ctools_include('dependent');
    
        $form['select_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
        );
    
        $form['select_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'select',
            '#options' => array (
                'none'=>t('Select one'),
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
            ),
            '#default_value' => array('none'),
    
        );
        $form['select_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
            // セレクトが「旅行」の場合にこのエレメントが表示される
            '#dependency' => array('edit-restrict-by' => array('trip')),
        );
        $form['select_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            // セレクトが「カレンダー」の場合にこのエレメントが表示される
            '#dependency' => array('edit-restrict-by' => array('month')),
        );
    
    • フォームの構成はDrupalのFormAPIに従っています
    • 制御される要素は"#dependency"プロパティで記述されています

Ctoolsの"#depencency"の要素識別方法にラジオボタンが特別に扱われています

  • 制御要素が先に定義します(例:セレクトボックス:(restrict_by)
  • 制御される要素が二つ:trip、month セレクトボックス
  • 制御される要素の"#dependency"設定より制御要素の状態で要素の表示/非表示がjavascriptで操作されます
  • "#dependency"の定義は配列で行います
    ”#dependency” => array( "依存先要素のID" => "依存先要素の状態" )
    • 例:依存先は「セレクトボックス」(restrict_by)とします
    • 依存先(restrict_by)のid(htmlソースにある要素id):edit-restrict-by
    • 依存先の状態: none/trip/month 三種類です。
    • trip、またはmonthが選ばれたら、旅行、またはカレンダーのセレクトボックスを表示させる(選ばれなかったら、表示させない)
  • 但し、制御要素がラジオボタン("radios")の場合に"依存先要素のID"書き方が変わります
    '#dependency' => array('radio:restrict_by' => array('trip')),
    // radio: 決まり文言
    // restrict_by: 要素ID
    • 特に、ラジオボタンの要素IDはhtml上の要素IDではありません。FormAPIで定義する要素のIDです
  • "依存先要素の状態"は要素の性質より変わります
    • ラジオボタン: FormAPIの"radios"での"#opetions"に選択された要素のキー:none/trip/month の一つ
      '#dependency' => array('edit-restrict-by' => array('month')),
    • セレクトボックス: FormAPIの"select"での"#opetions"に選択された要素のキー:none/trip/month の一つ
      '#dependency' => array('edit-restrict-by' => array('trip')),
    • チェックボックス: html上に各チェックボックスIDごとに、チェックされた(true:1)かチェックされていない(false:0)の一つ
      '#dependency' => array('edit-restrict-by-month--2' => array(true)),
  • 今回テスト(セレクトボックス/チェックボックス/ラジオボタン)したソースは以下のとなります
    function example_page($form, &$form_state){
    
        // 1. Include CTools Dependent helper
        ctools_include('dependent');
    
        $form['select_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
        );
    
        $form['select_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'select',
            '#options' => array (
                'none'=>t('Select one'),
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
            ),
            '#default_value' => array('none'),
    
        );
        $form['select_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
            // セレクトが「旅行」の場合にこのエレメントが表示される
            '#dependency' => array('edit-restrict-by' => array('trip')),
        );
        $form['select_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            // セレクトが「カレンダー」の場合にこのエレメントが表示される
            '#dependency' => array('edit-restrict-by' => array('month')),
        );
    
    
        $form['radio_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
        );
        $form['radio_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'radios',
            '#options' => array (
                'none'=>t('Select one'),
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
            ),
            '#default_value' => 'none',
    
        );
        $form['radio_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
            '#dependency' => array('radio:restrict_by' => array('trip')),
        );
    
        $form['radio_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            '#dependency' => array('radio:restrict_by' => array('month')),
        );
        $form['Checkbox_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Checkbox Set'),
        );
    
        $form['Checkbox_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'checkboxes',
            '#options' => array (
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
            ),
    
        );
    
        $form['Checkbox_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
    
            // チェックボックスのIDが変わったので注意が必要
            '#dependency' => array('edit-restrict-by-trip--2' => array(true)),
        );
    
        $form['Checkbox_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            '#dependency' => array('edit-restrict-by-month--2' => array(true)),
        );
    
    
        return $form;
    }
    

Ctoolsの依存(dependent)が表示/非表示制御のみ、FormAPIのstatesより制御範囲が狭いです

  • FormAPIに"#dependency"プロパティをプラグインは、表示/非表示のみとなります
  • FormAPIのstatesプロパティの制御と比較すると、制御できる範囲は狭いです
    • FormAPIのstatesプロパティは、表示/非表示/collapse/extended/enabled/disabledなどの制御ができます

感想と結論:Ctoolsの依存(dependent)の設定、コーティングルールに統一性が足りなく、わかりずらいです

  • 依存性の設定定義にラジオボタンの特別扱いを認識しなければならない(最初は戸惑いがあるだろう)
  • これらの特別なコーティングルールを覚える必要があります
  • 要素特定にはjQueryを利用していない
  • 比較してみると、FormAPIの”#states”プロパティの使用で、より統一性があり、柔軟性のダイナミックフォーム作成ができます
添付 サイズ
ctools_dependent_test.zip (1.4 KB) 1.4 KB
Embedded thumbnail for Drupalのダイナミックフォーム1:モジュール(Ctools)のDependent Systemよりエレメントの表示/非表示
drupal
video
form

DrupalのFormAPIの"#states"プロパティの設定でダイナミックフォーム要素を制御します

  • Drupalのフォームに関する開発/カスタマイズの場合に、FormAPIがほぼ必須になる状態です
  • FormAPIにある様々のプロパティに"#states"が初心者にあまり気づかないかもしれないですが、ダイナミックフォームの要素制御に使用されます
  • 基本として、制御要素と制御される要素となります
    • 制御要素は:入力系要素(チェックボックス/ラジオボタン/セレクトボックス/テキストフィールドなど)
    • 制御される要素は:任意の要素の表示/非表示/有効化/無効化/Collapseなどの制御
  • "#states"プロパティの定義に、制御要素の識別はjQueryのセレクター(:input)が利用されています
    // "#"states" 定義の基本
    "#"states" => array(
      'visible' => array(
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        ...
      ),
    )
    
    // 例:チェックボックスがチェックされたときに要素が表示される
    "#"states" => array(
        'visible' => array(
            ':input[name="remote_checkbox"]' => array('checked' => TRUE),
        ),
    )

    FormAPIのstatesプロパティの使用

  • 今回のカスタムモジュール(formapi_states_example)は、前回のCtoolsのdependentの使用と同じようなフォーム要素を作成しました

制御要素の動き(empty/filled/chechedなど)を利用します

  • 制御要素がラジオボタン/チェックボックス/セレクトボックスがよく利用されますが、テキストフィールドなども利用することができます
        $form['select_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
        );
    
        $form['select_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'select',
            '#options' => array (
                'none'=>t('Select one'),
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
                'uncollapse'=>t('次の要素を開く'),
            ),
            '#default_value' => array('none'),
    
        );
        $form['select_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
            '#states' => array(
                // セレクトが「旅行」の場合にこのエレメントが表示される
                'visible' => array(':input[id="edit-restrict-by"]' => array('value'=>'trip')),
    
            ),
        );
        $form['select_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            '#states' => array(
                // セレクトが「カレンダー」の場合にこのエレメントが表示される
                'visible' => array(':input[name="restrict_by"]' => array('value'=>'month')),
            ),
        );
  • 使用可能な要素のプロパティ:
    • empty
    • filled
    • checked
    • unchecked
    • expanded
    • collapsed
    • value

制御される要素の動き(enabled/disabled/visible/invisibleなど)を定義することができます

  • 制御される要素の動きは表示/非表示がよく利用されます
  • ほかに様々の動き(collapse/extendedなど)の制御は可能です
     // フィールドセットの畳む/開く制御例
        $form['radio_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
            '#collapsible' => TRUE,
            '#collapsed' => TRUE,
            '#states' => array(
                'expanded' => array(':input[name="restrict_by"]' => array('value'=>'uncollapse')),
            ),
        );
    
  • 制御される要素の動き一覧は
    • enabled
    • disabled
    • required
    • optional
    • visible
    • invisible
    • checked
    • unchecked
    • expanded
    • collapsed

複数の制御条件(AND/OR)の設定が可能

  • 制御条件は複数にすることができます
  • 制御条件はANDの場合に以下のような構文
    // 二つのAND制御条件に
    array(
      'visible' => array(
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        ...
      ),
    )
    
    // 例:ニッカ所にチェックされた場合、要素が表示される
        $form['Checkbox_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Checkbox Set'),
            '#states' => array(
                'visible' => array(
                    ':input[name="radio_restrict_by"]' => array('value' => 'enable_next'),
                    ':input[id="edit-restrict-by"]' => array('value'=>'uncollapse')
                ),
            ),
        );
  • 制御条件はORの場合に以下のような構文
    // ORの複数条件で表示/非表示制御
    array(
      'visible' => array(
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        ...
      ),
      'visible' => array(
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        ...
      ),
    )
    
     // 例:ニッカ所のところに、一か所がチェックされたら、要素が表示される
        $form['Checkbox_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Checkbox Set'),
            '#states' => array(
                'visible' => array(
                    ':input[name="radio_restrict_by"]' => array('value' => 'enable_next'),
                ),
                'visible' => array(
                    ':input[id="edit-restrict-by"]' => array('value'=>'uncollapse')
                ),
            ),
        );

結論・感想:FormAPIの"#states"プロパティ制御条件の設定は分かりやすく、統一性があり、柔軟性が高いものです

  • 要素のプロパティ"#states"の定義/コーティングルールは比較的にシンプルで、わかりやすいです
  • 要素特、定などにはjQueryのセレクター(:input)が利用しているので、コーティングルールの統一感があります
  • 要素の動き制御は表示/非表示だけではなく、有効/無効/折りたたむなども制御可能で、より柔軟性があります
添付 サイズ
formapi_states_test.zip (1.45 KB) 1.45 KB
Embedded thumbnail for Drupalのダイナミックフォーム2:FormAPIのStatesプロパティよりエレメントの表示/非表示などの処理
drupal
ctools
form

Drupalのモジュール(Ctools)がAPIモジュールであり、幅広く使用されている

  • Drupalのモジュール(Ctools)がAPIモジュールなので、直接に利用するのではなく、いろいろなモジュールに使用されています
    • 例:Views、PanelsなどがCtoolsを利用しています
  • 主な機能は以下のようです(Drupalの中核な存在です)
    • Plugins
    • Exportables
    • AJAX responder
    • Form tools
    • Object caching
    • Contexts
    • Modal dialog
    • Dependent
    • Content
    • Form wizard
    • CSS tools

CtoolsのDependent(依存)がフォーム要素を表示/非表示されるダイナミックな変化に使用されます

  • ダイナミックフォーム: フォーム要素がある条件で表示、非表示を行います
    • 例:セレクトボックス:カレンダー、旅行 二つあります
    • 別の要素(例:セレクト/ラジオボタン/チェックボックス)で上記要素(カレンダー/旅行)の表示/非表示を制御します(ビデオを参考)CtoolsのDependent Systemでフォーム要素の表示/非表示を制御する
  • CtoolsがFormAPIにプロパティ("#dependency")をプラグインしています
        // 1. Include CTools Dependent helper
        ctools_include('dependent');
    
        $form['select_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
        );
    
        $form['select_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'select',
            '#options' => array (
                'none'=>t('Select one'),
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
            ),
            '#default_value' => array('none'),
    
        );
        $form['select_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
            // セレクトが「旅行」の場合にこのエレメントが表示される
            '#dependency' => array('edit-restrict-by' => array('trip')),
        );
        $form['select_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            // セレクトが「カレンダー」の場合にこのエレメントが表示される
            '#dependency' => array('edit-restrict-by' => array('month')),
        );
    
    • フォームの構成はDrupalのFormAPIに従っています
    • 制御される要素は"#dependency"プロパティで記述されています

Ctoolsの"#depencency"の要素識別方法にラジオボタンが特別に扱われています

  • 制御要素が先に定義します(例:セレクトボックス:(restrict_by)
  • 制御される要素が二つ:trip、month セレクトボックス
  • 制御される要素の"#dependency"設定より制御要素の状態で要素の表示/非表示がjavascriptで操作されます
  • "#dependency"の定義は配列で行います
    ”#dependency” => array( "依存先要素のID" => "依存先要素の状態" )
    • 例:依存先は「セレクトボックス」(restrict_by)とします
    • 依存先(restrict_by)のid(htmlソースにある要素id):edit-restrict-by
    • 依存先の状態: none/trip/month 三種類です。
    • trip、またはmonthが選ばれたら、旅行、またはカレンダーのセレクトボックスを表示させる(選ばれなかったら、表示させない)
  • 但し、制御要素がラジオボタン("radios")の場合に"依存先要素のID"書き方が変わります
    '#dependency' => array('radio:restrict_by' => array('trip')),
    // radio: 決まり文言
    // restrict_by: 要素ID
    • 特に、ラジオボタンの要素IDはhtml上の要素IDではありません。FormAPIで定義する要素のIDです
  • "依存先要素の状態"は要素の性質より変わります
    • ラジオボタン: FormAPIの"radios"での"#opetions"に選択された要素のキー:none/trip/month の一つ
      '#dependency' => array('edit-restrict-by' => array('month')),
    • セレクトボックス: FormAPIの"select"での"#opetions"に選択された要素のキー:none/trip/month の一つ
      '#dependency' => array('edit-restrict-by' => array('trip')),
    • チェックボックス: html上に各チェックボックスIDごとに、チェックされた(true:1)かチェックされていない(false:0)の一つ
      '#dependency' => array('edit-restrict-by-month--2' => array(true)),
  • 今回テスト(セレクトボックス/チェックボックス/ラジオボタン)したソースは以下のとなります
    function example_page($form, &$form_state){
    
        // 1. Include CTools Dependent helper
        ctools_include('dependent');
    
        $form['select_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
        );
    
        $form['select_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'select',
            '#options' => array (
                'none'=>t('Select one'),
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
            ),
            '#default_value' => array('none'),
    
        );
        $form['select_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
            // セレクトが「旅行」の場合にこのエレメントが表示される
            '#dependency' => array('edit-restrict-by' => array('trip')),
        );
        $form['select_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            // セレクトが「カレンダー」の場合にこのエレメントが表示される
            '#dependency' => array('edit-restrict-by' => array('month')),
        );
    
    
        $form['radio_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
        );
        $form['radio_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'radios',
            '#options' => array (
                'none'=>t('Select one'),
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
            ),
            '#default_value' => 'none',
    
        );
        $form['radio_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
            '#dependency' => array('radio:restrict_by' => array('trip')),
        );
    
        $form['radio_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            '#dependency' => array('radio:restrict_by' => array('month')),
        );
        $form['Checkbox_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Checkbox Set'),
        );
    
        $form['Checkbox_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'checkboxes',
            '#options' => array (
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
            ),
    
        );
    
        $form['Checkbox_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
    
            // チェックボックスのIDが変わったので注意が必要
            '#dependency' => array('edit-restrict-by-trip--2' => array(true)),
        );
    
        $form['Checkbox_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            '#dependency' => array('edit-restrict-by-month--2' => array(true)),
        );
    
    
        return $form;
    }
    

Ctoolsの依存(dependent)が表示/非表示制御のみ、FormAPIのstatesより制御範囲が狭いです

  • FormAPIに"#dependency"プロパティをプラグインは、表示/非表示のみとなります
  • FormAPIのstatesプロパティの制御と比較すると、制御できる範囲は狭いです
    • FormAPIのstatesプロパティは、表示/非表示/collapse/extended/enabled/disabledなどの制御ができます

感想と結論:Ctoolsの依存(dependent)の設定、コーティングルールに統一性が足りなく、わかりずらいです

  • 依存性の設定定義にラジオボタンの特別扱いを認識しなければならない(最初は戸惑いがあるだろう)
  • これらの特別なコーティングルールを覚える必要があります
  • 要素特定にはjQueryを利用していない
  • 比較してみると、FormAPIの”#states”プロパティの使用で、より統一性があり、柔軟性のダイナミックフォーム作成ができます
添付 サイズ
ctools_dependent_test.zip (1.4 KB) 1.4 KB
Embedded thumbnail for Drupalのダイナミックフォーム1:モジュール(Ctools)のDependent Systemよりエレメントの表示/非表示
drupal
video
form

DrupalのFormAPIの"#states"プロパティの設定でダイナミックフォーム要素を制御します

  • Drupalのフォームに関する開発/カスタマイズの場合に、FormAPIがほぼ必須になる状態です
  • FormAPIにある様々のプロパティに"#states"が初心者にあまり気づかないかもしれないですが、ダイナミックフォームの要素制御に使用されます
  • 基本として、制御要素と制御される要素となります
    • 制御要素は:入力系要素(チェックボックス/ラジオボタン/セレクトボックス/テキストフィールドなど)
    • 制御される要素は:任意の要素の表示/非表示/有効化/無効化/Collapseなどの制御
  • "#states"プロパティの定義に、制御要素の識別はjQueryのセレクター(:input)が利用されています
    // "#"states" 定義の基本
    "#"states" => array(
      'visible' => array(
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        ...
      ),
    )
    
    // 例:チェックボックスがチェックされたときに要素が表示される
    "#"states" => array(
        'visible' => array(
            ':input[name="remote_checkbox"]' => array('checked' => TRUE),
        ),
    )

    FormAPIのstatesプロパティの使用

  • 今回のカスタムモジュール(formapi_states_example)は、前回のCtoolsのdependentの使用と同じようなフォーム要素を作成しました

制御要素の動き(empty/filled/chechedなど)を利用します

  • 制御要素がラジオボタン/チェックボックス/セレクトボックスがよく利用されますが、テキストフィールドなども利用することができます
        $form['select_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
        );
    
        $form['select_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'select',
            '#options' => array (
                'none'=>t('Select one'),
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
                'uncollapse'=>t('次の要素を開く'),
            ),
            '#default_value' => array('none'),
    
        );
        $form['select_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
            '#states' => array(
                // セレクトが「旅行」の場合にこのエレメントが表示される
                'visible' => array(':input[id="edit-restrict-by"]' => array('value'=>'trip')),
    
            ),
        );
        $form['select_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            '#states' => array(
                // セレクトが「カレンダー」の場合にこのエレメントが表示される
                'visible' => array(':input[name="restrict_by"]' => array('value'=>'month')),
            ),
        );
  • 使用可能な要素のプロパティ:
    • empty
    • filled
    • checked
    • unchecked
    • expanded
    • collapsed
    • value

制御される要素の動き(enabled/disabled/visible/invisibleなど)を定義することができます

  • 制御される要素の動きは表示/非表示がよく利用されます
  • ほかに様々の動き(collapse/extendedなど)の制御は可能です
     // フィールドセットの畳む/開く制御例
        $form['radio_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
            '#collapsible' => TRUE,
            '#collapsed' => TRUE,
            '#states' => array(
                'expanded' => array(':input[name="restrict_by"]' => array('value'=>'uncollapse')),
            ),
        );
    
  • 制御される要素の動き一覧は
    • enabled
    • disabled
    • required
    • optional
    • visible
    • invisible
    • checked
    • unchecked
    • expanded
    • collapsed

複数の制御条件(AND/OR)の設定が可能

  • 制御条件は複数にすることができます
  • 制御条件はANDの場合に以下のような構文
    // 二つのAND制御条件に
    array(
      'visible' => array(
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        ...
      ),
    )
    
    // 例:ニッカ所にチェックされた場合、要素が表示される
        $form['Checkbox_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Checkbox Set'),
            '#states' => array(
                'visible' => array(
                    ':input[name="radio_restrict_by"]' => array('value' => 'enable_next'),
                    ':input[id="edit-restrict-by"]' => array('value'=>'uncollapse')
                ),
            ),
        );
  • 制御条件はORの場合に以下のような構文
    // ORの複数条件で表示/非表示制御
    array(
      'visible' => array(
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        ...
      ),
      'visible' => array(
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        ...
      ),
    )
    
     // 例:ニッカ所のところに、一か所がチェックされたら、要素が表示される
        $form['Checkbox_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Checkbox Set'),
            '#states' => array(
                'visible' => array(
                    ':input[name="radio_restrict_by"]' => array('value' => 'enable_next'),
                ),
                'visible' => array(
                    ':input[id="edit-restrict-by"]' => array('value'=>'uncollapse')
                ),
            ),
        );

結論・感想:FormAPIの"#states"プロパティ制御条件の設定は分かりやすく、統一性があり、柔軟性が高いものです

  • 要素のプロパティ"#states"の定義/コーティングルールは比較的にシンプルで、わかりやすいです
  • 要素特、定などにはjQueryのセレクター(:input)が利用しているので、コーティングルールの統一感があります
  • 要素の動き制御は表示/非表示だけではなく、有効/無効/折りたたむなども制御可能で、より柔軟性があります
添付 サイズ
formapi_states_test.zip (1.45 KB) 1.45 KB
Embedded thumbnail for Drupalのダイナミックフォーム2:FormAPIのStatesプロパティよりエレメントの表示/非表示などの処理
drupal
ctools
form

Drupalのモジュール(Ctools)がAPIモジュールであり、幅広く使用されている

  • Drupalのモジュール(Ctools)がAPIモジュールなので、直接に利用するのではなく、いろいろなモジュールに使用されています
    • 例:Views、PanelsなどがCtoolsを利用しています
  • 主な機能は以下のようです(Drupalの中核な存在です)
    • Plugins
    • Exportables
    • AJAX responder
    • Form tools
    • Object caching
    • Contexts
    • Modal dialog
    • Dependent
    • Content
    • Form wizard
    • CSS tools

CtoolsのDependent(依存)がフォーム要素を表示/非表示されるダイナミックな変化に使用されます

  • ダイナミックフォーム: フォーム要素がある条件で表示、非表示を行います
    • 例:セレクトボックス:カレンダー、旅行 二つあります
    • 別の要素(例:セレクト/ラジオボタン/チェックボックス)で上記要素(カレンダー/旅行)の表示/非表示を制御します(ビデオを参考)CtoolsのDependent Systemでフォーム要素の表示/非表示を制御する
  • CtoolsがFormAPIにプロパティ("#dependency")をプラグインしています
        // 1. Include CTools Dependent helper
        ctools_include('dependent');
    
        $form['select_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
        );
    
        $form['select_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'select',
            '#options' => array (
                'none'=>t('Select one'),
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
            ),
            '#default_value' => array('none'),
    
        );
        $form['select_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
            // セレクトが「旅行」の場合にこのエレメントが表示される
            '#dependency' => array('edit-restrict-by' => array('trip')),
        );
        $form['select_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            // セレクトが「カレンダー」の場合にこのエレメントが表示される
            '#dependency' => array('edit-restrict-by' => array('month')),
        );
    
    • フォームの構成はDrupalのFormAPIに従っています
    • 制御される要素は"#dependency"プロパティで記述されています

Ctoolsの"#depencency"の要素識別方法にラジオボタンが特別に扱われています

  • 制御要素が先に定義します(例:セレクトボックス:(restrict_by)
  • 制御される要素が二つ:trip、month セレクトボックス
  • 制御される要素の"#dependency"設定より制御要素の状態で要素の表示/非表示がjavascriptで操作されます
  • "#dependency"の定義は配列で行います
    ”#dependency” => array( "依存先要素のID" => "依存先要素の状態" )
    • 例:依存先は「セレクトボックス」(restrict_by)とします
    • 依存先(restrict_by)のid(htmlソースにある要素id):edit-restrict-by
    • 依存先の状態: none/trip/month 三種類です。
    • trip、またはmonthが選ばれたら、旅行、またはカレンダーのセレクトボックスを表示させる(選ばれなかったら、表示させない)
  • 但し、制御要素がラジオボタン("radios")の場合に"依存先要素のID"書き方が変わります
    '#dependency' => array('radio:restrict_by' => array('trip')),
    // radio: 決まり文言
    // restrict_by: 要素ID
    • 特に、ラジオボタンの要素IDはhtml上の要素IDではありません。FormAPIで定義する要素のIDです
  • "依存先要素の状態"は要素の性質より変わります
    • ラジオボタン: FormAPIの"radios"での"#opetions"に選択された要素のキー:none/trip/month の一つ
      '#dependency' => array('edit-restrict-by' => array('month')),
    • セレクトボックス: FormAPIの"select"での"#opetions"に選択された要素のキー:none/trip/month の一つ
      '#dependency' => array('edit-restrict-by' => array('trip')),
    • チェックボックス: html上に各チェックボックスIDごとに、チェックされた(true:1)かチェックされていない(false:0)の一つ
      '#dependency' => array('edit-restrict-by-month--2' => array(true)),
  • 今回テスト(セレクトボックス/チェックボックス/ラジオボタン)したソースは以下のとなります
    function example_page($form, &$form_state){
    
        // 1. Include CTools Dependent helper
        ctools_include('dependent');
    
        $form['select_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
        );
    
        $form['select_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'select',
            '#options' => array (
                'none'=>t('Select one'),
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
            ),
            '#default_value' => array('none'),
    
        );
        $form['select_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
            // セレクトが「旅行」の場合にこのエレメントが表示される
            '#dependency' => array('edit-restrict-by' => array('trip')),
        );
        $form['select_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            // セレクトが「カレンダー」の場合にこのエレメントが表示される
            '#dependency' => array('edit-restrict-by' => array('month')),
        );
    
    
        $form['radio_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
        );
        $form['radio_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'radios',
            '#options' => array (
                'none'=>t('Select one'),
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
            ),
            '#default_value' => 'none',
    
        );
        $form['radio_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
            '#dependency' => array('radio:restrict_by' => array('trip')),
        );
    
        $form['radio_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            '#dependency' => array('radio:restrict_by' => array('month')),
        );
        $form['Checkbox_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Checkbox Set'),
        );
    
        $form['Checkbox_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'checkboxes',
            '#options' => array (
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
            ),
    
        );
    
        $form['Checkbox_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
    
            // チェックボックスのIDが変わったので注意が必要
            '#dependency' => array('edit-restrict-by-trip--2' => array(true)),
        );
    
        $form['Checkbox_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            '#dependency' => array('edit-restrict-by-month--2' => array(true)),
        );
    
    
        return $form;
    }
    

Ctoolsの依存(dependent)が表示/非表示制御のみ、FormAPIのstatesより制御範囲が狭いです

  • FormAPIに"#dependency"プロパティをプラグインは、表示/非表示のみとなります
  • FormAPIのstatesプロパティの制御と比較すると、制御できる範囲は狭いです
    • FormAPIのstatesプロパティは、表示/非表示/collapse/extended/enabled/disabledなどの制御ができます

感想と結論:Ctoolsの依存(dependent)の設定、コーティングルールに統一性が足りなく、わかりずらいです

  • 依存性の設定定義にラジオボタンの特別扱いを認識しなければならない(最初は戸惑いがあるだろう)
  • これらの特別なコーティングルールを覚える必要があります
  • 要素特定にはjQueryを利用していない
  • 比較してみると、FormAPIの”#states”プロパティの使用で、より統一性があり、柔軟性のダイナミックフォーム作成ができます
添付 サイズ
ctools_dependent_test.zip (1.4 KB) 1.4 KB
Embedded thumbnail for Drupalのダイナミックフォーム1:モジュール(Ctools)のDependent Systemよりエレメントの表示/非表示
drupal
video
form

DrupalのFormAPIの"#states"プロパティの設定でダイナミックフォーム要素を制御します

  • Drupalのフォームに関する開発/カスタマイズの場合に、FormAPIがほぼ必須になる状態です
  • FormAPIにある様々のプロパティに"#states"が初心者にあまり気づかないかもしれないですが、ダイナミックフォームの要素制御に使用されます
  • 基本として、制御要素と制御される要素となります
    • 制御要素は:入力系要素(チェックボックス/ラジオボタン/セレクトボックス/テキストフィールドなど)
    • 制御される要素は:任意の要素の表示/非表示/有効化/無効化/Collapseなどの制御
  • "#states"プロパティの定義に、制御要素の識別はjQueryのセレクター(:input)が利用されています
    // "#"states" 定義の基本
    "#"states" => array(
      'visible' => array(
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        ...
      ),
    )
    
    // 例:チェックボックスがチェックされたときに要素が表示される
    "#"states" => array(
        'visible' => array(
            ':input[name="remote_checkbox"]' => array('checked' => TRUE),
        ),
    )

    FormAPIのstatesプロパティの使用

  • 今回のカスタムモジュール(formapi_states_example)は、前回のCtoolsのdependentの使用と同じようなフォーム要素を作成しました

制御要素の動き(empty/filled/chechedなど)を利用します

  • 制御要素がラジオボタン/チェックボックス/セレクトボックスがよく利用されますが、テキストフィールドなども利用することができます
        $form['select_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
        );
    
        $form['select_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'select',
            '#options' => array (
                'none'=>t('Select one'),
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
                'uncollapse'=>t('次の要素を開く'),
            ),
            '#default_value' => array('none'),
    
        );
        $form['select_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
            '#states' => array(
                // セレクトが「旅行」の場合にこのエレメントが表示される
                'visible' => array(':input[id="edit-restrict-by"]' => array('value'=>'trip')),
    
            ),
        );
        $form['select_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            '#states' => array(
                // セレクトが「カレンダー」の場合にこのエレメントが表示される
                'visible' => array(':input[name="restrict_by"]' => array('value'=>'month')),
            ),
        );
  • 使用可能な要素のプロパティ:
    • empty
    • filled
    • checked
    • unchecked
    • expanded
    • collapsed
    • value

制御される要素の動き(enabled/disabled/visible/invisibleなど)を定義することができます

  • 制御される要素の動きは表示/非表示がよく利用されます
  • ほかに様々の動き(collapse/extendedなど)の制御は可能です
     // フィールドセットの畳む/開く制御例
        $form['radio_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
            '#collapsible' => TRUE,
            '#collapsed' => TRUE,
            '#states' => array(
                'expanded' => array(':input[name="restrict_by"]' => array('value'=>'uncollapse')),
            ),
        );
    
  • 制御される要素の動き一覧は
    • enabled
    • disabled
    • required
    • optional
    • visible
    • invisible
    • checked
    • unchecked
    • expanded
    • collapsed

複数の制御条件(AND/OR)の設定が可能

  • 制御条件は複数にすることができます
  • 制御条件はANDの場合に以下のような構文
    // 二つのAND制御条件に
    array(
      'visible' => array(
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        ...
      ),
    )
    
    // 例:ニッカ所にチェックされた場合、要素が表示される
        $form['Checkbox_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Checkbox Set'),
            '#states' => array(
                'visible' => array(
                    ':input[name="radio_restrict_by"]' => array('value' => 'enable_next'),
                    ':input[id="edit-restrict-by"]' => array('value'=>'uncollapse')
                ),
            ),
        );
  • 制御条件はORの場合に以下のような構文
    // ORの複数条件で表示/非表示制御
    array(
      'visible' => array(
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        ...
      ),
      'visible' => array(
        JQUERY_SELECTOR => REMOTE_CONDITIONS,
        ...
      ),
    )
    
     // 例:ニッカ所のところに、一か所がチェックされたら、要素が表示される
        $form['Checkbox_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Checkbox Set'),
            '#states' => array(
                'visible' => array(
                    ':input[name="radio_restrict_by"]' => array('value' => 'enable_next'),
                ),
                'visible' => array(
                    ':input[id="edit-restrict-by"]' => array('value'=>'uncollapse')
                ),
            ),
        );

結論・感想:FormAPIの"#states"プロパティ制御条件の設定は分かりやすく、統一性があり、柔軟性が高いものです

  • 要素のプロパティ"#states"の定義/コーティングルールは比較的にシンプルで、わかりやすいです
  • 要素特、定などにはjQueryのセレクター(:input)が利用しているので、コーティングルールの統一感があります
  • 要素の動き制御は表示/非表示だけではなく、有効/無効/折りたたむなども制御可能で、より柔軟性があります
添付 サイズ
formapi_states_test.zip (1.45 KB) 1.45 KB
Embedded thumbnail for Drupalのダイナミックフォーム2:FormAPIのStatesプロパティよりエレメントの表示/非表示などの処理
drupal
ctools
form

Drupalのモジュール(Ctools)がAPIモジュールであり、幅広く使用されている

  • Drupalのモジュール(Ctools)がAPIモジュールなので、直接に利用するのではなく、いろいろなモジュールに使用されています
    • 例:Views、PanelsなどがCtoolsを利用しています
  • 主な機能は以下のようです(Drupalの中核な存在です)
    • Plugins
    • Exportables
    • AJAX responder
    • Form tools
    • Object caching
    • Contexts
    • Modal dialog
    • Dependent
    • Content
    • Form wizard
    • CSS tools

CtoolsのDependent(依存)がフォーム要素を表示/非表示されるダイナミックな変化に使用されます

  • ダイナミックフォーム: フォーム要素がある条件で表示、非表示を行います
    • 例:セレクトボックス:カレンダー、旅行 二つあります
    • 別の要素(例:セレクト/ラジオボタン/チェックボックス)で上記要素(カレンダー/旅行)の表示/非表示を制御します(ビデオを参考)CtoolsのDependent Systemでフォーム要素の表示/非表示を制御する
  • CtoolsがFormAPIにプロパティ("#dependency")をプラグインしています
        // 1. Include CTools Dependent helper
        ctools_include('dependent');
    
        $form['select_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
        );
    
        $form['select_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'select',
            '#options' => array (
                'none'=>t('Select one'),
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
            ),
            '#default_value' => array('none'),
    
        );
        $form['select_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
            // セレクトが「旅行」の場合にこのエレメントが表示される
            '#dependency' => array('edit-restrict-by' => array('trip')),
        );
        $form['select_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            // セレクトが「カレンダー」の場合にこのエレメントが表示される
            '#dependency' => array('edit-restrict-by' => array('month')),
        );
    
    • フォームの構成はDrupalのFormAPIに従っています
    • 制御される要素は"#dependency"プロパティで記述されています

Ctoolsの"#depencency"の要素識別方法にラジオボタンが特別に扱われています

  • 制御要素が先に定義します(例:セレクトボックス:(restrict_by)
  • 制御される要素が二つ:trip、month セレクトボックス
  • 制御される要素の"#dependency"設定より制御要素の状態で要素の表示/非表示がjavascriptで操作されます
  • "#dependency"の定義は配列で行います
    ”#dependency” => array( "依存先要素のID" => "依存先要素の状態" )
    • 例:依存先は「セレクトボックス」(restrict_by)とします
    • 依存先(restrict_by)のid(htmlソースにある要素id):edit-restrict-by
    • 依存先の状態: none/trip/month 三種類です。
    • trip、またはmonthが選ばれたら、旅行、またはカレンダーのセレクトボックスを表示させる(選ばれなかったら、表示させない)
  • 但し、制御要素がラジオボタン("radios")の場合に"依存先要素のID"書き方が変わります
    '#dependency' => array('radio:restrict_by' => array('trip')),
    // radio: 決まり文言
    // restrict_by: 要素ID
    • 特に、ラジオボタンの要素IDはhtml上の要素IDではありません。FormAPIで定義する要素のIDです
  • "依存先要素の状態"は要素の性質より変わります
    • ラジオボタン: FormAPIの"radios"での"#opetions"に選択された要素のキー:none/trip/month の一つ
      '#dependency' => array('edit-restrict-by' => array('month')),
    • セレクトボックス: FormAPIの"select"での"#opetions"に選択された要素のキー:none/trip/month の一つ
      '#dependency' => array('edit-restrict-by' => array('trip')),
    • チェックボックス: html上に各チェックボックスIDごとに、チェックされた(true:1)かチェックされていない(false:0)の一つ
      '#dependency' => array('edit-restrict-by-month--2' => array(true)),
  • 今回テスト(セレクトボックス/チェックボックス/ラジオボタン)したソースは以下のとなります
    function example_page($form, &$form_state){
    
        // 1. Include CTools Dependent helper
        ctools_include('dependent');
    
        $form['select_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
        );
    
        $form['select_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'select',
            '#options' => array (
                'none'=>t('Select one'),
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
            ),
            '#default_value' => array('none'),
    
        );
        $form['select_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
            // セレクトが「旅行」の場合にこのエレメントが表示される
            '#dependency' => array('edit-restrict-by' => array('trip')),
        );
        $form['select_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            // セレクトが「カレンダー」の場合にこのエレメントが表示される
            '#dependency' => array('edit-restrict-by' => array('month')),
        );
    
    
        $form['radio_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Selectbox Set'),
        );
        $form['radio_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'radios',
            '#options' => array (
                'none'=>t('Select one'),
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
            ),
            '#default_value' => 'none',
    
        );
        $form['radio_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
            '#dependency' => array('radio:restrict_by' => array('trip')),
        );
    
        $form['radio_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            '#dependency' => array('radio:restrict_by' => array('month')),
        );
        $form['Checkbox_set'] = array(
            '#type' => 'fieldset',
            '#title' => t('Checkbox Set'),
        );
    
        $form['Checkbox_set']['restrict_by'] = array (
            '#title' => t('選択してください'),
            '#type' => 'checkboxes',
            '#options' => array (
                'trip'=>t('旅行'),
                'month'=>t('カレンダー'),
            ),
    
        );
    
        $form['Checkbox_set']['trips'] = array (
            '#type' => 'select',
            '#title' => t('旅行'),
            '#options' => array (
                'trip1' => t('地中海クルーズ'),
                'trip2' => t('南極旅行'),
            ),
    
            // チェックボックスのIDが変わったので注意が必要
            '#dependency' => array('edit-restrict-by-trip--2' => array(true)),
        );
    
        $form['Checkbox_set']['months'] = array (
            '#type' => 'select',
            '#title' => t('カレンダー'),
            '#options' => array (
                '1' => t('一月'),
                '2' => t('二月'),
                //...and so on
            ),
            '#dependency' => array('edit-restrict-by-month--2' => array(true)),
        );
    
    
        return $form;
    }
    

Ctoolsの依存(dependent)が表示/非表示制御のみ、FormAPIのstatesより制御範囲が狭いです

  • FormAPIに"#dependency"プロパティをプラグインは、表示/非表示のみとなります