it-swarm.com.de

Deaktivieren Sie alle Formularelemente, wenn Sie AJAX

Ich habe ein Formular, in dem jedes Benutzereingabefeld AJAX aktiviert) ist, und ich möchte alle Formularelemente deaktivieren, wenn eines davon geändert wird - ist das möglich?

8
Daniel

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 AJAX Übermittlung von einem Formular initiieren kann, hat eine eigene Instanz von Drupal.ajax. Sie finden es im globalen Objekt Drupal.ajax. Und jedes Das Drupal.ajax-Objekt verfügt über die Methoden success, error, beforeSend usw.
Hier ist ein einfaches Beispiel, um 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 besteht darin, jQuery-Methoden wie .ajaxStart() zu verwenden, da Drupal verwendet jQuery AJAX) = Framework.

12
kalabro

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 ).

3
Doug Estep

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 die Klasse ajax-disabling zum <form> oder <div> (oder ein anderer Wrapper) Alle Eingaben werden während Ajax deaktiviert.

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

Siehe auch https://drupal.stackexchange.com/a/76838/6309

Update

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