Drupalでajaxのフレームワークで動的に要素を作成する例

やりたいこと：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一覧を参考してください

やりたいこと：モジュール（VBO）の各処理（Operation）に独自（カスタム）オプションを追加したい

• 前回モジュール（VBO）にたいして処理（Operation）オプション追加を紹介しました
  •  Drupalのモジュール（VBO）の一括処理後にページ遷移させる方法
  • このオプションは全VBOに対して作成したものですが、すべての処理に影響を与えています
• 各種処理（Operation）に対してどのようにオプションを追加するか前回の課題として残っています
• 今回はこの課題を解決に新しいカスタムモジュール（vbo_redirect_option）を作成して、紹介します
  

hook_formとCtoolsのdepent systemより各オペレーションに独自のオプションを追加

• VBOのオペレーション設定フォームがカスタマイズとして開放していないです（前回も説明した）
• ここで、Drupalのhook_formでVBOのオペレーション設定画面を特定して、カスタムオプション追加することになりました

  function vbo_redirect_option_form_alter(&$form, &$form_state, $form_id)
  {
      if( isset($form_state['id']) && $form_state['id'] === "views_bulk_operations"){
  
          foreach( $form_state['input']['options']['vbo_operations'] as $key => $operation) {
              if( $operation['redirect_check'] && strlen( trim($operation['redirect_url']))>0 ) {
                  variable_set( $key, $operation['redirect_url'] );
              } else {
                  if( !empty( variable_get($key) ) ) variable_del( $key ) ;
              }
          }
  
  
          foreach( $form['options']['vbo_operations'] as $key => &$operation ){
              if( !is_array($operation) ) continue ;
  
              $redirect_url = variable_get($key);
              $dep_key = "edit-options-vbo-operations-" . str_replace("_", "-", str_replace("::","",$key) ) ;
  
              $operation['redirect_check'] = array(
                  '#type' => 'checkbox',
                  '#title' => t('Redirect page to after operation'),
                  '#default_value' =>  $redirect_url ? 1 : 0 ,
                  '#dependency' => array(　　　　// Ctoolsのdependent systemに依存
                      $dep_key."-selected" => array(1),
                  ),
              );
              $operation['redirect_url'] = array(
                  '#type' => 'textfield',
                  '#title' => t('Provide label'),
                  '#title_display' => 'invisible',
                  '#default_value' => empty($redirect_url) ? "" : $redirect_url,
                  '#dependency' => array(　　　　// Ctoolsのdependent systemに依存
                      $dep_key."-selected" => array(1),
                      $dep_key . '-redirect-check' => array(1),
                  ),
                  '#dependency_count' => 2,
              );
          }
      }
  }

  • 設定フォームにチェックボックスをチェックしたら、画面遷移URL入力フィールドが現れるダイナミックフォームはモジュール（Ctools）のdependent systemを利用しています

処理（Operation）確認ステップをスキップがあるかないかを確認してhook_views_bulk_operations_form_alter()実装でオプションの設定を行う

• VBOの処理（Operation）が確認ステップがあるかないかは2種類あります（この二種類をの処理プロセスが違うのでしっかりテストする必要がある）
• hook_views_bulk_operations_form_alter()を実装して、各処理ステップにカスタマイズを行います

  function vbo_redirect_option_views_bulk_operations_form_alter(&$form, &$form_state, $vbo)
  {
      // collect all operations that has contained redirect_rul
      $redirect_arr = array();
      foreach( $vbo->options['vbo_operations'] as $key => $operation ) {
          if( !empty( variable_get($key) ) ){
              $redirect_arr[$key] = $key ;
          }
      }
  
      // add redirect step to #submit element
      if(isset($form['select'])) {
  
          // this is the form start step
          foreach( $form['select'] as $key => &$element ){
              if( isset($redirect_arr[$key]) ){
                  // we check if there is any operation has redirect_url
                  $element['#submit'][] = 'vbo_redirect_after_operation';
                  // only one is enough, we will detect witch one in the callback function
                  break;
              }
          }
  
          // do operation with confirmation step
          // this is the confirmation step
      } else if( !$form_state['operation']->getAdminOption('skip_confirmation') ) {
          $form['actions']['submit']['#submit'][] = "vbo_redirect_after_operation_with_confirmation";
          $form_state['redirect_to_after_operation'] = $form_state['operation']->getAdminOption('redirect_url');
      }
  
  }
  
  
  /**
   * callback function that has called by operation
   * this is the form start step, we don't know if it has confirmation step or not
   * @param $form
   * @param $form_state
   */
  function vbo_redirect_after_operation(&$form, &$form_state){
      // the are multiple element can be operated
      // the right one that has be sent to this step
      // we need get redirect_url if the it has
      if( isset($form_state['operation']) ){
          // get redirect_url by operation_id
          $redirec=variable_get($form_state['operation']->operationId) ;
          if( !empty($redirec) ){
              if( $form_state['operation']->getAdminOption('skip_confirmation') ) {
                  $form_state['redirect'] = $redirec;
              }
          }
      }
  }
  
  /**
   * callback function that has be called by operation with confirmation step
   * @param $form
   * @param $form_state
   */
  function vbo_redirect_after_operation_with_confirmation( $form, &$form_state ){
      // there is only operation that has be sent here with the confirmation step
      if( isset($form_state['redirect_to_after_operation']) ){
          // set redirect_url that should be stored in $form_state
          $form_state['redirect'] = $form_state['redir　ect_to_after_operation'];
      }
  }

感想と結論：VBOの処理オプション設定はカスタマイズに開放していないため、各種処理（Operation）のオプションの取得、設定に苦労します

• VBOの処理オプション設定はユーザーにカスタマイズに開放していないです
• オペレーションの各ステップに$form、$form_state、$vbo変数から必要な情報を取得したり、セットしたりしました
• 必要な情報がどこにあるかは不明だし（その時dsm($vbo)などで確認）、特定するまでに、時間がかかりました。

Drupalのajaxフレームワークにあるajax_command_invokeがユーザーが自分的にしたjavascriptのカスタムコマンドの呼び出しができます

• Drupalのajaxフレームワークに、クライアント側のUI要素追加、更新、削除、cssなどの処理コマンドが数多くあります
  • コマンドの説明：https://api.drupal.org/api/drupal/includes%21ajax.inc/group/ajax_comman…
• ajaxコマンド：ajax_command_invoke があります。このコマンドがユーザー自分作成したjavascriptの呼び出しができます
• 例： クライアント側で要素削除時に、自作にjavascriptで要素をゆっくり消していく動画効果を再現します
  

方法１：ｊQueryのカスタム関数で定義します

• ｊQueryのカスタム関数を利用して、上記動画効果のjavascriptを作成して、Drupalのajax_command_invokeより呼びされます
  
• Drupalのajax_command_invokeでカスタム関数にパラメターを渡して、実行させます

  // サーバ側でカスタム関数（removeElement）にパラメータを渡して実行させる
  $commands = array();
  $commands[] = ajax_command_invoke( null,
                                     'removeElement', 
                                      array("#del-div-".$entity->entity_id) );
  return array(  '#type'=>"ajax",  '#commands' => $commands,);
  
  // クライアント側で実行されるカスタム関数（removeElement）
  jQuery.fn.removeElement = function(ele_id) {
      jQuery( ele_id )
          .css({'opacity':0, 'transition': 'all 1s' })   // cssで要素の透明度をゼロにする
          .delay(1000).queue(function(){jQuery( ele_id ).remove()} ) ; // 1秒後に要素の削除
  };
  

   

方法２：Drupalのajaxフレームワーク（Drupal.ajax.prototype.commands）にカスタム関数をバインドします

• DrupalのajaxフレームワークにｊQueryのようにカスタム関数の追加ができます
• パラメータの引き渡しはｊQueryのカスタム関数と違います
  • ｊQueryのカスタム関数にパラメーターを配列に渡します
  • Drupal.ajax.prototype.commandsにパラメータを個別に渡します
• 上記の例では同じようにDrupal.ajax.prototype.commandsで実現します

  // サーバ側でカスタム関数（removeElement）にパラメータを渡して実行させる 
  $commands = array(); 
  $commands[] = array( 'command' => 'removeElement', 
                                      'ele_id' => "#del-div-".$entity->entity_id) ); 
  return array( '#type'=>"ajax", '#commands' => $commands,); 
  
  // クライアント側のカスタム関数（removeElement）の実行
  Drupal.ajax.prototype.commands.removeElement = 
  function(ajax, response, status) {
      jQuery( response.ele_id )
          .css({'opacity':0, 'transition': 'all 1s' })
          .delay(1000).queue(function(){jQuery( response.ele_id ).remove()}) ;
  }

   

• 同じ結果となります