Wyłącz wszystkie elementy formularza podczas wykonywania AJAX

8

Mam formularz, w którym każde pole wprowadzania użytkownika ma włączoną obsługę AJAX i chciałbym wyłączyć wszystkie elementy formularza, gdy jeden z nich zostanie zmieniony - czy to możliwe?

7 forms ajax

— Daniel
źródło

12

Tak, to możliwe. Na przykład możesz dołączyć plik .js do formularza i rozszerzyć obiekt Drupal.ajax.
Każdy element, który może zainicjować przesłanie AJAX z formularza, ma własną instancję Drupal.ajax. Możesz go znaleźć w obiekcie globalnym Drupal.ajax. I każdy przedmiot Drupal.ajax ma metody success, error, beforeSenditd.
Oto prosty przykład wykazać ideę:

;(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);

To podejście może wydawać się trochę trudne, ale daje pełną kontrolę nad AJAX w twoich formularzach.
Innym sposobem jest użycie metod jQuery, takich jak .ajaxStart(), ponieważ Drupal używa jQuery AJAX Framework.

— kalabro
źródło

W końcu nie potrzebowałem tej funkcji w mojej witrynie, a ograniczenia czasowe uniemożliwiły mi sprawdzenie tej odpowiedzi. Przyjmuję tę odpowiedź, mimo że jej nie sprawdzam, ponieważ wydaje się, że wkładasz w to wiele wysiłku i ignorowanie jej jest niesprawiedliwe. Pomagają też dwa głosowania :)

— Daniel

Bardzo przydatne. Potrzebne, aby niektóre metody ajax wyłączały formularz, a nie inne. To bardzo mi pomogło i pomogło mi zrozumieć, jak dołączyć niestandardowe metody sukcesu. Dziękuję Ci.

— Tanvir Chowdhury

3

Stworzyłem widżet, który może całkowicie wyłączyć lub zaprezentować widok tylko do odczytu treści na twojej stronie. Wyłącza wszystkie przyciski, kotwice, usuwa wszystkie zdarzenia kliknięcia itp. I może ponownie je wszystkie włączyć ponownie. Obsługuje nawet wszystkie widżety interfejsu użytkownika jQuery. Stworzyłem go dla aplikacji, którą napisałem w pracy. Możesz z niego korzystać.

Sprawdź to na ( http://www.dougestep.com/dme/jquery-disabler-widget ).

— Doug Estep
źródło

1

Możesz wyłączyć / włączyć niektóre elementy podczas aukcji za pomocą tego skryptu 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");
      }
    });

Jeśli dodasz klasę ajax-disablingdo <form>lub <div>(lub dowolnego innego opakowania), wszystkie dane wejściowe zostaną wyłączone wewnątrz podczas ajax.

Możesz bawić się selektorami i wyłączać również zaznaczenia i pola tekstowe.

Zobacz także https://drupal.stackexchange.com/a/76838/6309

Aktualizacja

Jeśli masz już wyłączone elementy w formularzu i chcesz je wyłączyć po ajax, użyj następnego kodu:

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

— Milkovsky
źródło