/** * Implements hook_init(). */ function YOUR_MODULE_NAME_init() { drupal_add_js('misc/jquery.form.js'); drupal_add_library('system','drupal.ajax'); }
<a href="text/ajax/nojs/1234" class="use-ajax">ajaxリンク</a>
/** * 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; } }
/** * 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'] ; }
今回、画面でポップアップでデータ入力、ajaxでデータを更新することを試みたいですが、jQuery、Bootstrapなどのmodalライブラリで実現ができます。但しDrupalサイトでポップアップを作るとしたら、やはりctoolsのModal機能を利用してみたいです(ctools(Chaos tool suite)はDrualの開発によく利用されているAPI)。
$items['my-module/%ctools_js/add'] = array( 'page callback' => 'my_module_callback', 'page arguments' => array(1), 'access callback' => TRUE, 'type' => MENU_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(); }
/** * Implements hook_init(). */ function YOUR_MODULE_NAME_init() { drupal_add_js('misc/jquery.form.js'); drupal_add_library('system','drupal.ajax'); }
<a href="text/ajax/nojs/1234" class="use-ajax">ajaxリンク</a>
/** * 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; } }
・・・・・・ // ここで、ajax_commandの使用方法を省略 $commands[] = ajax_command_append("head", "<script type='text/javascript' src='/your/module/path/test.js"></script>" ); return array('#type' => 'ajax', '#commands' => $commands);
/** * 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'] ; }
/** * Implements hook_init(). */ function YOUR_MODULE_NAME_init() { drupal_add_js('misc/jquery.form.js'); drupal_add_library('system','drupal.ajax'); }
<a href="text/ajax/nojs/1234" class="use-ajax">ajaxリンク</a>
/** * 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; } }
drupal_add_js("/misc/ajax.js") ; // ajaxのjsファイルをインポート
// 例: 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" );
(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)
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); }
/** * 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'] ; }
/** * Implements hook_init(). */ function YOUR_MODULE_NAME_init() { drupal_add_js('misc/jquery.form.js'); drupal_add_library('system','drupal.ajax'); }
<a href="text/ajax/nojs/1234" class="use-ajax">ajaxリンク</a>
/** * 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; } }
/** * Implements hook_init(). */ function YOUR_MODULE_NAME_init() { drupal_add_js('misc/jquery.form.js'); drupal_add_library('system','drupal.ajax'); }
<a href="text/ajax/nojs/1234" class="use-ajax">ajaxリンク</a>
/** * 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; } }
drupal_add_js("/misc/ajax.js") ; // ajaxのjsファイルをインポート
// 例: 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" );
(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)
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); }
/** * 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'] ; }
/** * Implements hook_init(). */ function YOUR_MODULE_NAME_init() { drupal_add_js('misc/jquery.form.js'); drupal_add_library('system','drupal.ajax'); }
<a href="text/ajax/nojs/1234" class="use-ajax">ajaxリンク</a>
/** * 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; } }
/** * Implements hook_init(). */ function YOUR_MODULE_NAME_init() { drupal_add_js('misc/jquery.form.js'); drupal_add_library('system','drupal.ajax'); }
<a href="text/ajax/nojs/1234" class="use-ajax">ajaxリンク</a>
/** * 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; } }
drupal_add_js("/misc/ajax.js") ; // ajaxのjsファイルをインポート
// 例: 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" );
(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)
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); }
/** * 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'] ; }
/** * Implements hook_init(). */ function YOUR_MODULE_NAME_init() { drupal_add_js('misc/jquery.form.js'); drupal_add_library('system','drupal.ajax'); }
<a href="text/ajax/nojs/1234" class="use-ajax">ajaxリンク</a>
/** * 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; } }
/** * Implements hook_init(). */ function YOUR_MODULE_NAME_init() { drupal_add_js('misc/jquery.form.js'); drupal_add_library('system','drupal.ajax'); }
<a href="text/ajax/nojs/1234" class="use-ajax">ajaxリンク</a>
/** * 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; } }
drupal_add_js("/misc/ajax.js") ; // ajaxのjsファイルをインポート
// 例: 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" );
(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)
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); }
/** * 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'] ; }
/** * Implements hook_init(). */ function YOUR_MODULE_NAME_init() { drupal_add_js('misc/jquery.form.js'); drupal_add_library('system','drupal.ajax'); }
<a href="text/ajax/nojs/1234" class="use-ajax">ajaxリンク</a>
/** * 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; } }
/** * Implements hook_init(). */ function YOUR_MODULE_NAME_init() { drupal_add_js('misc/jquery.form.js'); drupal_add_library('system','drupal.ajax'); }
<a href="text/ajax/nojs/1234" class="use-ajax">ajaxリンク</a>
/** * 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; } }
drupal_add_js("/misc/ajax.js") ; // ajaxのjsファイルをインポート
// 例: 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" );
(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)
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); }
/** * 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'] ; }
/** * Implements hook_init(). */ function YOUR_MODULE_NAME_init() { drupal_add_js('misc/jquery.form.js'); drupal_add_library('system','drupal.ajax'); }
<a href="text/ajax/nojs/1234" class="use-ajax">ajaxリンク</a>
/** * 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; } }
/** * Implements hook_init(). */ function YOUR_MODULE_NAME_init() { drupal_add_js('misc/jquery.form.js'); drupal_add_library('system','drupal.ajax'); }
<a href="text/ajax/nojs/1234" class="use-ajax">ajaxリンク</a>
/** * 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; } }
drupal_add_js("/misc/ajax.js") ; // ajaxのjsファイルをインポート
// 例: 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" );
(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)
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); }
/** * 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'] ; }
/** * Implements hook_init(). */ function YOUR_MODULE_NAME_init() { drupal_add_js('misc/jquery.form.js'); drupal_add_library('system','drupal.ajax'); }
<a href="text/ajax/nojs/1234" class="use-ajax">ajaxリンク</a>
/** * 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; } }
/** * Implements hook_init(). */ function YOUR_MODULE_NAME_init() { drupal_add_js('misc/jquery.form.js'); drupal_add_library('system','drupal.ajax'); }
<a href="text/ajax/nojs/1234" class="use-ajax">ajaxリンク</a>
/** * 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; } }
drupal_add_js("/misc/ajax.js") ; // ajaxのjsファイルをインポート
// 例: 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" );
(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)
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); }
/** * 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'] ; }
/** * Implements hook_init(). */ function YOUR_MODULE_NAME_init() { drupal_add_js('misc/jquery.form.js'); drupal_add_library('system','drupal.ajax'); }
<a href="text/ajax/nojs/1234" class="use-ajax">ajaxリンク</a>
/** * 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; } }
/** * Implements hook_init(). */ function YOUR_MODULE_NAME_init() { drupal_add_js('misc/jquery.form.js'); drupal_add_library('system','drupal.ajax'); }
<a href="text/ajax/nojs/1234" class="use-ajax">ajaxリンク</a>
/** * 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; } }
drupal_add_js("/misc/ajax.js") ; // ajaxのjsファイルをインポート
// 例: 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" );
(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)
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); }
/** * 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'] ; }
/** * Implements hook_init(). */ function YOUR_MODULE_NAME_init() { drupal_add_js('misc/jquery.form.js'); drupal_add_library('system','drupal.ajax'); }
<a href="text/ajax/nojs/1234" class="use-ajax">ajaxリンク</a>
/** * 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; } }
/** * Implements hook_init(). */ function YOUR_MODULE_NAME_init() { drupal_add_js('misc/jquery.form.js'); drupal_add_library('system','drupal.ajax'); }
<a href="text/ajax/nojs/1234" class="use-ajax">ajaxリンク</a>
/** * 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; } }
drupal_add_js("/misc/ajax.js") ; // ajaxのjsファイルをインポート
// 例: 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" );
(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)
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); }
/** * 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'] ; }
/** * Implements hook_init(). */ function YOUR_MODULE_NAME_init() { drupal_add_js('misc/jquery.form.js'); drupal_add_library('system','drupal.ajax'); }
<a href="text/ajax/nojs/1234" class="use-ajax">ajaxリンク</a>
/** * 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; } }
/** * Implements hook_init(). */ function YOUR_MODULE_NAME_init() { drupal_add_js('misc/jquery.form.js'); drupal_add_library('system','drupal.ajax'); }
<a href="text/ajax/nojs/1234" class="use-ajax">ajaxリンク</a>
/** * 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; } }
drupal_add_js("/misc/ajax.js") ; // ajaxのjsファイルをインポート
// 例: 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" );
(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)
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); }
/** * 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'] ; }
/** * Implements hook_init(). */ function YOUR_MODULE_NAME_init() { drupal_add_js('misc/jquery.form.js'); drupal_add_library('system','drupal.ajax'); }
<a href="text/ajax/nojs/1234" class="use-ajax">ajaxリンク</a>
/** * 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; } }
/** * Implements hook_init(). */ function YOUR_MODULE_NAME_init() { drupal_add_js('misc/jquery.form.js'); drupal_add_library('system','drupal.ajax'); }
<a href="text/ajax/nojs/1234" class="use-ajax">ajaxリンク</a>
/** * 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; } }
drupal_add_js("/misc/ajax.js") ; // ajaxのjsファイルをインポート
// 例: 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" );
(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)
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); }
/** * 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'] ; }
/** * Implements hook_init(). */ function YOUR_MODULE_NAME_init() { drupal_add_js('misc/jquery.form.js'); drupal_add_library('system','drupal.ajax'); }
<a href="text/ajax/nojs/1234" class="use-ajax">ajaxリンク</a>
/** * 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; } }
/** * Implements hook_init(). */ function YOUR_MODULE_NAME_init() { drupal_add_js('misc/jquery.form.js'); drupal_add_library('system','drupal.ajax'); }
<a href="text/ajax/nojs/1234" class="use-ajax">ajaxリンク</a>
/** * 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; } }
drupal_add_js("/misc/ajax.js") ; // ajaxのjsファイルをインポート
// 例: 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" );
(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)
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); }
/** * 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'] ; }
/** * Implements hook_init(). */ function YOUR_MODULE_NAME_init() { drupal_add_js('misc/jquery.form.js'); drupal_add_library('system','drupal.ajax'); }
<a href="text/ajax/nojs/1234" class="use-ajax">ajaxリンク</a>
/** * 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; } }
/** * Implements hook_init(). */ function YOUR_MODULE_NAME_init() { drupal_add_js('misc/jquery.form.js'); drupal_add_library('system','drupal.ajax'); }
<a href="text/ajax/nojs/1234" class="use-ajax">ajaxリンク</a>
/** * 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; } }
drupal_add_js("/misc/ajax.js") ; // ajaxのjsファイルをインポート
// 例: 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" );
(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)
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); }
/** * 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'] ; }
/** * Implements hook_init(). */ function YOUR_MODULE_NAME_init() { drupal_add_js('misc/jquery.form.js'); drupal_add_library('system','drupal.ajax'); }
<a href="text/ajax/nojs/1234" class="use-ajax">ajaxリンク</a>
/** * 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; } }
/** * Implements hook_init(). */ function YOUR_MODULE_NAME_init() { drupal_add_js('misc/jquery.form.js'); drupal_add_library('system','drupal.ajax'); }
<a href="text/ajax/nojs/1234" class="use-ajax">ajaxリンク</a>
/** * 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; } }
drupal_add_js("/misc/ajax.js") ; // ajaxのjsファイルをインポート
// 例: 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" );
(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)
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); }
/** * 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'] ; }
/** * Implements hook_init(). */ function YOUR_MODULE_NAME_init() { drupal_add_js('misc/jquery.form.js'); drupal_add_library('system','drupal.ajax'); }
<a href="text/ajax/nojs/1234" class="use-ajax">ajaxリンク</a>
/** * 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; } }
/** * Implements hook_init(). */ function YOUR_MODULE_NAME_init() { drupal_add_js('misc/jquery.form.js'); drupal_add_library('system','drupal.ajax'); }
<a href="text/ajax/nojs/1234" class="use-ajax">ajaxリンク</a>
/** * 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; } }
drupal_add_js("/misc/ajax.js") ; // ajaxのjsファイルをインポート
// 例: 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" );
(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)
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); }
/** * 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'] ; }
/** * Implements hook_init(). */ function YOUR_MODULE_NAME_init() { drupal_add_js('misc/jquery.form.js'); drupal_add_library('system','drupal.ajax'); }
<a href="text/ajax/nojs/1234" class="use-ajax">ajaxリンク</a>
/** * 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; } }
/** * Implements hook_init(). */ function YOUR_MODULE_NAME_init() { drupal_add_js('misc/jquery.form.js'); drupal_add_library('system','drupal.ajax'); }
<a href="text/ajax/nojs/1234" class="use-ajax">ajaxリンク</a>
/** * 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; } }
drupal_add_js("/misc/ajax.js") ; // ajaxのjsファイルをインポート
// 例: 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" );
(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)
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); }
/** * 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'] ; }
/** * Implements hook_init(). */ function YOUR_MODULE_NAME_init() { drupal_add_js('misc/jquery.form.js'); drupal_add_library('system','drupal.ajax'); }
<a href="text/ajax/nojs/1234" class="use-ajax">ajaxリンク</a>
/** * 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; } }
/** * Implements hook_init(). */ function YOUR_MODULE_NAME_init() { drupal_add_js('misc/jquery.form.js'); drupal_add_library('system','drupal.ajax'); }
<a href="text/ajax/nojs/1234" class="use-ajax">ajaxリンク</a>
/** * 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; } }
drupal_add_js("/misc/ajax.js") ; // ajaxのjsファイルをインポート
// 例: 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" );
(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)
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); }
/** * 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'] ; }
/** * Implements hook_init(). */ function YOUR_MODULE_NAME_init() { drupal_add_js('misc/jquery.form.js'); drupal_add_library('system','drupal.ajax'); }
<a href="text/ajax/nojs/1234" class="use-ajax">ajaxリンク</a>
/** * 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; } }
/** * Implements hook_init(). */ function YOUR_MODULE_NAME_init() { drupal_add_js('misc/jquery.form.js'); drupal_add_library('system','drupal.ajax'); }
<a href="text/ajax/nojs/1234" class="use-ajax">ajaxリンク</a>
/** * 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; } }
drupal_add_js("/misc/ajax.js") ; // ajaxのjsファイルをインポート
// 例: 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" );
(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)
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); }
/** * 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'] ; }
/** * Implements hook_init(). */ function YOUR_MODULE_NAME_init() { drupal_add_js('misc/jquery.form.js'); drupal_add_library('system','drupal.ajax'); }
<a href="text/ajax/nojs/1234" class="use-ajax">ajaxリンク</a>
/** * 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; } }
/** * Implements hook_init(). */ function YOUR_MODULE_NAME_init() { drupal_add_js('misc/jquery.form.js'); drupal_add_library('system','drupal.ajax'); }
<a href="text/ajax/nojs/1234" class="use-ajax">ajaxリンク</a>
/** * 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; } }
drupal_add_js("/misc/ajax.js") ; // ajaxのjsファイルをインポート
// 例: 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" );
(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)
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); }
/** * 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'] ; }
/** * Implements hook_init(). */ function YOUR_MODULE_NAME_init() { drupal_add_js('misc/jquery.form.js'); drupal_add_library('system','drupal.ajax'); }
<a href="text/ajax/nojs/1234" class="use-ajax">ajaxリンク</a>
/** * 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; } }
/** * Implements hook_init(). */ function YOUR_MODULE_NAME_init() { drupal_add_js('misc/jquery.form.js'); drupal_add_library('system','drupal.ajax'); }
<a href="text/ajax/nojs/1234" class="use-ajax">ajaxリンク</a>
/** * 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; } }
drupal_add_js("/misc/ajax.js") ; // ajaxのjsファイルをインポート
// 例: 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" );
(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)
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); }
/** * 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'] ; }
/** * Implements hook_init(). */ function YOUR_MODULE_NAME_init() { drupal_add_js('misc/jquery.form.js'); drupal_add_library('system','drupal.ajax'); }
<a href="text/ajax/nojs/1234" class="use-ajax">ajaxリンク</a>
/** * 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; } }
/** * Implements hook_init(). */ function YOUR_MODULE_NAME_init() { drupal_add_js('misc/jquery.form.js'); drupal_add_library('system','drupal.ajax'); }
<a href="text/ajax/nojs/1234" class="use-ajax">ajaxリンク</a>
/** * 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; } }
drupal_add_js("/misc/ajax.js") ; // ajaxのjsファイルをインポート
// 例: 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" );
(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)
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); }
Drupalでダイナミックフォーム作成するには大体3っつの方法があります
// "#"states" 定義の基本 "#"states" => array( 'visible' => array( JQUERY_SELECTOR => REMOTE_CONDITIONS, ... ), ) // 例:チェックボックスがチェックされたときに要素が表示される "#"states" => array( 'visible' => array( ':input[name="remote_checkbox"]' => array('checked' => TRUE), ), )
$form['select_set'] = array( '#type' => 'fieldset', '#title' => t('Selectbox Set'), ); $form['select_set']['restrict_by'] = array ( '#title' => t('選択してください'), '#type' => 'select', '#options' => array ( 'none'=>t('Select one'), 'trip'=>t('旅行'), 'month'=>t('カレンダー'), 'uncollapse'=>t('次の要素を開く'), ), '#default_value' => array('none'), ); $form['select_set']['trips'] = array ( '#type' => 'select', '#title' => t('旅行'), '#options' => array ( 'trip1' => t('地中海クルーズ'), 'trip2' => t('南極旅行'), ), '#states' => array( // セレクトが「旅行」の場合にこのエレメントが表示される 'visible' => array(':input[id="edit-restrict-by"]' => array('value'=>'trip')), ), ); $form['select_set']['months'] = array ( '#type' => 'select', '#title' => t('カレンダー'), '#options' => array ( '1' => t('一月'), '2' => t('二月'), //...and so on ), '#states' => array( // セレクトが「カレンダー」の場合にこのエレメントが表示される 'visible' => array(':input[name="restrict_by"]' => array('value'=>'month')), ), );
// フィールドセットの畳む/開く制御例 $form['radio_set'] = array( '#type' => 'fieldset', '#title' => t('Selectbox Set'), '#collapsible' => TRUE, '#collapsed' => TRUE, '#states' => array( 'expanded' => array(':input[name="restrict_by"]' => array('value'=>'uncollapse')), ), );
// 二つのAND制御条件に array( 'visible' => array( JQUERY_SELECTOR => REMOTE_CONDITIONS, JQUERY_SELECTOR => REMOTE_CONDITIONS, ... ), ) // 例:ニッカ所にチェックされた場合、要素が表示される $form['Checkbox_set'] = array( '#type' => 'fieldset', '#title' => t('Checkbox Set'), '#states' => array( 'visible' => array( ':input[name="radio_restrict_by"]' => array('value' => 'enable_next'), ':input[id="edit-restrict-by"]' => array('value'=>'uncollapse') ), ), );
// ORの複数条件で表示/非表示制御 array( 'visible' => array( JQUERY_SELECTOR => REMOTE_CONDITIONS, ... ), 'visible' => array( JQUERY_SELECTOR => REMOTE_CONDITIONS, ... ), ) // 例:ニッカ所のところに、一か所がチェックされたら、要素が表示される $form['Checkbox_set'] = array( '#type' => 'fieldset', '#title' => t('Checkbox Set'), '#states' => array( 'visible' => array( ':input[name="radio_restrict_by"]' => array('value' => 'enable_next'), ), 'visible' => array( ':input[id="edit-restrict-by"]' => array('value'=>'uncollapse') ), ), );
添付 | サイズ |
---|---|
formapi_states_test.zip (1.45 KB) | 1.45 KB |
// 1. Include CTools Dependent helper ctools_include('dependent'); $form['select_set'] = array( '#type' => 'fieldset', '#title' => t('Selectbox Set'), ); $form['select_set']['restrict_by'] = array ( '#title' => t('選択してください'), '#type' => 'select', '#options' => array ( 'none'=>t('Select one'), 'trip'=>t('旅行'), 'month'=>t('カレンダー'), ), '#default_value' => array('none'), ); $form['select_set']['trips'] = array ( '#type' => 'select', '#title' => t('旅行'), '#options' => array ( 'trip1' => t('地中海クルーズ'), 'trip2' => t('南極旅行'), ), // セレクトが「旅行」の場合にこのエレメントが表示される '#dependency' => array('edit-restrict-by' => array('trip')), ); $form['select_set']['months'] = array ( '#type' => 'select', '#title' => t('カレンダー'), '#options' => array ( '1' => t('一月'), '2' => t('二月'), //...and so on ), // セレクトが「カレンダー」の場合にこのエレメントが表示される '#dependency' => array('edit-restrict-by' => array('month')), );
”#dependency” => array( "依存先要素のID" => "依存先要素の状態" )
'#dependency' => array('radio:restrict_by' => array('trip')), // radio: 決まり文言 // restrict_by: 要素ID
'#dependency' => array('edit-restrict-by' => array('month')),
'#dependency' => array('edit-restrict-by' => array('trip')),
'#dependency' => array('edit-restrict-by-month--2' => array(true)),
function example_page($form, &$form_state){ // 1. Include CTools Dependent helper ctools_include('dependent'); $form['select_set'] = array( '#type' => 'fieldset', '#title' => t('Selectbox Set'), ); $form['select_set']['restrict_by'] = array ( '#title' => t('選択してください'), '#type' => 'select', '#options' => array ( 'none'=>t('Select one'), 'trip'=>t('旅行'), 'month'=>t('カレンダー'), ), '#default_value' => array('none'), ); $form['select_set']['trips'] = array ( '#type' => 'select', '#title' => t('旅行'), '#options' => array ( 'trip1' => t('地中海クルーズ'), 'trip2' => t('南極旅行'), ), // セレクトが「旅行」の場合にこのエレメントが表示される '#dependency' => array('edit-restrict-by' => array('trip')), ); $form['select_set']['months'] = array ( '#type' => 'select', '#title' => t('カレンダー'), '#options' => array ( '1' => t('一月'), '2' => t('二月'), //...and so on ), // セレクトが「カレンダー」の場合にこのエレメントが表示される '#dependency' => array('edit-restrict-by' => array('month')), ); $form['radio_set'] = array( '#type' => 'fieldset', '#title' => t('Selectbox Set'), ); $form['radio_set']['restrict_by'] = array ( '#title' => t('選択してください'), '#type' => 'radios', '#options' => array ( 'none'=>t('Select one'), 'trip'=>t('旅行'), 'month'=>t('カレンダー'), ), '#default_value' => 'none', ); $form['radio_set']['trips'] = array ( '#type' => 'select', '#title' => t('旅行'), '#options' => array ( 'trip1' => t('地中海クルーズ'), 'trip2' => t('南極旅行'), ), '#dependency' => array('radio:restrict_by' => array('trip')), ); $form['radio_set']['months'] = array ( '#type' => 'select', '#title' => t('カレンダー'), '#options' => array ( '1' => t('一月'), '2' => t('二月'), //...and so on ), '#dependency' => array('radio:restrict_by' => array('month')), ); $form['Checkbox_set'] = array( '#type' => 'fieldset', '#title' => t('Checkbox Set'), ); $form['Checkbox_set']['restrict_by'] = array ( '#title' => t('選択してください'), '#type' => 'checkboxes', '#options' => array ( 'trip'=>t('旅行'), 'month'=>t('カレンダー'), ), ); $form['Checkbox_set']['trips'] = array ( '#type' => 'select', '#title' => t('旅行'), '#options' => array ( 'trip1' => t('地中海クルーズ'), 'trip2' => t('南極旅行'), ), // チェックボックスのIDが変わったので注意が必要 '#dependency' => array('edit-restrict-by-trip--2' => array(true)), ); $form['Checkbox_set']['months'] = array ( '#type' => 'select', '#title' => t('カレンダー'), '#options' => array ( '1' => t('一月'), '2' => t('二月'), //...and so on ), '#dependency' => array('edit-restrict-by-month--2' => array(true)), ); return $form; }
添付 | サイズ |
---|---|
ctools_dependent_test.zip (1.4 KB) | 1.4 KB |
// "#"states" 定義の基本 "#"states" => array( 'visible' => array( JQUERY_SELECTOR => REMOTE_CONDITIONS, ... ), ) // 例:チェックボックスがチェックされたときに要素が表示される "#"states" => array( 'visible' => array( ':input[name="remote_checkbox"]' => array('checked' => TRUE), ), )
$form['select_set'] = array( '#type' => 'fieldset', '#title' => t('Selectbox Set'), ); $form['select_set']['restrict_by'] = array ( '#title' => t('選択してください'), '#type' => 'select', '#options' => array ( 'none'=>t('Select one'), 'trip'=>t('旅行'), 'month'=>t('カレンダー'), 'uncollapse'=>t('次の要素を開く'), ), '#default_value' => array('none'), ); $form['select_set']['trips'] = array ( '#type' => 'select', '#title' => t('旅行'), '#options' => array ( 'trip1' => t('地中海クルーズ'), 'trip2' => t('南極旅行'), ), '#states' => array( // セレクトが「旅行」の場合にこのエレメントが表示される 'visible' => array(':input[id="edit-restrict-by"]' => array('value'=>'trip')), ), ); $form['select_set']['months'] = array ( '#type' => 'select', '#title' => t('カレンダー'), '#options' => array ( '1' => t('一月'), '2' => t('二月'), //...and so on ), '#states' => array( // セレクトが「カレンダー」の場合にこのエレメントが表示される 'visible' => array(':input[name="restrict_by"]' => array('value'=>'month')), ), );
// フィールドセットの畳む/開く制御例 $form['radio_set'] = array( '#type' => 'fieldset', '#title' => t('Selectbox Set'), '#collapsible' => TRUE, '#collapsed' => TRUE, '#states' => array( 'expanded' => array(':input[name="restrict_by"]' => array('value'=>'uncollapse')), ), );
// 二つのAND制御条件に array( 'visible' => array( JQUERY_SELECTOR => REMOTE_CONDITIONS, JQUERY_SELECTOR => REMOTE_CONDITIONS, ... ), ) // 例:ニッカ所にチェックされた場合、要素が表示される $form['Checkbox_set'] = array( '#type' => 'fieldset', '#title' => t('Checkbox Set'), '#states' => array( 'visible' => array( ':input[name="radio_restrict_by"]' => array('value' => 'enable_next'), ':input[id="edit-restrict-by"]' => array('value'=>'uncollapse') ), ), );
// ORの複数条件で表示/非表示制御 array( 'visible' => array( JQUERY_SELECTOR => REMOTE_CONDITIONS, ... ), 'visible' => array( JQUERY_SELECTOR => REMOTE_CONDITIONS, ... ), ) // 例:ニッカ所のところに、一か所がチェックされたら、要素が表示される $form['Checkbox_set'] = array( '#type' => 'fieldset', '#title' => t('Checkbox Set'), '#states' => array( 'visible' => array( ':input[name="radio_restrict_by"]' => array('value' => 'enable_next'), ), 'visible' => array( ':input[id="edit-restrict-by"]' => array('value'=>'uncollapse') ), ), );
添付 | サイズ |
---|---|
formapi_states_test.zip (1.45 KB) | 1.45 KB |
// 1. Include CTools Dependent helper ctools_include('dependent'); $form['select_set'] = array( '#type' => 'fieldset', '#title' => t('Selectbox Set'), ); $form['select_set']['restrict_by'] = array ( '#title' => t('選択してください'), '#type' => 'select', '#options' => array ( 'none'=>t('Select one'), 'trip'=>t('旅行'), 'month'=>t('カレンダー'), ), '#default_value' => array('none'), ); $form['select_set']['trips'] = array ( '#type' => 'select', '#title' => t('旅行'), '#options' => array ( 'trip1' => t('地中海クルーズ'), 'trip2' => t('南極旅行'), ), // セレクトが「旅行」の場合にこのエレメントが表示される '#dependency' => array('edit-restrict-by' => array('trip')), ); $form['select_set']['months'] = array ( '#type' => 'select', '#title' => t('カレンダー'), '#options' => array ( '1' => t('一月'), '2' => t('二月'), //...and so on ), // セレクトが「カレンダー」の場合にこのエレメントが表示される '#dependency' => array('edit-restrict-by' => array('month')), );
”#dependency” => array( "依存先要素のID" => "依存先要素の状態" )
'#dependency' => array('radio:restrict_by' => array('trip')), // radio: 決まり文言 // restrict_by: 要素ID
'#dependency' => array('edit-restrict-by' => array('month')),
'#dependency' => array('edit-restrict-by' => array('trip')),
'#dependency' => array('edit-restrict-by-month--2' => array(true)),
function example_page($form, &$form_state){ // 1. Include CTools Dependent helper ctools_include('dependent'); $form['select_set'] = array( '#type' => 'fieldset', '#title' => t('Selectbox Set'), ); $form['select_set']['restrict_by'] = array ( '#title' => t('選択してください'), '#type' => 'select', '#options' => array ( 'none'=>t('Select one'), 'trip'=>t('旅行'), 'month'=>t('カレンダー'), ), '#default_value' => array('none'), ); $form['select_set']['trips'] = array ( '#type' => 'select', '#title' => t('旅行'), '#options' => array ( 'trip1' => t('地中海クルーズ'), 'trip2' => t('南極旅行'), ), // セレクトが「旅行」の場合にこのエレメントが表示される '#dependency' => array('edit-restrict-by' => array('trip')), ); $form['select_set']['months'] = array ( '#type' => 'select', '#title' => t('カレンダー'), '#options' => array ( '1' => t('一月'), '2' => t('二月'), //...and so on ), // セレクトが「カレンダー」の場合にこのエレメントが表示される '#dependency' => array('edit-restrict-by' => array('month')), ); $form['radio_set'] = array( '#type' => 'fieldset', '#title' => t('Selectbox Set'), ); $form['radio_set']['restrict_by'] = array ( '#title' => t('選択してください'), '#type' => 'radios', '#options' => array ( 'none'=>t('Select one'), 'trip'=>t('旅行'), 'month'=>t('カレンダー'), ), '#default_value' => 'none', ); $form['radio_set']['trips'] = array ( '#type' => 'select', '#title' => t('旅行'), '#options' => array ( 'trip1' => t('地中海クルーズ'), 'trip2' => t('南極旅行'), ), '#dependency' => array('radio:restrict_by' => array('trip')), ); $form['radio_set']['months'] = array ( '#type' => 'select', '#title' => t('カレンダー'), '#options' => array ( '1' => t('一月'), '2' => t('二月'), //...and so on ), '#dependency' => array('radio:restrict_by' => array('month')), ); $form['Checkbox_set'] = array( '#type' => 'fieldset', '#title' => t('Checkbox Set'), ); $form['Checkbox_set']['restrict_by'] = array ( '#title' => t('選択してください'), '#type' => 'checkboxes', '#options' => array ( 'trip'=>t('旅行'), 'month'=>t('カレンダー'), ), ); $form['Checkbox_set']['trips'] = array ( '#type' => 'select', '#title' => t('旅行'), '#options' => array ( 'trip1' => t('地中海クルーズ'), 'trip2' => t('南極旅行'), ), // チェックボックスのIDが変わったので注意が必要 '#dependency' => array('edit-restrict-by-trip--2' => array(true)), ); $form['Checkbox_set']['months'] = array ( '#type' => 'select', '#title' => t('カレンダー'), '#options' => array ( '1' => t('一月'), '2' => t('二月'), //...and so on ), '#dependency' => array('edit-restrict-by-month--2' => array(true)), ); return $form; }
添付 | サイズ |
---|---|
ctools_dependent_test.zip (1.4 KB) | 1.4 KB |
// "#"states" 定義の基本 "#"states" => array( 'visible' => array( JQUERY_SELECTOR => REMOTE_CONDITIONS, ... ), ) // 例:チェックボックスがチェックされたときに要素が表示される "#"states" => array( 'visible' => array( ':input[name="remote_checkbox"]' => array('checked' => TRUE), ), )
$form['select_set'] = array( '#type' => 'fieldset', '#title' => t('Selectbox Set'), ); $form['select_set']['restrict_by'] = array ( '#title' => t('選択してください'), '#type' => 'select', '#options' => array ( 'none'=>t('Select one'), 'trip'=>t('旅行'), 'month'=>t('カレンダー'), 'uncollapse'=>t('次の要素を開く'), ), '#default_value' => array('none'), ); $form['select_set']['trips'] = array ( '#type' => 'select', '#title' => t('旅行'), '#options' => array ( 'trip1' => t('地中海クルーズ'), 'trip2' => t('南極旅行'), ), '#states' => array( // セレクトが「旅行」の場合にこのエレメントが表示される 'visible' => array(':input[id="edit-restrict-by"]' => array('value'=>'trip')), ), ); $form['select_set']['months'] = array ( '#type' => 'select', '#title' => t('カレンダー'), '#options' => array ( '1' => t('一月'), '2' => t('二月'), //...and so on ), '#states' => array( // セレクトが「カレンダー」の場合にこのエレメントが表示される 'visible' => array(':input[name="restrict_by"]' => array('value'=>'month')), ), );
// フィールドセットの畳む/開く制御例 $form['radio_set'] = array( '#type' => 'fieldset', '#title' => t('Selectbox Set'), '#collapsible' => TRUE, '#collapsed' => TRUE, '#states' => array( 'expanded' => array(':input[name="restrict_by"]' => array('value'=>'uncollapse')), ), );
// 二つのAND制御条件に array( 'visible' => array( JQUERY_SELECTOR => REMOTE_CONDITIONS, JQUERY_SELECTOR => REMOTE_CONDITIONS, ... ), ) // 例:ニッカ所にチェックされた場合、要素が表示される $form['Checkbox_set'] = array( '#type' => 'fieldset', '#title' => t('Checkbox Set'), '#states' => array( 'visible' => array( ':input[name="radio_restrict_by"]' => array('value' => 'enable_next'), ':input[id="edit-restrict-by"]' => array('value'=>'uncollapse') ), ), );
// ORの複数条件で表示/非表示制御 array( 'visible' => array( JQUERY_SELECTOR => REMOTE_CONDITIONS, ... ), 'visible' => array( JQUERY_SELECTOR => REMOTE_CONDITIONS, ... ), ) // 例:ニッカ所のところに、一か所がチェックされたら、要素が表示される $form['Checkbox_set'] = array( '#type' => 'fieldset', '#title' => t('Checkbox Set'), '#states' => array( 'visible' => array( ':input[name="radio_restrict_by"]' => array('value' => 'enable_next'), ), 'visible' => array( ':input[id="edit-restrict-by"]' => array('value'=>'uncollapse') ), ), );
添付 | サイズ |
---|---|
formapi_states_test.zip (1.45 KB) | 1.45 KB |
// 1. Include CTools Dependent helper ctools_include('dependent'); $form['select_set'] = array( '#type' => 'fieldset', '#title' => t('Selectbox Set'), ); $form['select_set']['restrict_by'] = array ( '#title' => t('選択してください'), '#type' => 'select', '#options' => array ( 'none'=>t('Select one'), 'trip'=>t('旅行'), 'month'=>t('カレンダー'), ), '#default_value' => array('none'), ); $form['select_set']['trips'] = array ( '#type' => 'select', '#title' => t('旅行'), '#options' => array ( 'trip1' => t('地中海クルーズ'), 'trip2' => t('南極旅行'), ), // セレクトが「旅行」の場合にこのエレメントが表示される '#dependency' => array('edit-restrict-by' => array('trip')), ); $form['select_set']['months'] = array ( '#type' => 'select', '#title' => t('カレンダー'), '#options' => array ( '1' => t('一月'), '2' => t('二月'), //...and so on ), // セレクトが「カレンダー」の場合にこのエレメントが表示される '#dependency' => array('edit-restrict-by' => array('month')), );
”#dependency” => array( "依存先要素のID" => "依存先要素の状態" )
'#dependency' => array('radio:restrict_by' => array('trip')), // radio: 決まり文言 // restrict_by: 要素ID
'#dependency' => array('edit-restrict-by' => array('month')),
'#dependency' => array('edit-restrict-by' => array('trip')),
'#dependency' => array('edit-restrict-by-month--2' => array(true)),
function example_page($form, &$form_state){ // 1. Include CTools Dependent helper ctools_include('dependent'); $form['select_set'] = array( '#type' => 'fieldset', '#title' => t('Selectbox Set'), ); $form['select_set']['restrict_by'] = array ( '#title' => t('選択してください'), '#type' => 'select', '#options' => array ( 'none'=>t('Select one'), 'trip'=>t('旅行'), 'month'=>t('カレンダー'), ), '#default_value' => array('none'), ); $form['select_set']['trips'] = array ( '#type' => 'select', '#title' => t('旅行'), '#options' => array ( 'trip1' => t('地中海クルーズ'), 'trip2' => t('南極旅行'), ), // セレクトが「旅行」の場合にこのエレメントが表示される '#dependency' => array('edit-restrict-by' => array('trip')), ); $form['select_set']['months'] = array ( '#type' => 'select', '#title' => t('カレンダー'), '#options' => array ( '1' => t('一月'), '2' => t('二月'), //...and so on ), // セレクトが「カレンダー」の場合にこのエレメントが表示される '#dependency' => array('edit-restrict-by' => array('month')), ); $form['radio_set'] = array( '#type' => 'fieldset', '#title' => t('Selectbox Set'), ); $form['radio_set']['restrict_by'] = array ( '#title' => t('選択してください'), '#type' => 'radios', '#options' => array ( 'none'=>t('Select one'), 'trip'=>t('旅行'), 'month'=>t('カレンダー'), ), '#default_value' => 'none', ); $form['radio_set']['trips'] = array ( '#type' => 'select', '#title' => t('旅行'), '#options' => array ( 'trip1' => t('地中海クルーズ'), 'trip2' => t('南極旅行'), ), '#dependency' => array('radio:restrict_by' => array('trip')), ); $form['radio_set']['months'] = array ( '#type' => 'select', '#title' => t('カレンダー'), '#options' => array ( '1' => t('一月'), '2' => t('二月'), //...and so on ), '#dependency' => array('radio:restrict_by' => array('month')), ); $form['Checkbox_set'] = array( '#type' => 'fieldset', '#title' => t('Checkbox Set'), ); $form['Checkbox_set']['restrict_by'] = array ( '#title' => t('選択してください'), '#type' => 'checkboxes', '#options' => array ( 'trip'=>t('旅行'), 'month'=>t('カレンダー'), ), ); $form['Checkbox_set']['trips'] = array ( '#type' => 'select', '#title' => t('旅行'), '#options' => array ( 'trip1' => t('地中海クルーズ'), 'trip2' => t('南極旅行'), ), // チェックボックスのIDが変わったので注意が必要 '#dependency' => array('edit-restrict-by-trip--2' => array(true)), ); $form['Checkbox_set']['months'] = array ( '#type' => 'select', '#title' => t('カレンダー'), '#options' => array ( '1' => t('一月'), '2' => t('二月'), //...and so on ), '#dependency' => array('edit-restrict-by-month--2' => array(true)), ); return $form; }
添付 | サイズ |
---|---|
ctools_dependent_test.zip (1.4 KB) | 1.4 KB |
// "#"states" 定義の基本 "#"states" => array( 'visible' => array( JQUERY_SELECTOR => REMOTE_CONDITIONS, ... ), ) // 例:チェックボックスがチェックされたときに要素が表示される "#"states" => array( 'visible' => array( ':input[name="remote_checkbox"]' => array('checked' => TRUE), ), )
$form['select_set'] = array( '#type' => 'fieldset', '#title' => t('Selectbox Set'), ); $form['select_set']['restrict_by'] = array ( '#title' => t('選択してください'), '#type' => 'select', '#options' => array ( 'none'=>t('Select one'), 'trip'=>t('旅行'), 'month'=>t('カレンダー'), 'uncollapse'=>t('次の要素を開く'), ), '#default_value' => array('none'), ); $form['select_set']['trips'] = array ( '#type' => 'select', '#title' => t('旅行'), '#options' => array ( 'trip1' => t('地中海クルーズ'), 'trip2' => t('南極旅行'), ), '#states' => array( // セレクトが「旅行」の場合にこのエレメントが表示される 'visible' => array(':input[id="edit-restrict-by"]' => array('value'=>'trip')), ), ); $form['select_set']['months'] = array ( '#type' => 'select', '#title' => t('カレンダー'), '#options' => array ( '1' => t('一月'), '2' => t('二月'), //...and so on ), '#states' => array( // セレクトが「カレンダー」の場合にこのエレメントが表示される 'visible' => array(':input[name="restrict_by"]' => array('value'=>'month')), ), );
// フィールドセットの畳む/開く制御例 $form['radio_set'] = array( '#type' => 'fieldset', '#title' => t('Selectbox Set'), '#collapsible' => TRUE, '#collapsed' => TRUE, '#states' => array( 'expanded' => array(':input[name="restrict_by"]' => array('value'=>'uncollapse')), ), );
// 二つのAND制御条件に array( 'visible' => array( JQUERY_SELECTOR => REMOTE_CONDITIONS, JQUERY_SELECTOR => REMOTE_CONDITIONS, ... ), ) // 例:ニッカ所にチェックされた場合、要素が表示される $form['Checkbox_set'] = array( '#type' => 'fieldset', '#title' => t('Checkbox Set'), '#states' => array( 'visible' => array( ':input[name="radio_restrict_by"]' => array('value' => 'enable_next'), ':input[id="edit-restrict-by"]' => array('value'=>'uncollapse') ), ), );
// ORの複数条件で表示/非表示制御 array( 'visible' => array( JQUERY_SELECTOR => REMOTE_CONDITIONS, ... ), 'visible' => array( JQUERY_SELECTOR => REMOTE_CONDITIONS, ... ), ) // 例:ニッカ所のところに、一か所がチェックされたら、要素が表示される $form['Checkbox_set'] = array( '#type' => 'fieldset', '#title' => t('Checkbox Set'), '#states' => array( 'visible' => array( ':input[name="radio_restrict_by"]' => array('value' => 'enable_next'), ), 'visible' => array( ':input[id="edit-restrict-by"]' => array('value'=>'uncollapse') ), ), );
添付 | サイズ |
---|---|
formapi_states_test.zip (1.45 KB) | 1.45 KB |
// 1. Include CTools Dependent helper ctools_include('dependent'); $form['select_set'] = array( '#type' => 'fieldset', '#title' => t('Selectbox Set'), ); $form['select_set']['restrict_by'] = array ( '#title' => t('選択してください'), '#type' => 'select', '#options' => array ( 'none'=>t('Select one'), 'trip'=>t('旅行'), 'month'=>t('カレンダー'), ), '#default_value' => array('none'), ); $form['select_set']['trips'] = array ( '#type' => 'select', '#title' => t('旅行'), '#options' => array ( 'trip1' => t('地中海クルーズ'), 'trip2' => t('南極旅行'), ), // セレクトが「旅行」の場合にこのエレメントが表示される '#dependency' => array('edit-restrict-by' => array('trip')), ); $form['select_set']['months'] = array ( '#type' => 'select', '#title' => t('カレンダー'), '#options' => array ( '1' => t('一月'), '2' => t('二月'), //...and so on ), // セレクトが「カレンダー」の場合にこのエレメントが表示される '#dependency' => array('edit-restrict-by' => array('month')), );
”#dependency” => array( "依存先要素のID" => "依存先要素の状態" )
'#dependency' => array('radio:restrict_by' => array('trip')), // radio: 決まり文言 // restrict_by: 要素ID
'#dependency' => array('edit-restrict-by' => array('month')),
'#dependency' => array('edit-restrict-by' => array('trip')),
'#dependency' => array('edit-restrict-by-month--2' => array(true)),
function example_page($form, &$form_state){ // 1. Include CTools Dependent helper ctools_include('dependent'); $form['select_set'] = array( '#type' => 'fieldset', '#title' => t('Selectbox Set'), ); $form['select_set']['restrict_by'] = array ( '#title' => t('選択してください'), '#type' => 'select', '#options' => array ( 'none'=>t('Select one'), 'trip'=>t('旅行'), 'month'=>t('カレンダー'), ), '#default_value' => array('none'), ); $form['select_set']['trips'] = array ( '#type' => 'select', '#title' => t('旅行'), '#options' => array ( 'trip1' => t('地中海クルーズ'), 'trip2' => t('南極旅行'), ), // セレクトが「旅行」の場合にこのエレメントが表示される '#dependency' => array('edit-restrict-by' => array('trip')), ); $form['select_set']['months'] = array ( '#type' => 'select', '#title' => t('カレンダー'), '#options' => array ( '1' => t('一月'), '2' => t('二月'), //...and so on ), // セレクトが「カレンダー」の場合にこのエレメントが表示される '#dependency' => array('edit-restrict-by' => array('month')), ); $form['radio_set'] = array( '#type' => 'fieldset', '#title' => t('Selectbox Set'), ); $form['radio_set']['restrict_by'] = array ( '#title' => t('選択してください'), '#type' => 'radios', '#options' => array ( 'none'=>t('Select one'), 'trip'=>t('旅行'), 'month'=>t('カレンダー'), ), '#default_value' => 'none', ); $form['radio_set']['trips'] = array ( '#type' => 'select', '#title' => t('旅行'), '#options' => array ( 'trip1' => t('地中海クルーズ'), 'trip2' => t('南極旅行'), ), '#dependency' => array('radio:restrict_by' => array('trip')), ); $form['radio_set']['months'] = array ( '#type' => 'select', '#title' => t('カレンダー'), '#options' => array ( '1' => t('一月'), '2' => t('二月'), //...and so on ), '#dependency' => array('radio:restrict_by' => array('month')), ); $form['Checkbox_set'] = array( '#type' => 'fieldset', '#title' => t('Checkbox Set'), ); $form['Checkbox_set']['restrict_by'] = array ( '#title' => t('選択してください'), '#type' => 'checkboxes', '#options' => array ( 'trip'=>t('旅行'), 'month'=>t('カレンダー'), ), ); $form['Checkbox_set']['trips'] = array ( '#type' => 'select', '#title' => t('旅行'), '#options' => array ( 'trip1' => t('地中海クルーズ'), 'trip2' => t('南極旅行'), ), // チェックボックスのIDが変わったので注意が必要 '#dependency' => array('edit-restrict-by-trip--2' => array(true)), ); $form['Checkbox_set']['months'] = array ( '#type' => 'select', '#title' => t('カレンダー'), '#options' => array ( '1' => t('一月'), '2' => t('二月'), //...and so on ), '#dependency' => array('edit-restrict-by-month--2' => array(true)), ); return $form; }
添付 | サイズ |
---|---|
ctools_dependent_test.zip (1.4 KB) | 1.4 KB |
// "#"states" 定義の基本 "#"states" => array( 'visible' => array( JQUERY_SELECTOR => REMOTE_CONDITIONS, ... ), ) // 例:チェックボックスがチェックされたときに要素が表示される "#"states" => array( 'visible' => array( ':input[name="remote_checkbox"]' => array('checked' => TRUE), ), )
$form['select_set'] = array( '#type' => 'fieldset', '#title' => t('Selectbox Set'), ); $form['select_set']['restrict_by'] = array ( '#title' => t('選択してください'), '#type' => 'select', '#options' => array ( 'none'=>t('Select one'), 'trip'=>t('旅行'), 'month'=>t('カレンダー'), 'uncollapse'=>t('次の要素を開く'), ), '#default_value' => array('none'), ); $form['select_set']['trips'] = array ( '#type' => 'select', '#title' => t('旅行'), '#options' => array ( 'trip1' => t('地中海クルーズ'), 'trip2' => t('南極旅行'), ), '#states' => array( // セレクトが「旅行」の場合にこのエレメントが表示される 'visible' => array(':input[id="edit-restrict-by"]' => array('value'=>'trip')), ), ); $form['select_set']['months'] = array ( '#type' => 'select', '#title' => t('カレンダー'), '#options' => array ( '1' => t('一月'), '2' => t('二月'), //...and so on ), '#states' => array( // セレクトが「カレンダー」の場合にこのエレメントが表示される 'visible' => array(':input[name="restrict_by"]' => array('value'=>'month')), ), );
// フィールドセットの畳む/開く制御例 $form['radio_set'] = array( '#type' => 'fieldset', '#title' => t('Selectbox Set'), '#collapsible' => TRUE, '#collapsed' => TRUE, '#states' => array( 'expanded' => array(':input[name="restrict_by"]' => array('value'=>'uncollapse')), ), );
// 二つのAND制御条件に array( 'visible' => array( JQUERY_SELECTOR => REMOTE_CONDITIONS, JQUERY_SELECTOR => REMOTE_CONDITIONS, ... ), ) // 例:ニッカ所にチェックされた場合、要素が表示される $form['Checkbox_set'] = array( '#type' => 'fieldset', '#title' => t('Checkbox Set'), '#states' => array( 'visible' => array( ':input[name="radio_restrict_by"]' => array('value' => 'enable_next'), ':input[id="edit-restrict-by"]' => array('value'=>'uncollapse') ), ), );
// ORの複数条件で表示/非表示制御 array( 'visible' => array( JQUERY_SELECTOR => REMOTE_CONDITIONS, ... ), 'visible' => array( JQUERY_SELECTOR => REMOTE_CONDITIONS, ... ), ) // 例:ニッカ所のところに、一か所がチェックされたら、要素が表示される $form['Checkbox_set'] = array( '#type' => 'fieldset', '#title' => t('Checkbox Set'), '#states' => array( 'visible' => array( ':input[name="radio_restrict_by"]' => array('value' => 'enable_next'), ), 'visible' => array( ':input[id="edit-restrict-by"]' => array('value'=>'uncollapse') ), ), );
添付 | サイズ |
---|---|
formapi_states_test.zip (1.45 KB) | 1.45 KB |
// 1. Include CTools Dependent helper ctools_include('dependent'); $form['select_set'] = array( '#type' => 'fieldset', '#title' => t('Selectbox Set'), ); $form['select_set']['restrict_by'] = array ( '#title' => t('選択してください'), '#type' => 'select', '#options' => array ( 'none'=>t('Select one'), 'trip'=>t('旅行'), 'month'=>t('カレンダー'), ), '#default_value' => array('none'), ); $form['select_set']['trips'] = array ( '#type' => 'select', '#title' => t('旅行'), '#options' => array ( 'trip1' => t('地中海クルーズ'), 'trip2' => t('南極旅行'), ), // セレクトが「旅行」の場合にこのエレメントが表示される '#dependency' => array('edit-restrict-by' => array('trip')), ); $form['select_set']['months'] = array ( '#type' => 'select', '#title' => t('カレンダー'), '#options' => array ( '1' => t('一月'), '2' => t('二月'), //...and so on ), // セレクトが「カレンダー」の場合にこのエレメントが表示される '#dependency' => array('edit-restrict-by' => array('month')), );
”#dependency” => array( "依存先要素のID" => "依存先要素の状態" )
'#dependency' => array('radio:restrict_by' => array('trip')), // radio: 決まり文言 // restrict_by: 要素ID
'#dependency' => array('edit-restrict-by' => array('month')),
'#dependency' => array('edit-restrict-by' => array('trip')),
'#dependency' => array('edit-restrict-by-month--2' => array(true)),
function example_page($form, &$form_state){ // 1. Include CTools Dependent helper ctools_include('dependent'); $form['select_set'] = array( '#type' => 'fieldset', '#title' => t('Selectbox Set'), ); $form['select_set']['restrict_by'] = array ( '#title' => t('選択してください'), '#type' => 'select', '#options' => array ( 'none'=>t('Select one'), 'trip'=>t('旅行'), 'month'=>t('カレンダー'), ), '#default_value' => array('none'), ); $form['select_set']['trips'] = array ( '#type' => 'select', '#title' => t('旅行'), '#options' => array ( 'trip1' => t('地中海クルーズ'), 'trip2' => t('南極旅行'), ), // セレクトが「旅行」の場合にこのエレメントが表示される '#dependency' => array('edit-restrict-by' => array('trip')), ); $form['select_set']['months'] = array ( '#type' => 'select', '#title' => t('カレンダー'), '#options' => array ( '1' => t('一月'), '2' => t('二月'), //...and so on ), // セレクトが「カレンダー」の場合にこのエレメントが表示される '#dependency' => array('edit-restrict-by' => array('month')), ); $form['radio_set'] = array( '#type' => 'fieldset', '#title' => t('Selectbox Set'), ); $form['radio_set']['restrict_by'] = array ( '#title' => t('選択してください'), '#type' => 'radios', '#options' => array ( 'none'=>t('Select one'), 'trip'=>t('旅行'), 'month'=>t('カレンダー'), ), '#default_value' => 'none', ); $form['radio_set']['trips'] = array ( '#type' => 'select', '#title' => t('旅行'), '#options' => array ( 'trip1' => t('地中海クルーズ'), 'trip2' => t('南極旅行'), ), '#dependency' => array('radio:restrict_by' => array('trip')), ); $form['radio_set']['months'] = array ( '#type' => 'select', '#title' => t('カレンダー'), '#options' => array ( '1' => t('一月'), '2' => t('二月'), //...and so on ), '#dependency' => array('radio:restrict_by' => array('month')), ); $form['Checkbox_set'] = array( '#type' => 'fieldset', '#title' => t('Checkbox Set'), ); $form['Checkbox_set']['restrict_by'] = array ( '#title' => t('選択してください'), '#type' => 'checkboxes', '#options' => array ( 'trip'=>t('旅行'), 'month'=>t('カレンダー'), ), ); $form['Checkbox_set']['trips'] = array ( '#type' => 'select', '#title' => t('旅行'), '#options' => array ( 'trip1' => t('地中海クルーズ'), 'trip2' => t('南極旅行'), ), // チェックボックスのIDが変わったので注意が必要 '#dependency' => array('edit-restrict-by-trip--2' => array(true)), ); $form['Checkbox_set']['months'] = array ( '#type' => 'select', '#title' => t('カレンダー'), '#options' => array ( '1' => t('一月'), '2' => t('二月'), //...and so on ), '#dependency' => array('edit-restrict-by-month--2' => array(true)), ); return $form; }
添付 | サイズ |
---|---|
ctools_dependent_test.zip (1.4 KB) | 1.4 KB |
// "#"states" 定義の基本 "#"states" => array( 'visible' => array( JQUERY_SELECTOR => REMOTE_CONDITIONS, ... ), ) // 例:チェックボックスがチェックされたときに要素が表示される "#"states" => array( 'visible' => array( ':input[name="remote_checkbox"]' => array('checked' => TRUE), ), )
$form['select_set'] = array( '#type' => 'fieldset', '#title' => t('Selectbox Set'), ); $form['select_set']['restrict_by'] = array ( '#title' => t('選択してください'), '#type' => 'select', '#options' => array ( 'none'=>t('Select one'), 'trip'=>t('旅行'), 'month'=>t('カレンダー'), 'uncollapse'=>t('次の要素を開く'), ), '#default_value' => array('none'), ); $form['select_set']['trips'] = array ( '#type' => 'select', '#title' => t('旅行'), '#options' => array ( 'trip1' => t('地中海クルーズ'), 'trip2' => t('南極旅行'), ), '#states' => array( // セレクトが「旅行」の場合にこのエレメントが表示される 'visible' => array(':input[id="edit-restrict-by"]' => array('value'=>'trip')), ), ); $form['select_set']['months'] = array ( '#type' => 'select', '#title' => t('カレンダー'), '#options' => array ( '1' => t('一月'), '2' => t('二月'), //...and so on ), '#states' => array( // セレクトが「カレンダー」の場合にこのエレメントが表示される 'visible' => array(':input[name="restrict_by"]' => array('value'=>'month')), ), );
// フィールドセットの畳む/開く制御例 $form['radio_set'] = array( '#type' => 'fieldset', '#title' => t('Selectbox Set'), '#collapsible' => TRUE, '#collapsed' => TRUE, '#states' => array( 'expanded' => array(':input[name="restrict_by"]' => array('value'=>'uncollapse')), ), );
// 二つのAND制御条件に array( 'visible' => array( JQUERY_SELECTOR => REMOTE_CONDITIONS, JQUERY_SELECTOR => REMOTE_CONDITIONS, ... ), ) // 例:ニッカ所にチェックされた場合、要素が表示される $form['Checkbox_set'] = array( '#type' => 'fieldset', '#title' => t('Checkbox Set'), '#states' => array( 'visible' => array( ':input[name="radio_restrict_by"]' => array('value' => 'enable_next'), ':input[id="edit-restrict-by"]' => array('value'=>'uncollapse') ), ), );
// ORの複数条件で表示/非表示制御 array( 'visible' => array( JQUERY_SELECTOR => REMOTE_CONDITIONS, ... ), 'visible' => array( JQUERY_SELECTOR => REMOTE_CONDITIONS, ... ), ) // 例:ニッカ所のところに、一か所がチェックされたら、要素が表示される $form['Checkbox_set'] = array( '#type' => 'fieldset', '#title' => t('Checkbox Set'), '#states' => array( 'visible' => array( ':input[name="radio_restrict_by"]' => array('value' => 'enable_next'), ), 'visible' => array( ':input[id="edit-restrict-by"]' => array('value'=>'uncollapse') ), ), );
添付 | サイズ |
---|---|
formapi_states_test.zip (1.45 KB) | 1.45 KB |
// 1. Include CTools Dependent helper ctools_include('dependent'); $form['select_set'] = array( '#type' => 'fieldset', '#title' => t('Selectbox Set'), ); $form['select_set']['restrict_by'] = array ( '#title' => t('選択してください'), '#type' => 'select', '#options' => array ( 'none'=>t('Select one'), 'trip'=>t('旅行'), 'month'=>t('カレンダー'), ), '#default_value' => array('none'), ); $form['select_set']['trips'] = array ( '#type' => 'select', '#title' => t('旅行'), '#options' => array ( 'trip1' => t('地中海クルーズ'), 'trip2' => t('南極旅行'), ), // セレクトが「旅行」の場合にこのエレメントが表示される '#dependency' => array('edit-restrict-by' => array('trip')), ); $form['select_set']['months'] = array ( '#type' => 'select', '#title' => t('カレンダー'), '#options' => array ( '1' => t('一月'), '2' => t('二月'), //...and so on ), // セレクトが「カレンダー」の場合にこのエレメントが表示される '#dependency' => array('edit-restrict-by' => array('month')), );
”#dependency” => array( "依存先要素のID" => "依存先要素の状態" )
'#dependency' => array('radio:restrict_by' => array('trip')), // radio: 決まり文言 // restrict_by: 要素ID
'#dependency' => array('edit-restrict-by' => array('month')),
'#dependency' => array('edit-restrict-by' => array('trip')),
'#dependency' => array('edit-restrict-by-month--2' => array(true)),
function example_page($form, &$form_state){ // 1. Include CTools Dependent helper ctools_include('dependent'); $form['select_set'] = array( '#type' => 'fieldset', '#title' => t('Selectbox Set'), ); $form['select_set']['restrict_by'] = array ( '#title' => t('選択してください'), '#type' => 'select', '#options' => array ( 'none'=>t('Select one'), 'trip'=>t('旅行'), 'month'=>t('カレンダー'), ), '#default_value' => array('none'), ); $form['select_set']['trips'] = array ( '#type' => 'select', '#title' => t('旅行'), '#options' => array ( 'trip1' => t('地中海クルーズ'), 'trip2' => t('南極旅行'), ), // セレクトが「旅行」の場合にこのエレメントが表示される '#dependency' => array('edit-restrict-by' => array('trip')), ); $form['select_set']['months'] = array ( '#type' => 'select', '#title' => t('カレンダー'), '#options' => array ( '1' => t('一月'), '2' => t('二月'), //...and so on ), // セレクトが「カレンダー」の場合にこのエレメントが表示される '#dependency' => array('edit-restrict-by' => array('month')), ); $form['radio_set'] = array( '#type' => 'fieldset', '#title' => t('Selectbox Set'), ); $form['radio_set']['restrict_by'] = array ( '#title' => t('選択してください'), '#type' => 'radios', '#options' => array ( 'none'=>t('Select one'), 'trip'=>t('旅行'), 'month'=>t('カレンダー'), ), '#default_value' => 'none', ); $form['radio_set']['trips'] = array ( '#type' => 'select', '#title' => t('旅行'), '#options' => array ( 'trip1' => t('地中海クルーズ'), 'trip2' => t('南極旅行'), ), '#dependency' => array('radio:restrict_by' => array('trip')), ); $form['radio_set']['months'] = array ( '#type' => 'select', '#title' => t('カレンダー'), '#options' => array ( '1' => t('一月'), '2' => t('二月'), //...and so on ), '#dependency' => array('radio:restrict_by' => array('month')), ); $form['Checkbox_set'] = array( '#type' => 'fieldset', '#title' => t('Checkbox Set'), ); $form['Checkbox_set']['restrict_by'] = array ( '#title' => t('選択してください'), '#type' => 'checkboxes', '#options' => array ( 'trip'=>t('旅行'), 'month'=>t('カレンダー'), ), ); $form['Checkbox_set']['trips'] = array ( '#type' => 'select', '#title' => t('旅行'), '#options' => array ( 'trip1' => t('地中海クルーズ'), 'trip2' => t('南極旅行'), ), // チェックボックスのIDが変わったので注意が必要 '#dependency' => array('edit-restrict-by-trip--2' => array(true)), ); $form['Checkbox_set']['months'] = array ( '#type' => 'select', '#title' => t('カレンダー'), '#options' => array ( '1' => t('一月'), '2' => t('二月'), //...and so on ), '#dependency' => array('edit-restrict-by-month--2' => array(true)), ); return $form; }
添付 | サイズ |
---|---|
ctools_dependent_test.zip (1.4 KB) | 1.4 KB |
// "#"states" 定義の基本 "#"states" => array( 'visible' => array( JQUERY_SELECTOR => REMOTE_CONDITIONS, ... ), ) // 例:チェックボックスがチェックされたときに要素が表示される "#"states" => array( 'visible' => array( ':input[name="remote_checkbox"]' => array('checked' => TRUE), ), )
$form['select_set'] = array( '#type' => 'fieldset', '#title' => t('Selectbox Set'), ); $form['select_set']['restrict_by'] = array ( '#title' => t('選択してください'), '#type' => 'select', '#options' => array ( 'none'=>t('Select one'), 'trip'=>t('旅行'), 'month'=>t('カレンダー'), 'uncollapse'=>t('次の要素を開く'), ), '#default_value' => array('none'), ); $form['select_set']['trips'] = array ( '#type' => 'select', '#title' => t('旅行'), '#options' => array ( 'trip1' => t('地中海クルーズ'), 'trip2' => t('南極旅行'), ), '#states' => array( // セレクトが「旅行」の場合にこのエレメントが表示される 'visible' => array(':input[id="edit-restrict-by"]' => array('value'=>'trip')), ), ); $form['select_set']['months'] = array ( '#type' => 'select', '#title' => t('カレンダー'), '#options' => array ( '1' => t('一月'), '2' => t('二月'), //...and so on ), '#states' => array( // セレクトが「カレンダー」の場合にこのエレメントが表示される 'visible' => array(':input[name="restrict_by"]' => array('value'=>'month')), ), );
// フィールドセットの畳む/開く制御例 $form['radio_set'] = array( '#type' => 'fieldset', '#title' => t('Selectbox Set'), '#collapsible' => TRUE, '#collapsed' => TRUE, '#states' => array( 'expanded' => array(':input[name="restrict_by"]' => array('value'=>'uncollapse')), ), );
// 二つのAND制御条件に array( 'visible' => array( JQUERY_SELECTOR => REMOTE_CONDITIONS, JQUERY_SELECTOR => REMOTE_CONDITIONS, ... ), ) // 例:ニッカ所にチェックされた場合、要素が表示される $form['Checkbox_set'] = array( '#type' => 'fieldset', '#title' => t('Checkbox Set'), '#states' => array( 'visible' => array( ':input[name="radio_restrict_by"]' => array('value' => 'enable_next'), ':input[id="edit-restrict-by"]' => array('value'=>'uncollapse') ), ), );
// ORの複数条件で表示/非表示制御 array( 'visible' => array( JQUERY_SELECTOR => REMOTE_CONDITIONS, ... ), 'visible' => array( JQUERY_SELECTOR => REMOTE_CONDITIONS, ... ), ) // 例:ニッカ所のところに、一か所がチェックされたら、要素が表示される $form['Checkbox_set'] = array( '#type' => 'fieldset', '#title' => t('Checkbox Set'), '#states' => array( 'visible' => array( ':input[name="radio_restrict_by"]' => array('value' => 'enable_next'), ), 'visible' => array( ':input[id="edit-restrict-by"]' => array('value'=>'uncollapse') ), ), );
添付 | サイズ |
---|---|
formapi_states_test.zip (1.45 KB) | 1.45 KB |
// 1. Include CTools Dependent helper ctools_include('dependent'); $form['select_set'] = array( '#type' => 'fieldset', '#title' => t('Selectbox Set'), ); $form['select_set']['restrict_by'] = array ( '#title' => t('選択してください'), '#type' => 'select', '#options' => array ( 'none'=>t('Select one'), 'trip'=>t('旅行'), 'month'=>t('カレンダー'), ), '#default_value' => array('none'), ); $form['select_set']['trips'] = array ( '#type' => 'select', '#title' => t('旅行'), '#options' => array ( 'trip1' => t('地中海クルーズ'), 'trip2' => t('南極旅行'), ), // セレクトが「旅行」の場合にこのエレメントが表示される '#dependency' => array('edit-restrict-by' => array('trip')), ); $form['select_set']['months'] = array ( '#type' => 'select', '#title' => t('カレンダー'), '#options' => array ( '1' => t('一月'), '2' => t('二月'), //...and so on ), // セレクトが「カレンダー」の場合にこのエレメントが表示される '#dependency' => array('edit-restrict-by' => array('month')), );
”#dependency” => array( "依存先要素のID" => "依存先要素の状態" )
'#dependency' => array('radio:restrict_by' => array('trip')), // radio: 決まり文言 // restrict_by: 要素ID
'#dependency' => array('edit-restrict-by' => array('month')),
'#dependency' => array('edit-restrict-by' => array('trip')),
'#dependency' => array('edit-restrict-by-month--2' => array(true)),
function example_page($form, &$form_state){ // 1. Include CTools Dependent helper ctools_include('dependent'); $form['select_set'] = array( '#type' => 'fieldset', '#title' => t('Selectbox Set'), ); $form['select_set']['restrict_by'] = array ( '#title' => t('選択してください'), '#type' => 'select', '#options' => array ( 'none'=>t('Select one'), 'trip'=>t('旅行'), 'month'=>t('カレンダー'), ), '#default_value' => array('none'), ); $form['select_set']['trips'] = array ( '#type' => 'select', '#title' => t('旅行'), '#options' => array ( 'trip1' => t('地中海クルーズ'), 'trip2' => t('南極旅行'), ), // セレクトが「旅行」の場合にこのエレメントが表示される '#dependency' => array('edit-restrict-by' => array('trip')), ); $form['select_set']['months'] = array ( '#type' => 'select', '#title' => t('カレンダー'), '#options' => array ( '1' => t('一月'), '2' => t('二月'), //...and so on ), // セレクトが「カレンダー」の場合にこのエレメントが表示される '#dependency' => array('edit-restrict-by' => array('month')), ); $form['radio_set'] = array( '#type' => 'fieldset', '#title' => t('Selectbox Set'), ); $form['radio_set']['restrict_by'] = array ( '#title' => t('選択してください'), '#type' => 'radios', '#options' => array ( 'none'=>t('Select one'), 'trip'=>t('旅行'), 'month'=>t('カレンダー'), ), '#default_value' => 'none', ); $form['radio_set']['trips'] = array ( '#type' => 'select', '#title' => t('旅行'), '#options' => array ( 'trip1' => t('地中海クルーズ'), 'trip2' => t('南極旅行'), ), '#dependency' => array('radio:restrict_by' => array('trip')), ); $form['radio_set']['months'] = array ( '#type' => 'select', '#title' => t('カレンダー'), '#options' => array ( '1' => t('一月'), '2' => t('二月'), //...and so on ), '#dependency' => array('radio:restrict_by' => array('month')), ); $form['Checkbox_set'] = array( '#type' => 'fieldset', '#title' => t('Checkbox Set'), ); $form['Checkbox_set']['restrict_by'] = array ( '#title' => t('選択してください'), '#type' => 'checkboxes', '#options' => array ( 'trip'=>t('旅行'), 'month'=>t('カレンダー'), ), ); $form['Checkbox_set']['trips'] = array ( '#type' => 'select', '#title' => t('旅行'), '#options' => array ( 'trip1' => t('地中海クルーズ'), 'trip2' => t('南極旅行'), ), // チェックボックスのIDが変わったので注意が必要 '#dependency' => array('edit-restrict-by-trip--2' => array(true)), ); $form['Checkbox_set']['months'] = array ( '#type' => 'select', '#title' => t('カレンダー'), '#options' => array ( '1' => t('一月'), '2' => t('二月'), //...and so on ), '#dependency' => array('edit-restrict-by-month--2' => array(true)), ); return $form; }
添付 | サイズ |
---|---|
ctools_dependent_test.zip (1.4 KB) | 1.4 KB |
// "#"states" 定義の基本 "#"states" => array( 'visible' => array( JQUERY_SELECTOR => REMOTE_CONDITIONS, ... ), ) // 例:チェックボックスがチェックされたときに要素が表示される "#"states" => array( 'visible' => array( ':input[name="remote_checkbox"]' => array('checked' => TRUE), ), )
$form['select_set'] = array( '#type' => 'fieldset', '#title' => t('Selectbox Set'), ); $form['select_set']['restrict_by'] = array ( '#title' => t('選択してください'), '#type' => 'select', '#options' => array ( 'none'=>t('Select one'), 'trip'=>t('旅行'), 'month'=>t('カレンダー'), 'uncollapse'=>t('次の要素を開く'), ), '#default_value' => array('none'), ); $form['select_set']['trips'] = array ( '#type' => 'select', '#title' => t('旅行'), '#options' => array ( 'trip1' => t('地中海クルーズ'), 'trip2' => t('南極旅行'), ), '#states' => array( // セレクトが「旅行」の場合にこのエレメントが表示される 'visible' => array(':input[id="edit-restrict-by"]' => array('value'=>'trip')), ), ); $form['select_set']['months'] = array ( '#type' => 'select', '#title' => t('カレンダー'), '#options' => array ( '1' => t('一月'), '2' => t('二月'), //...and so on ), '#states' => array( // セレクトが「カレンダー」の場合にこのエレメントが表示される 'visible' => array(':input[name="restrict_by"]' => array('value'=>'month')), ), );
// フィールドセットの畳む/開く制御例 $form['radio_set'] = array( '#type' => 'fieldset', '#title' => t('Selectbox Set'), '#collapsible' => TRUE, '#collapsed' => TRUE, '#states' => array( 'expanded' => array(':input[name="restrict_by"]' => array('value'=>'uncollapse')), ), );
// 二つのAND制御条件に array( 'visible' => array( JQUERY_SELECTOR => REMOTE_CONDITIONS, JQUERY_SELECTOR => REMOTE_CONDITIONS, ... ), ) // 例:ニッカ所にチェックされた場合、要素が表示される $form['Checkbox_set'] = array( '#type' => 'fieldset', '#title' => t('Checkbox Set'), '#states' => array( 'visible' => array( ':input[name="radio_restrict_by"]' => array('value' => 'enable_next'), ':input[id="edit-restrict-by"]' => array('value'=>'uncollapse') ), ), );
// ORの複数条件で表示/非表示制御 array( 'visible' => array( JQUERY_SELECTOR => REMOTE_CONDITIONS, ... ), 'visible' => array( JQUERY_SELECTOR => REMOTE_CONDITIONS, ... ), ) // 例:ニッカ所のところに、一か所がチェックされたら、要素が表示される $form['Checkbox_set'] = array( '#type' => 'fieldset', '#title' => t('Checkbox Set'), '#states' => array( 'visible' => array( ':input[name="radio_restrict_by"]' => array('value' => 'enable_next'), ), 'visible' => array( ':input[id="edit-restrict-by"]' => array('value'=>'uncollapse') ), ), );
添付 | サイズ |
---|---|
formapi_states_test.zip (1.45 KB) | 1.45 KB |
// 1. Include CTools Dependent helper ctools_include('dependent'); $form['select_set'] = array( '#type' => 'fieldset', '#title' => t('Selectbox Set'), ); $form['select_set']['restrict_by'] = array ( '#title' => t('選択してください'), '#type' => 'select', '#options' => array ( 'none'=>t('Select one'), 'trip'=>t('旅行'), 'month'=>t('カレンダー'), ), '#default_value' => array('none'), ); $form['select_set']['trips'] = array ( '#type' => 'select', '#title' => t('旅行'), '#options' => array ( 'trip1' => t('地中海クルーズ'), 'trip2' => t('南極旅行'), ), // セレクトが「旅行」の場合にこのエレメントが表示される '#dependency' => array('edit-restrict-by' => array('trip')), ); $form['select_set']['months'] = array ( '#type' => 'select', '#title' => t('カレンダー'), '#options' => array ( '1' => t('一月'), '2' => t('二月'), //...and so on ), // セレクトが「カレンダー」の場合にこのエレメントが表示される '#dependency' => array('edit-restrict-by' => array('month')), );
”#dependency” => array( "依存先要素のID" => "依存先要素の状態" )
'#dependency' => array('radio:restrict_by' => array('trip')), // radio: 決まり文言 // restrict_by: 要素ID
'#dependency' => array('edit-restrict-by' => array('month')),
'#dependency' => array('edit-restrict-by' => array('trip')),
'#dependency' => array('edit-restrict-by-month--2' => array(true)),
function example_page($form, &$form_state){ // 1. Include CTools Dependent helper ctools_include('dependent'); $form['select_set'] = array( '#type' => 'fieldset', '#title' => t('Selectbox Set'), ); $form['select_set']['restrict_by'] = array ( '#title' => t('選択してください'), '#type' => 'select', '#options' => array ( 'none'=>t('Select one'), 'trip'=>t('旅行'), 'month'=>t('カレンダー'), ), '#default_value' => array('none'), ); $form['select_set']['trips'] = array ( '#type' => 'select', '#title' => t('旅行'), '#options' => array ( 'trip1' => t('地中海クルーズ'), 'trip2' => t('南極旅行'), ), // セレクトが「旅行」の場合にこのエレメントが表示される '#dependency' => array('edit-restrict-by' => array('trip')), ); $form['select_set']['months'] = array ( '#type' => 'select', '#title' => t('カレンダー'), '#options' => array ( '1' => t('一月'), '2' => t('二月'), //...and so on ), // セレクトが「カレンダー」の場合にこのエレメントが表示される '#dependency' => array('edit-restrict-by' => array('month')), ); $form['radio_set'] = array( '#type' => 'fieldset', '#title' => t('Selectbox Set'), ); $form['radio_set']['restrict_by'] = array ( '#title' => t('選択してください'), '#type' => 'radios', '#options' => array ( 'none'=>t('Select one'), 'trip'=>t('旅行'), 'month'=>t('カレンダー'), ), '#default_value' => 'none', ); $form['radio_set']['trips'] = array ( '#type' => 'select', '#title' => t('旅行'), '#options' => array ( 'trip1' => t('地中海クルーズ'), 'trip2' => t('南極旅行'), ), '#dependency' => array('radio:restrict_by' => array('trip')), ); $form['radio_set']['months'] = array ( '#type' => 'select', '#title' => t('カレンダー'), '#options' => array ( '1' => t('一月'), '2' => t('二月'), //...and so on ), '#dependency' => array('radio:restrict_by' => array('month')), ); $form['Checkbox_set'] = array( '#type' => 'fieldset', '#title' => t('Checkbox Set'), ); $form['Checkbox_set']['restrict_by'] = array ( '#title' => t('選択してください'), '#type' => 'checkboxes', '#options' => array ( 'trip'=>t('旅行'), 'month'=>t('カレンダー'), ), ); $form['Checkbox_set']['trips'] = array ( '#type' => 'select', '#title' => t('旅行'), '#options' => array ( 'trip1' => t('地中海クルーズ'), 'trip2' => t('南極旅行'), ), // チェックボックスのIDが変わったので注意が必要 '#dependency' => array('edit-restrict-by-trip--2' => array(true)), ); $form['Checkbox_set']['months'] = array ( '#type' => 'select', '#title' => t('カレンダー'), '#options' => array ( '1' => t('一月'), '2' => t('二月'), //...and so on ), '#dependency' => array('edit-restrict-by-month--2' => array(true)), ); return $form; }
添付 | サイズ |
---|---|
ctools_dependent_test.zip (1.4 KB) | 1.4 KB |
// "#"states" 定義の基本 "#"states" => array( 'visible' => array( JQUERY_SELECTOR => REMOTE_CONDITIONS, ... ), ) // 例:チェックボックスがチェックされたときに要素が表示される "#"states" => array( 'visible' => array( ':input[name="remote_checkbox"]' => array('checked' => TRUE), ), )
$form['select_set'] = array( '#type' => 'fieldset', '#title' => t('Selectbox Set'), ); $form['select_set']['restrict_by'] = array ( '#title' => t('選択してください'), '#type' => 'select', '#options' => array ( 'none'=>t('Select one'), 'trip'=>t('旅行'), 'month'=>t('カレンダー'), 'uncollapse'=>t('次の要素を開く'), ), '#default_value' => array('none'), ); $form['select_set']['trips'] = array ( '#type' => 'select', '#title' => t('旅行'), '#options' => array ( 'trip1' => t('地中海クルーズ'), 'trip2' => t('南極旅行'), ), '#states' => array( // セレクトが「旅行」の場合にこのエレメントが表示される 'visible' => array(':input[id="edit-restrict-by"]' => array('value'=>'trip')), ), ); $form['select_set']['months'] = array ( '#type' => 'select', '#title' => t('カレンダー'), '#options' => array ( '1' => t('一月'), '2' => t('二月'), //...and so on ), '#states' => array( // セレクトが「カレンダー」の場合にこのエレメントが表示される 'visible' => array(':input[name="restrict_by"]' => array('value'=>'month')), ), );
// フィールドセットの畳む/開く制御例 $form['radio_set'] = array( '#type' => 'fieldset', '#title' => t('Selectbox Set'), '#collapsible' => TRUE, '#collapsed' => TRUE, '#states' => array( 'expanded' => array(':input[name="restrict_by"]' => array('value'=>'uncollapse')), ), );
// 二つのAND制御条件に array( 'visible' => array( JQUERY_SELECTOR => REMOTE_CONDITIONS, JQUERY_SELECTOR => REMOTE_CONDITIONS, ... ), ) // 例:ニッカ所にチェックされた場合、要素が表示される $form['Checkbox_set'] = array( '#type' => 'fieldset', '#title' => t('Checkbox Set'), '#states' => array( 'visible' => array( ':input[name="radio_restrict_by"]' => array('value' => 'enable_next'), ':input[id="edit-restrict-by"]' => array('value'=>'uncollapse') ), ), );
// ORの複数条件で表示/非表示制御 array( 'visible' => array( JQUERY_SELECTOR => REMOTE_CONDITIONS, ... ), 'visible' => array( JQUERY_SELECTOR => REMOTE_CONDITIONS, ... ), ) // 例:ニッカ所のところに、一か所がチェックされたら、要素が表示される $form['Checkbox_set'] = array( '#type' => 'fieldset', '#title' => t('Checkbox Set'), '#states' => array( 'visible' => array( ':input[name="radio_restrict_by"]' => array('value' => 'enable_next'), ), 'visible' => array( ':input[id="edit-restrict-by"]' => array('value'=>'uncollapse') ), ), );
添付 | サイズ |
---|---|
formapi_states_test.zip (1.45 KB) | 1.45 KB |
// 1. Include CTools Dependent helper ctools_include('dependent'); $form['select_set'] = array( '#type' => 'fieldset', '#title' => t('Selectbox Set'), ); $form['select_set']['restrict_by'] = array ( '#title' => t('選択してください'), '#type' => 'select', '#options' => array ( 'none'=>t('Select one'), 'trip'=>t('旅行'), 'month'=>t('カレンダー'), ), '#default_value' => array('none'), ); $form['select_set']['trips'] = array ( '#type' => 'select', '#title' => t('旅行'), '#options' => array ( 'trip1' => t('地中海クルーズ'), 'trip2' => t('南極旅行'), ), // セレクトが「旅行」の場合にこのエレメントが表示される '#dependency' => array('edit-restrict-by' => array('trip')), ); $form['select_set']['months'] = array ( '#type' => 'select', '#title' => t('カレンダー'), '#options' => array ( '1' => t('一月'), '2' => t('二月'), //...and so on ), // セレクトが「カレンダー」の場合にこのエレメントが表示される '#dependency' => array('edit-restrict-by' => array('month')), );
”#dependency” => array( "依存先要素のID" => "依存先要素の状態" )
'#dependency' => array('radio:restrict_by' => array('trip')), // radio: 決まり文言 // restrict_by: 要素ID
'#dependency' => array('edit-restrict-by' => array('month')),
'#dependency' => array('edit-restrict-by' => array('trip')),
'#dependency' => array('edit-restrict-by-month--2' => array(true)),
function example_page($form, &$form_state){ // 1. Include CTools Dependent helper ctools_include('dependent'); $form['select_set'] = array( '#type' => 'fieldset', '#title' => t('Selectbox Set'), ); $form['select_set']['restrict_by'] = array ( '#title' => t('選択してください'), '#type' => 'select', '#options' => array ( 'none'=>t('Select one'), 'trip'=>t('旅行'), 'month'=>t('カレンダー'), ), '#default_value' => array('none'), ); $form['select_set']['trips'] = array ( '#type' => 'select', '#title' => t('旅行'), '#options' => array ( 'trip1' => t('地中海クルーズ'), 'trip2' => t('南極旅行'), ), // セレクトが「旅行」の場合にこのエレメントが表示される '#dependency' => array('edit-restrict-by' => array('trip')), ); $form['select_set']['months'] = array ( '#type' => 'select', '#title' => t('カレンダー'), '#options' => array ( '1' => t('一月'), '2' => t('二月'), //...and so on ), // セレクトが「カレンダー」の場合にこのエレメントが表示される '#dependency' => array('edit-restrict-by' => array('month')), ); $form['radio_set'] = array( '#type' => 'fieldset', '#title' => t('Selectbox Set'), ); $form['radio_set']['restrict_by'] = array ( '#title' => t('選択してください'), '#type' => 'radios', '#options' => array ( 'none'=>t('Select one'), 'trip'=>t('旅行'), 'month'=>t('カレンダー'), ), '#default_value' => 'none', ); $form['radio_set']['trips'] = array ( '#type' => 'select', '#title' => t('旅行'), '#options' => array ( 'trip1' => t('地中海クルーズ'), 'trip2' => t('南極旅行'), ), '#dependency' => array('radio:restrict_by' => array('trip')), ); $form['radio_set']['months'] = array ( '#type' => 'select', '#title' => t('カレンダー'), '#options' => array ( '1' => t('一月'), '2' => t('二月'), //...and so on ), '#dependency' => array('radio:restrict_by' => array('month')), ); $form['Checkbox_set'] = array( '#type' => 'fieldset', '#title' => t('Checkbox Set'), ); $form['Checkbox_set']['restrict_by'] = array ( '#title' => t('選択してください'), '#type' => 'checkboxes', '#options' => array ( 'trip'=>t('旅行'), 'month'=>t('カレンダー'), ), ); $form['Checkbox_set']['trips'] = array ( '#type' => 'select', '#title' => t('旅行'), '#options' => array ( 'trip1' => t('地中海クルーズ'), 'trip2' => t('南極旅行'), ), // チェックボックスのIDが変わったので注意が必要 '#dependency' => array('edit-restrict-by-trip--2' => array(true)), ); $form['Checkbox_set']['months'] = array ( '#type' => 'select', '#title' => t('カレンダー'), '#options' => array ( '1' => t('一月'), '2' => t('二月'), //...and so on ), '#dependency' => array('edit-restrict-by-month--2' => array(true)), ); return $form; }
添付 | サイズ |
---|---|
ctools_dependent_test.zip (1.4 KB) | 1.4 KB |
// "#"states" 定義の基本 "#"states" => array( 'visible' => array( JQUERY_SELECTOR => REMOTE_CONDITIONS, ... ), ) // 例:チェックボックスがチェックされたときに要素が表示される "#"states" => array( 'visible' => array( ':input[name="remote_checkbox"]' => array('checked' => TRUE), ), )
$form['select_set'] = array( '#type' => 'fieldset', '#title' => t('Selectbox Set'), ); $form['select_set']['restrict_by'] = array ( '#title' => t('選択してください'), '#type' => 'select', '#options' => array ( 'none'=>t('Select one'), 'trip'=>t('旅行'), 'month'=>t('カレンダー'), 'uncollapse'=>t('次の要素を開く'), ), '#default_value' => array('none'), ); $form['select_set']['trips'] = array ( '#type' => 'select', '#title' => t('旅行'), '#options' => array ( 'trip1' => t('地中海クルーズ'), 'trip2' => t('南極旅行'), ), '#states' => array( // セレクトが「旅行」の場合にこのエレメントが表示される 'visible' => array(':input[id="edit-restrict-by"]' => array('value'=>'trip')), ), ); $form['select_set']['months'] = array ( '#type' => 'select', '#title' => t('カレンダー'), '#options' => array ( '1' => t('一月'), '2' => t('二月'), //...and so on ), '#states' => array( // セレクトが「カレンダー」の場合にこのエレメントが表示される 'visible' => array(':input[name="restrict_by"]' => array('value'=>'month')), ), );
// フィールドセットの畳む/開く制御例 $form['radio_set'] = array( '#type' => 'fieldset', '#title' => t('Selectbox Set'), '#collapsible' => TRUE, '#collapsed' => TRUE, '#states' => array( 'expanded' => array(':input[name="restrict_by"]' => array('value'=>'uncollapse')), ), );
// 二つのAND制御条件に array( 'visible' => array( JQUERY_SELECTOR => REMOTE_CONDITIONS, JQUERY_SELECTOR => REMOTE_CONDITIONS, ... ), ) // 例:ニッカ所にチェックされた場合、要素が表示される $form['Checkbox_set'] = array( '#type' => 'fieldset', '#title' => t('Checkbox Set'), '#states' => array( 'visible' => array( ':input[name="radio_restrict_by"]' => array('value' => 'enable_next'), ':input[id="edit-restrict-by"]' => array('value'=>'uncollapse') ), ), );
// ORの複数条件で表示/非表示制御 array( 'visible' => array( JQUERY_SELECTOR => REMOTE_CONDITIONS, ... ), 'visible' => array( JQUERY_SELECTOR => REMOTE_CONDITIONS, ... ), ) // 例:ニッカ所のところに、一か所がチェックされたら、要素が表示される $form['Checkbox_set'] = array( '#type' => 'fieldset', '#title' => t('Checkbox Set'), '#states' => array( 'visible' => array( ':input[name="radio_restrict_by"]' => array('value' => 'enable_next'), ), 'visible' => array( ':input[id="edit-restrict-by"]' => array('value'=>'uncollapse') ), ), );
添付 | サイズ |
---|---|
formapi_states_test.zip (1.45 KB) | 1.45 KB |