Deaktivieren Sie alle Formularelemente, wenn Sie AJAX ausführen

8

Ich habe ein Formular, in dem jedes Benutzereingabefeld AJAX-fähig ist, und ich möchte alle Formularelemente deaktivieren, wenn eines davon geändert wird. Ist dies möglich?

7 forms ajax

— Daniel
quelle

12

Ja es ist möglich. Sie können beispielsweise eine .js-Datei an Ihr Formular anhängen und das Objekt Drupal.ajax erweitern.
Jedes Element, das die AJAX-Übermittlung von einem Formular aus initiieren kann, verfügt über eine eigene Instanz von Drupal.ajax. Sie finden es im globalen Objekt Drupal.ajax. Und jedes Drupal.ajax Objekt die Methoden hat success, error, beforeSendusw.
Hier ist ein einfaches Beispiel , die Idee zu demonstrieren:

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

Dieser Ansatz mag etwas schwierig erscheinen, gibt Ihnen jedoch die volle Kontrolle über AJAX in Ihren Formularen.
Eine andere Möglichkeit ist die Verwendung von jQuery-Methoden wie .ajaxStart(), da Drupal jQuery AJAX Framework verwendet.

— Kalabro
quelle

Ich brauchte diese Funktion auf meiner Website nicht und Zeitbeschränkungen haben mich daran gehindert, diese Antwort zu überprüfen. Ich werde diese Antwort akzeptieren, obwohl ich sie nicht überprüft habe, weil es so aussieht, als ob Sie sich viel Mühe geben und es unfair ist, sie zu ignorieren. Auch die beiden Abstimmungen helfen :)

— Daniel

Sehr hilfreich. Bestimmte Ajax-Methoden müssen das Formular deaktivieren und andere nicht. Dies hat mir sehr geholfen und mir geholfen zu verstehen, wie man benutzerdefinierte Erfolgsmethoden anfügt. Danke.

— Tanvir Chowdhury

3

Ich habe ein Widget erstellt, mit dem eine schreibgeschützte Ansicht des Inhalts Ihrer Seite vollständig deaktiviert oder angezeigt werden kann. Es deaktiviert alle Schaltflächen, Anker, entfernt alle Klickereignisse usw. und kann sie alle wieder aktivieren. Es werden sogar alle Widgets der jQuery-Benutzeroberfläche unterstützt. Ich habe es für eine Anwendung erstellt, die ich bei der Arbeit geschrieben habe. Sie können es verwenden.

Überprüfen Sie es unter ( http://www.dougestep.com/dme/jquery-disabler-widget ).

— Doug Estep
quelle

1

Mit diesem jQuery-Skript können Sie einige Elemente während Ajax deaktivieren / aktivieren:

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

Wenn Sie ajax-disablingdem <form>oder <div>(oder einem anderen Wrapper) eine Klasse hinzufügen , werden alle Eingaben während des Ajax deaktiviert.

Sie können mit Selektoren herumspielen und auch Auswahl- und Textbereiche deaktivieren.

Siehe auch /drupal//a/76838/6309

Aktualisieren

Wenn Sie Elemente im Formular bereits deaktiviert haben und sie nach Ajax deaktiviert lassen möchten, verwenden Sie den nächsten Code:

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

— melkowski
quelle