Отключить все элементы формы при выполнении AJAX

8

У меня есть форма, в которой каждое поле ввода пользователя включает AJAX, и я хотел бы отключить все элементы формы при изменении одного из них - возможно ли это?

7 forms ajax

— Даниил
источник

12

Да, это возможно. Например, вы можете прикрепить файл .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 в ваших формах.
Другой способ - использовать методы jQuery, например .ajaxStart(), потому что Drupal использует JQuery AJAX Framework.

— kalabro
источник

В итоге мне не понадобилась эта функция на моем сайте, а ограничения по времени не позволили мне проверить этот ответ. Я приму этот ответ, несмотря на то, что не проверяю его, потому что кажется, что вы приложили немало усилий, и это несправедливо игнорировать. Кроме того , два проголосуй окна помощь :)

— Daniel

Очень полезный. Необходимо, чтобы определенные методы ajax отключали форму, а не другие. Это мне очень помогло и помогло понять, как прикрепить пользовательские методы успеха. Спасибо.

— Танвир Чоудхури

3

Я создал виджет, который может полностью отключить или представить доступное только для чтения представление контента на вашей странице. Он отключает все кнопки, привязки, удаляет все события щелчков и т. Д. И может снова включить их снова. Он даже поддерживает все виджеты jQuery UI. Я создал его для приложения, которое я написал на работе. Вы можете использовать это.

Проверьте это в ( http://www.dougestep.com/dme/jquery-disabler-widget ).

— Дуг Эстеп
источник

1

Вы можете отключить / включить некоторые элементы во время ajax, используя этот скрипт jQuery:

  // 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в <form>или <div>(или любую другую оболочку), все входы будут отключены внутри во время ajax.

Вы можете поиграть с селекторами и отключить также селекторы и текстовые поля.

Смотрите также 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');
          }
        });
      }
    });

— Мильковский
источник