AJAXを実行するときにすべてのフォーム要素を無効にする


8

すべてのユーザー入力フィールドでAJAXが有効になっているフォームがあり、そのうちの1つが変更されたときにすべてのフォーム要素を無効にしたいのですが、可能ですか?

回答:


12

はい、可能です。たとえば、.jsファイルをフォームに添付して、Drupal.ajaxオブジェクトを拡張できます。
フォームからAJAX送信を開始できるすべての要素には、Drupal.ajaxの独自のインスタンスがあります。あなたはそれをグローバルオブジェクトで見つけることができますDrupal.ajax。そして、すべてのDrupal.ajaxオブジェクトはメソッドを持ってsuccesserrorbeforeSendなど
ここでアイデアを実証するための簡単な例を示します。

;(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メソッドを使用することです。


私は自分のサイトでこの機能を必要としなくなり、時間の制約によりこの回答を確認できませんでした。あなたがそれに多くの努力を払ったようで、それを無視するのは不公平であるので、私はそれをチェックしなくてもこの答えを受け入れるつもりです。また、2つの投票が役立ちます:)
Daniel

非常に便利。特定のajaxメソッドでフォームを無効にし、他のメソッドを無効にする必要はありません。これは私に大いに役立ち、カスタム成功メソッドをアタッチする方法を理解するのに役立ちました。ありがとうございました。
Tanvir Chowdhury 2014年

3

ページのコンテンツの読み取り専用ビューを完全に無効化または表示できるウィジェットを作成しました。すべてのボタン、アンカーを無効にし、すべてのクリックイベントなどを削除し、それらをすべて再び有効にすることができます。すべてのjQuery UIウィジェットもサポートしています。仕事で書いたアプリケーション用に作成しました。あなたはそれを自由に使用できます。

http://www.dougestep.com/dme/jquery-disabler-widget)で確認してください


1

次の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');
          }
        });
      }
    });
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.