Drupalのモジュール（ctools）でのajaxポップアップ（modal）作成の基本
今回、画面でポップアップでデータ入力、ajaxでデータを更新することを試みたいですが、ｊQuery、Bootstrapなどのmodalライブラリで実現ができます。但しDrupalサイトでポップアップを作るとしたら、やはりctoolsのModal機能を利用してみたいです（ctools(Chaos tool suite)はDrualの開発によく利用されているAPI）。
やりたいこと：ポップアップを立ち上げて入力したデータをajaxでサーバーと交信
- ポップアップ（modal）の作成
- データ入力フォームの表示
- 入力されたデータをajaxでサーバーに送信、データ更新
ポップアップ作成の流れの基本：ctoolsのmodal.jsを利用します
- ポップアップを開くリンク/ボタンの作成
- ctoolsのmodal.js、modal.cssをこのページに入れる（ajaxで操作するため）
- ポップアップのリンク/ボタンがクリックされた、ポップアップが開く
- ポップアップのフォームにデータ入力、送信ボタンクリック
- 入力されたデータをサーバーにajaxで送信、データ更新される
ctoolsのmodal利用の問題点
- ctoolsのmodal利用に関する紹介はウェブ上にたくさんあります。また、インストールされたctools（modules\ctools\ctools_ajax_sample\ctools_ajax_sample.module）にサンプルプログラムもあります
- 問題点1：ポップアップに表示されるフォームはjavascriptでhtmlコードとして吐き出されています（modules\ctools\ctools_ajax_sample\js\ctools-ajax-sample.js）
- 簡単なフォームに問題はないが、複雑なフォームに煩雑になります
- 問題点2：ポップアップウィンドウに関する設定はphpソースコード内で定義
- ロジックとUI設定を分離しべき、ポップアップに関する設定はcss、jsに任せるべき
ctoolsのmodal利用の改善
- 上記問題1は、DrupalのForm APIを利用して、フォーム作成を行います
- 上記問題2は、ポップアップの外観はサイト全体のテーマ（bootstrap）に統一し、背景、フォントサイズなどはcssファイルで個別に設定します
ポップアップの作成
- ポップアップを起動するリンク/ボタンの作成は省略します
- ポップアップとの通信URLをhook_menuで作成
$items['my-module/%ctools_js/add'] = array(
'page callback' => 'my_module_callback',
'page arguments' => array(1),
'access callback' => TRUE,
'type' => MENU_CALLBACK,
);
- URLの設定に「%ctools_js」部分があります。ここで、'nojs'の定数を入力する必要はあります。例：http://your-site/my-module/nojs/add
- ポップアップの起動リンク/ボタンのクラス属性： class="ctools-use-modal"をセットします（これがないと、Modalポップアップの起動はできないです）
- ページのコールバック関数（my_module_callback）の作成
function my_module_callback($ajax) {
if ($ajax) {
// ctoolsのajax、modalに関するjsファイルをクライアントへ
ctools_include('ajax');
ctools_include('modal');
//フォーム作成に関する上方
$form_state = array(
'ajax' => TRUE,
'title' => t('New Group Creation'),
);
//ポップアップフォームの作成
//フォームからの更新データを$form_stateにセットする
$output = ctools_modal_form_wrapper('my_module_form', $form_state);
//新規ポップアップにajaxが有効にする
if (!empty($form_state['ajax_commands'])) {
$output = $form_state['ajax_commands'];
}
//ポップアップの出力
print ajax_render($output);
drupal_exit();
}
else {
return drupal_get_form('mymodule_form');
}
}
// ポップアップにある入力フォームの定義
function my_module_form($form, $form_state) {
$form = array();
$form['new_link_text'] = array(
'#type' => 'textfield',
'#title' => t('Group Name'),
);
$form['submit'] = array(
'#type' => 'submit',
'#value' => t('Submit'),
);
return $form;
}
// データ更新
function my_module_form_submit(&$form, &$form_state) {
// データの更新
// ロジックは省略
// ポップアップを閉じるコマンド
$form_state['ajax_commands'][] = ctools_modal_command_dismiss();
}
- 注目すべき関数の役割： ctools_modal_form_wrapper
- 定義されたフォーム（my_module_form）をレンダリング可能にする
- ajaxからのデータ送信情報を$form_stateに設定
- hook_form_submitなどの起動
