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

• FormAPIで簡単に要素間の動作制御（JavaScriptの拡張）ができます。
• 例えば、２選択肢の一方が選択された、その選択肢に応じるよう別の要素を表示させたい場合、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のプログラムレベルで簡単にajaxを利用してクライアント側でデータ交信をしたいです

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

ポイント１：Drupaｌで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がセットされたことの確認ができます

ポイント２：クライアント側の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対応有無の結果を返します
  
• 上記例のプログラムは以下のようで

  /**
   * 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の２，３番目がクライアント側で生成
        'page callback' => 'ajax_node_response',
        'page arguments' => array(2,3),   // URLの２，３番目の引数をコールバック関数に渡す
        '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;
    }
  }
  

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

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

やりたいこと：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の利用は「Drupalのフォーム（FromAPI）でのajaxの実装」、「Drupalでajaxのフレームワークが簡単に作成できる」をご参考ください
• 上記追加されたJSファイルが正常に動作しています

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

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

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

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

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

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

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

• DrupalのAJAXのフレームワークは「ｍｉｓｃ/ａｊａｘ．ｊｓ」にあります
• ＡＪＡＸを実装する場合、このｊｓファイルを必ずインポートする必要があります

  drupal_add_js("/misc/ajax.js") ;  // ajaxのjsファイルをインポート

• ここで、あるフォーム（text_form）のボタンを押して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（必須）： ａｊａｘの識別、ここでフォームＩＤ（test-form-submit）で指定
  • url(必須)： サイトのパス/system/ajax
  • event： ajaxを作動させるイベントの指定
  • progress： 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のAJAXでマルチステップフォームを作成したいです

• 背景：Drupal7.54、FormAPIのAJAXを利用して、マルチステップフォームの作成
• FormAPIでマルチステップフォームの作成ができます（DrupalのFormAPIでマルチステップフォーム作成の基本 ）
• マルチステップフォームの作成には、AJAXの方が有利です
  • フォームHTMLの部分を置換すればよいので、全体的なページの更新必要はありません（パフォーマンスが良い）
  • AJAXがサーバーサイトとの交信URLが隠されています
  • DrupalのAJAXフレームワークを直接の利用で、簡単に実現できます（各ステップのフォームを直接に指定することができ、考え方が明確的）

DrupalのAJAXのdrupal_command_replace関数でフォームを置換してマルチステップフォームを作成します

• DrupalのAJAXの利用は:Drupalのフォーム（FromAPI）でのajaxの実装 を参考してください
• 各ステップのフォームがAJAXのコールバック関数内で定義しますので、FormAPIの実装方法より明確的になります
  
• AJAXで実装したマルチステップフォーム（ステップ１とステップ２の交替表示）例

  /**
   *  メニューでURLの定義
   */
  function your_module_menu() {
    $items['form/multiple-step'] = array(
        'title' => t('Multiple Step Form Test'),
        'page callback' => 'drupal_get_form',
        'page arguments' => array('page_one_form'),
        'access arguments' => array('access content'),
    );
    return $items;
  }
  
  /**
   *  ステップ１ フォームの定義
   */
  function page_one_form( $form, &$form_state ){
  
    $form['message_field'] = array(
        '#type' => 'markup',
        '#markup' => 'Form Step 1',
    );
    // サブミットボタン
    $form['submit'] = array(
        '#type' => 'submit',
        '#value' => '送信',
  	  '#ajax' => array(
          'callback' => 'card_1_ajax_callback',
        ),
    );
  
    return $form;}
  }
  
  /**
   *  ステップ２ フォームの定義
   */
  function page_two_form( $form, &$form_state ){
  
    $form['test_form']=array(
        '#type' => 'item',
        '#title' => 'Multiple Step Form',
        '#markup' => '<p>Step ２</p>',
    );
    $form['submit'] = array(
        '#type' => 'submit',
        '#value' => '送信',
  	  '#ajax' => array(
          'callback' => 'card_2_ajax_callback',
        ),
    );
  
    return $form;
  }
  
  /**
   *  ステップ１のコールバック関数
   */
  function card_1_ajax_callback($form, &$form_state){
  　// 次のステップのフォームの用意
    $form =  drupal_rebuild_form( 'card_two_form', $form_state );
  　// フォームのHTML部分の置換コマンド用意
    $commands[]=ajax_command_replace( '#block-system-main',
  		'<section class="block block-system clearfix" 
  				　id="block-system-main">'.render($form).'</section>' );
  
    return array('#type' => 'ajax', '#commands' => $commands);
  }
  
  /**
   *  ステップ２のコールバック関数
   */
  function card_2_ajax_callback($form, &$form_state){
  　// 次のステップのフォームの用意
    $form =  drupal_rebuild_form( 'card_one_form', $form_state );
  　// フォームのHTML部分の置換コマンド用意
    $commands[]=ajax_command_replace( '#block-system-main','<section class="block block-system clearfix" id="block-system-main">'.render($form).'</section>' );
  
    return array('#type' => 'ajax', '#commands' => $commands);
  }