Drupalのカスタムajax_command作成の方法

やりたいこと：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を扱うのは基本です

• 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でメッセージの返還もできます