私はJavaScriptとDrupalフォームを試しています。現在、JavaScriptを使用して選択リストにオプションを追加するモジュールの管理フォームにボタンを作成しようとしています。問題Iボタンをクリックすると、JavaScriptが呼び出されますが、フォーム全体が更新されます。FormsAPIリファレンスを見て、ボタンに設定できる属性があり、それを停止するために設定できると考えました。ボタンのページの更新を停止する方法はありますか?これは行き止まりですか?
$form['#attached']['js'] = array(
drupal_get_path('module', 'test').'/js/test.js',
);
$form['list'] = array(
'#type' => 'select',
'#options' => array(),
'#attributes' => array(
'name' => 'sellist',
),
'#size' => 4,
);
$form['add_button'] = array(
'#type' => 'button',
'#value' => 'Add',
'#attributes' => array(
'onclick' => "add_to_list(this.form.sellist, 'Append' + this.form.sellist.length);",
),
);
//JavaScript
function add_to_list(list, text) {
try {
list.add(new Option(text, list.length), null) //add new option to end of "sample"
}
catch(e) {
list.add(new Option(text, list.length));
}
}
私の最後のコード:
<?php
function jstest_menu() {
$items['admin/config/content/jstest'] = array(
'title' => 'JavaScript Test',
'description' => 'Configuration for Administration Test',
'page callback' => 'drupal_get_form',
'page arguments' => array('_jstest_form'),
'access arguments' => array('access administration pages'),
'type' => MENU_NORMAL_ITEM,
);
return $items;
}
function _jstest_form($form, &$form_state) {
$form['list'] = array(
'#type' => 'select',
'#options' => array(),
'#size' => 4,
);
$form['text'] = array(
'#type' => 'textfield',
);
$form['add_button'] = array (
'#type' => 'button',
'#value' => t("Add"),
'#after_build' => array('_jstest_after_build'),
);
return $form;
}
function _jstest_after_build($form, &$form_state) {
drupal_add_js(drupal_get_path('module', 'jstest').'/js/jstest.js');
return $form;
}
JavaScript
(function ($) {
Drupal.behaviors.snmpModule = {
attach: function (context, settings) {
$('#edit-add-button', context).click(function () {
var list = document.getElementById('edit-list');
var text = document.getElementById('edit-text');
if (text.value != '')
{
try {
list.add(new Option(text.value, list.length), null);
}
catch(e) {
list.add(new Option(text.value, list.length));
}
text.value = '';
}
return false;
});
$('#edit-list', context).click(function () {
var list = document.getElementById('edit-list');
if (list.selectedIndex != -1)
list.remove(list.selectedIndex);
return false;
});
}
};
}(jQuery));
これを実現する最も簡単な方法は、JavaScriptコードでfalseを返すだけです。
function add_to_list(list, text) {
try {
list.add(new Option(text, list.length), null);
return false;
} catch(e) {
list.add(new Option(text, list.length));
return false;
}
}
またはより良い方法はビヘイビアを使用することです:
Drupal.behaviors.some_action = function(context) {
$('#id-button:not(.button-processed)',context)
.addClass('button-processed').each(function() {
//whatever you want here
return false;
});
}
以下のフォームボタンの定義は私にとっては機能します。#after_buildは、クリックハンドラーをアタッチできるJavaScriptでのロードに役立ちます。
$form['add_button'] = array (
'#type' => 'button',
'#attributes' => array('onclick' => 'return (false);'),
'#value' => t("Add"),
);
$form['#after_build'] = array('[module_name]_after_build');
その後、ビルド後の関数によって別のファイルに読み込まれる私のJavaScriptは、次のようになります。
Drupal.behaviors.[module_name] = function(context) {
$('#edit-add-button').click(function() {
...Do something here
});
};
return false
ステートメント、関数呼び出しの後、ボタンフォーム要素の属性行内:
'#attributes' => array(
'onclick' => "add_to_list(this.form.sellist, 'Append' + this.form.sellist.length); return false",
),
理想的には、Drupal自身のAJAX(またはAHAH)フォームの機能を読んでください。本当に基本的な紹介はこちら http://drupal.org/node/752056
それ以外の場合は、ページを更新するだけでびっくりします。送信ボタンなどではなく、単なる「ボタン」です。
ページの上部に戻るリンクを停止するのと同じように、falseを返すにはJavaScriptが必要ですか?