Drupalのフォーム（FromAPI）でのajaxの実装

やりたいこと：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処理
  
• 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のプログラムレベルで簡単に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一覧を参考してください

やりたいこと：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処理
  
• 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のプログラムレベルで簡単に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一覧を参考してください

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コマンドの作成

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

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

• クライアント側で事前にｊQueryのjavascript関数を定義します
• ajax_command_invokeで定義された関数を呼び出します
  

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

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