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

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