Disabilita tutti gli elementi del modulo quando esegui AJAX

8

Ho un modulo in cui tutti i campi di input dell'utente sono abilitati AJAX e mi piacerebbe disabilitare tutti gli elementi del modulo quando uno di essi viene cambiato - è possibile?

7 forms ajax

— Daniel
fonte

12

Si è possibile. Ad esempio, è possibile allegare un file .js al modulo ed estendere l'oggetto Drupal.ajax.
Ogni elemento che può avviare l'invio AJAX da un modulo ha la sua istanza di Drupal.ajax. Lo puoi trovare nell'oggetto globale Drupal.ajax. E ogni oggetto Drupal.ajax ha metodi success, error, beforeSendecc
Ecco un semplice esempio per dimostrare l'idea:

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

Questo approccio può sembrare un po 'difficile, ma ti dà il pieno controllo di AJAX nelle tue forme.
Un altro modo è usare metodi come jQuery .ajaxStart(), perché Drupal usa jQuery AJAX Framework.

— kalabro
fonte

Ho finito per non aver bisogno di questa funzione nel mio sito e i vincoli temporali mi hanno impedito di controllare questa risposta. Accetterò questa risposta nonostante non la controlli perché sembra che tu abbia fatto molti sforzi in essa ed è ingiusto ignorarla. Anche i due voti aiutano :)

— Daniel

Molto utile. Necessario disporre di alcuni metodi ajax per disabilitare il modulo e non altri. Questo mi ha aiutato molto e mi ha aiutato a capire come collegare metodi di successo personalizzati. Grazie.

— Tanvir Chowdhury,

3

Ho creato un widget che può disabilitare completamente o presentare una vista di sola lettura del contenuto della tua pagina. Disabilita tutti i pulsanti, le ancore, rimuove tutti gli eventi di clic, ecc. E può riabilitarli nuovamente. Supporta anche tutti i widget dell'interfaccia utente jQuery. L'ho creato per un'applicazione che ho scritto al lavoro. Sei libero di usarlo.

Dai un'occhiata a ( http://www.dougestep.com/dme/jquery-disabler-widget ).

— Doug Estep
fonte

1

Puoi disabilitare / abilitare alcuni elementi durante ajax usando questo 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");
      }
    });

Se aggiungerai classe ajax-disablingal <form>o <div>(o qualsiasi altro wrapper) tutti gli input saranno disabilitati all'interno durante ajax.

Puoi giocare con i selettori e disabilitare anche le selezioni e le textareas.

Vedi anche https://drupal.stackexchange.com/a/76838/6309

Aggiornare

Se sul modulo sono già stati disabilitati elementi e si desidera mantenerli disabilitati dopo ajax, utilizzare il codice successivo:

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