メインコンテンツに移動

メインナビゲーション

  • ホーム
  • サイトマップ
  • ビデオ
  • ご連絡

パンくず

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

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

javascript
development
ctools
ajax

やりたいこと: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
development
form

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

 

ホーム

古松

検索

Article Category

  • apache(7)
  • css(19)
  • drupal(295)
  • Electron(4)
  • html(34)
  • javascript(27)
  • laravel(4)
  • linux(5)
  • macOS(2)
  • mysql(13)
  • php(19)
  • python(4)
  • SEO(12)
  • video(72)
  • Visual Studio Code(4)
  • windows(13)
  • wordpress(32)