Deshabilite todos los elementos de formulario al hacer AJAX


8

Tengo un formulario donde cada campo de entrada del usuario está habilitado para AJAX, y me gustaría deshabilitar todos los elementos del formulario cuando se cambia uno de ellos, ¿es posible?

Respuestas:


12

Si es posible. Por ejemplo, puede adjuntar un archivo .js a su formulario y extender el objeto Drupal.ajax.
Cada elemento que puede iniciar el envío de AJAX desde un formulario tiene su propia instancia de Drupal.ajax. Puedes encontrarlo en el objeto global Drupal.ajax. Y cada objeto tiene Drupal.ajax los métodos success, error, beforeSendetc.
Aquí está un ejemplo sencillo para demostrar la 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);

Este enfoque puede parecer un poco difícil, pero le da control total sobre AJAX en sus formularios.
Otra forma es usar métodos jQuery como .ajaxStart(), porque Drupal usa jQuery AJAX Framework.


Terminé no necesitando esta función en mi sitio y las limitaciones de tiempo me han impedido verificar esta respuesta. Voy a aceptar esta respuesta a pesar de no verificarla, porque parece que pones mucho esfuerzo en ello y es injusto ignorarla. También ayudan las dos votaciones :)
Daniel

Muy útil. Necesario para que ciertos métodos ajax deshabiliten el formulario y no otros. Esto me ayudó mucho y me ayudó a entender cómo adjuntar métodos de éxito personalizados. Gracias.
Tanvir Chowdhury

3

Creé un widget que puede deshabilitar por completo o presentar una vista de solo lectura del contenido de su página. Deshabilita todos los botones, anclas, elimina todos los eventos de clic, etc., y puede volver a habilitarlos nuevamente. Incluso es compatible con todos los widgets de jQuery UI también. Lo creé para una aplicación que escribí en el trabajo. Eres libre de usarlo.

Compruébelo en ( http://www.dougestep.com/dme/jquery-disabler-widget ).


1

Puede deshabilitar / habilitar algunos elementos durante ajax usando este 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 va a agregar clase ajax-disablingal <form>o <div>(o cualquier otro contenedor) todas las entradas se deshabilitarán dentro durante ajax.

Puede jugar con selectores y deshabilitar también selecciones y áreas de texto.

Ver también https://drupal.stackexchange.com/a/76838/6309

Actualizar

Si ya ha deshabilitado elementos en el formulario y desea mantenerlos deshabilitados después de ajax, use el siguiente código:

  // 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');
          }
        });
      }
    });
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.