Désactiver tous les éléments du formulaire lors de l'exécution d'AJAX

8

J'ai un formulaire dans lequel chaque champ de saisie utilisateur est activé par AJAX, et j'aimerais désactiver tous les éléments du formulaire lorsque l'un d'eux est modifié - est-ce possible?

7 forms ajax

— Daniel
source

12

Oui c'est possible. Par exemple, vous pouvez joindre un fichier .js à votre formulaire et étendre l'objet Drupal.ajax.
Chaque élément qui peut lancer la soumission AJAX à partir d'un formulaire a sa propre instance de Drupal.ajax. Vous pouvez le trouver dans l'objet global Drupal.ajax. Et chaque objet a Drupal.ajax les méthodes success, error, beforeSendetc.
Voici un exemple simple pour démontrer l'idée:

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

Cette approche peut sembler un peu difficile, mais elle vous donne un contrôle total sur AJAX dans vos formulaires.
Une autre façon consiste à utiliser des méthodes jQuery comme .ajaxStart(), parce que Drupal utilise jQuery AJAX Framework.

— kalabro
source

J'ai fini par ne pas avoir besoin de cette fonctionnalité sur mon site et les contraintes de temps m'ont empêché de vérifier cette réponse. Je vais accepter cette réponse en dépit de ne pas l'avoir vérifiée car il semble que vous y ayez consacré beaucoup d'efforts et il est injuste de l'ignorer. Les deux votes aident aussi :)

— Daniel

Très utile. Nécessité d'avoir certaines méthodes ajax désactiver le formulaire et pas d'autres. Cela m'a beaucoup aidé et m'a aidé à comprendre comment associer des méthodes de réussite personnalisées. Je vous remercie.

— Tanvir Chowdhury

3

J'ai créé un widget qui peut complètement désactiver ou présenter une vue en lecture seule du contenu de votre page. Il désactive tous les boutons, ancres, supprime tous les événements de clic, etc., et peut les réactiver tous à nouveau. Il prend également en charge tous les widgets jQuery UI. Je l'ai créé pour une application que j'ai écrite au travail. Vous êtes libre de l'utiliser.

Consultez-le sur ( http://www.dougestep.com/dme/jquery-disabler-widget ).

— Doug Estep
source

1

Vous pouvez désactiver / activer certains éléments pendant ajax en utilisant ce script 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");
      }
    });

Si vous ajoutez une classe ajax-disablingà <form>ou <div>(ou tout autre wrapper), toutes les entrées seront désactivées à l'intérieur pendant ajax.

Vous pouvez jouer avec les sélecteurs et désactiver également les sélections et les zones de texte.

Voir également https://drupal.stackexchange.com/a/76838/6309

Mise à jour

Si vous avez déjà désactivé des éléments sur le formulaire et que vous souhaitez les garder désactivés après ajax, utilisez le code suivant:

  // 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
source