Вимкніть усі елементи форми під час виконання 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 у ваших формах.
Інший спосіб полягає у використанні таких методів, як DruQ .ajaxStart(), оскільки Drupal використовує jQuery AJAX Framework.

— калабро
джерело

Мені ця функція не потрібна на моєму сайті, а обмеження в часі не дозволили мені перевірити цю відповідь. Я прийму цю відповідь, незважаючи на те, що не перевіряю її, бо, здається, ви доклали багато зусиль до неї, і це несправедливо ігнорувати. Також два голосування допомагають :)

— Даніель

Дуже корисний. Потрібно, щоб певні методи ajax відключили форму, а не інші. Це мені дуже допомогло та зрозуміло, як приєднати власні методи успіху. Дякую.

— Tanvir Chowdhury

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');
          }
        });
      }
    });

— мілковський
джерело