web-dev-qa-db-fra.com

Désactivez tous les éléments du formulaire lorsque vous faites AJAX

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

7formsajax
8
Daniel

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 initier AJAX soumission à partir d'un formulaire a sa propre instance de Drupal.ajax. Vous pouvez le trouver dans l'objet global Drupal.ajax. Et chaque L'objet Drupal.ajax a les méthodes success, error, beforeSend etc.
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() , car Drupal utilise jQuery AJAX = Cadre.

12
kalabro

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 tous les réactiver. 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.

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

3
Doug Estep

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 la classe ajax-disabling à la <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 aussi 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');
          }
        });
      }
    });
1
milkovsky