回答:
はい、可能です。たとえば、.jsファイルをフォームに添付して、Drupal.ajaxオブジェクトを拡張できます。
フォームからAJAX送信を開始できるすべての要素には、Drupal.ajaxの独自のインスタンスがあります。あなたはそれをグローバルオブジェクトで見つけることができますDrupal.ajax
。そして、すべてのDrupal.ajaxオブジェクトはメソッドを持ってsuccess
、error
、beforeSend
など
ここでアイデアを実証するための簡単な例を示します。
;(function($) {
Drupal.testAjax = {
// Our form
form_id: 'node-type-form' //Yes, I tested on my extended node creation form
};
Drupal.behaviors.testAjax = {
attach: function(context, settings) {
// We extend Drupal.ajax objects for all AJAX elements in our form
for (ajax_el in settings.ajax) {
if (Drupal.ajax[ajax_el].element.form) {
if (Drupal.ajax[ajax_el].element.form.id === Drupal.testAjax.form_id) {
Drupal.ajax[ajax_el].beforeSubmit = Drupal.testAjax.beforeSubmit;
Drupal.ajax[ajax_el].success = Drupal.testAjax.success;
Drupal.ajax[ajax_el].error = Drupal.testAjax.error;
}
}
}
}
};
// Disable form
Drupal.testAjax.beforeSubmit = function (form_values, form, options) {
$(form[0].elements).not(':disabled')
.addClass('test-ajax-disabled')
.attr('disabled', true);
}
// Enable form
Drupal.testAjax.enableForm = function(form) {
$(form).find('.test-ajax-disabled')
.removeClass('test-ajax-disabled')
.attr('disabled', false);
}
Drupal.testAjax.success = function (response, status) {
Drupal.testAjax.enableForm(this.element.form);
// Call original method with main functionality
Drupal.ajax.prototype.success.call(this, response, status);
}
Drupal.testAjax.error = function (response, uri) {
Drupal.testAjax.enableForm(this.element.form);
// Call original method with main functionality
Drupal.ajax.prototype.error.call(this, response, uri);
}
})(jQuery);
このアプローチは少し難しいように思えるかもしれませんが、フォームでAJAXを完全に制御できます。
別の方法は.ajaxStart()
、DrupalがjQuery AJAX Frameworkを使用するため、などのjQueryメソッドを使用することです。
ページのコンテンツの読み取り専用ビューを完全に無効化または表示できるウィジェットを作成しました。すべてのボタン、アンカーを無効にし、すべてのクリックイベントなどを削除し、それらをすべて再び有効にすることができます。すべてのjQuery UIウィジェットもサポートしています。仕事で書いたアプリケーション用に作成しました。あなたはそれを自由に使用できます。
(http://www.dougestep.com/dme/jquery-disabler-widget)で確認してください。
次のjQueryスクリプトを使用して、ajax中に一部の要素を無効/有効にできます。
// Disable elements on ajax call.
$(document)
.ajaxStart(function() {
if ($('.ajax-disabling').length) {
// Disable elements.
$(".ajax-disabling input").attr("disabled", "disabled");
}
})
.ajaxComplete(function() {
if ($('.ajax-disabling').length) {
// Enable elements.
$(".ajax-disabling input").removeAttr("disabled");
}
});
または(またはその他のラッパー)にクラスajax-disabling
を追加する場合、ajax中はすべての入力が無効になります。<form>
<div>
セレクターで遊んだり、selectsやtextareasを無効にしたりできます。
https://drupal.stackexchange.com/a/76838/6309も参照してください
更新
フォームの要素を既に無効にしていて、ajaxが次のコードを使用した後もそれらを無効にしたい場合:
// Disable form elements on ajax call.
$(document)
.ajaxStart(function() {
if ($('.ajax-disabling').length) {
// Disable elements.
$('.ajax-disabling input, .ajax-disabling select').each(function(){
if($(this).attr('disabled') !== 'disabled') {
$(this).addClass('ajax-form-disabled');
$(this).attr('disabled', 'disabled');
}
});
}
})
.ajaxComplete(function() {
if ($('.ajax-disabling').length) {
// Enable elements.
$('.ajax-disabling input, .ajax-disabling select').each(function(){
if($(this).hasClass('ajax-form-disabled')) {
$(this).removeClass('ajax-form-disabled');
$(this).removeAttr('disabled');
}
});
}
});