Desabilitar todos os elementos do formulário ao executar o AJAX

8

Eu tenho um formulário no qual todos os campos de entrada do usuário estão habilitados para AJAX e gostaria de desativar todos os elementos do formulário quando um deles é alterado - é possível?

7 forms ajax

— Daniel
fonte

12

Sim é possivel. Por exemplo, você pode anexar um arquivo .js ao seu formulário e estender o objeto Drupal.ajax.
Todo elemento que pode iniciar o envio do AJAX a partir de um formulário possui sua própria instância do Drupal.ajax. Você pode encontrá-lo no objeto global Drupal.ajax. E cada objeto Drupal.ajax tem os métodos success, error, beforeSendetc.
Aqui está um exemplo simples para demonstrar a idéia:

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

Essa abordagem pode parecer um pouco difícil, mas fornece controle total sobre o AJAX em seus formulários.
Outra maneira é usar métodos jQuery como .ajaxStart(), porque o Drupal usa o jQuery AJAX Framework.

— kalabro
fonte

Acabei não precisando desse recurso no meu site e as restrições de tempo me impediram de verificar esta resposta. Aceito esta resposta apesar de não a ter verificado, porque parece que você se esforça muito e é injusto ignorá-la. Também a duas voto-ups ajuda :)

— Daniel

Muito útil. Necessário ter certos métodos ajax desabilitar o formulário e não outros. Isso me ajudou muito e me ajudou a entender como anexar métodos de sucesso personalizados. Obrigado.

— Tanvir Chowdhury

3

Criei um widget que pode desativar completamente ou apresentar uma exibição somente leitura do conteúdo da sua página. Desativa todos os botões, ancora, remove todos os eventos de clique, etc., e pode reativá-los novamente. Ele também suporta todos os widgets da interface do usuário do jQuery. Eu o criei para um aplicativo que escrevi no trabalho. Você é livre para usá-lo.

Confira em ( http://www.dougestep.com/dme/jquery-disabler-widget ).

— Doug Estep
fonte

1

Você pode desativar / ativar alguns elementos durante o 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");
      }
    });

Se você adicionar classe ajax-disablingao <form>ou <div>(ou qualquer outro invólucro), todas as entradas serão desabilitadas durante o ajax.

Você pode brincar com os seletores e desativar também as seleções e as áreas de texto.

Consulte também https://drupal.stackexchange.com/a/76838/6309

Atualizar

Se você já desabilitou elementos no formulário e deseja mantê-los desabilitados após o ajax, use o próximo 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');
          }
        });
      }
    });

— milkovsky
fonte