メインコンテンツに移動
ホーム

古松

メインナビゲーション

  • ホーム
  • ビデオ
  • ご連絡

パンくず

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

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処理
    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のフォーム(Form API)の「#states」で各フォーム要素の動作制御が可能

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で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一覧を参考してください

 


AJAXで動的に追加したJSファイルが正常動作しているがブラウザのソースから見つからない(デバッグができない)対処

やりたいこと: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の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のAJAXでマルチステップフォームの作成

やりたいこと: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の実装方法より明確的になります
    DrupalのAJAXでマルチステップフォームの作成
  • AJAXで実装したマルチステップフォーム(ステップ1とステップ2の交替表示)例
    /**
     *  メニューで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;
    }
    
    /**
     *  ステップ1 フォームの定義
     */
    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;}
    }
    
    /**
     *  ステップ2 フォームの定義
     */
    function page_two_form( $form, &$form_state ){
    
      $form['test_form']=array(
          '#type' => 'item',
          '#title' => 'Multiple Step Form',
          '#markup' => '<p>Step 2</p>',
      );
      $form['submit'] = array(
          '#type' => 'submit',
          '#value' => '送信',
    	  '#ajax' => array(
            'callback' => 'card_2_ajax_callback',
          ),
      );
    
      return $form;
    }
    
    /**
     *  ステップ1のコールバック関数
     */
    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);
    }
    
    /**
     *  ステップ2のコールバック関数
     */
    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);
    }
    

     


検索フォーム

カテゴリ別

  • laravel
  • drupal
  • javascript
  • windows
  • html
  • mysql
  • php
  • apache
  • css
  • SEO
  • video
  • wordpress
  • linux
  • python
  • Electron
  • Visual Studio Code

google ads