AJAX yaparken tüm form öğelerini devre dışı bırakma

8

Her kullanıcı giriş alanının AJAX etkin olduğu bir form var ve bunlardan biri değiştirildiğinde tüm form öğelerini devre dışı bırakmak istiyorum - mümkün mü?

7 forms ajax

— Daniel
kaynak

12

Evet mümkün. Örneğin, formunuza bir .js dosyası ekleyebilir ve Drupal.ajax nesnesini genişletebilirsiniz.
Bir formdan AJAX gönderimini başlatabilen her öğenin kendi Drupal.ajax örneği vardır. Global nesnede bulabilirsiniz Drupal.ajax. Ve her Drupal.ajax nesne yöntemleri vardır success, error, beforeSendvb
İşte fikir göstermek için basit bir örnek:

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

Bu yaklaşım biraz zor görünebilir, ancak formlarınızdaki AJAX üzerinde tam kontrol sağlar.
Başka bir yol, .ajaxStart()Drupal jQuery AJAX Framework kullandığından, jQuery yöntemlerini kullanmaktır .

— kalabro
kaynak

Sitemde bu özelliğe ihtiyaç duymadım ve zaman kısıtlamaları bu yanıtı kontrol etmemi engelledi. Bu cevabı kontrol etmemeye rağmen kabul edeceğim çünkü öyle görünüyor ki çok çaba harcadınız ve görmezden gelmek haksızlık. Ayrıca iki oylama yardımcı :)

— Daniel

Çok kullanışlı. Bazı ajax yöntemlerinin formu devre dışı bırakması gerekir, diğerleri değil. Bu bana çok yardımcı oldu ve özel başarı yöntemlerini nasıl ekleyeceğimi anlamama yardımcı oldu. Teşekkür ederim.

— Tanvir Chowdhury

3

Sayfanızdaki içeriğin salt okunur bir görünümünü tamamen devre dışı bırakabilen veya sunabilen bir widget oluşturdum. Tüm düğmeleri devre dışı bırakır, tüm tıklama etkinliklerini vb. Kaldırır ve hepsini yeniden etkinleştirebilir. Hatta tüm jQuery UI widget'larını da destekler. İş yerinde yazdığım bir uygulama için oluşturdum. Kullanmakta özgürsünüz.

Bunu kontrol edin ( http://www.dougestep.com/dme/jquery-disabler-widget ).

— Doug Estep
kaynak

1

Ajax sırasında bu jQuery komut dosyasını kullanarak bazı öğeleri devre dışı bırakabilir / etkinleştirebilirsiniz:

  // 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");
      }
    });

Veya (veya başka bir sarmalayıcıya) sınıf ekleyecekseniz ajax-disabling, ajax sırasında tüm girişler devre dışı bırakılır.<form><div>

Seçicilerle oynayabilir ve ayrıca seçimleri ve metinleri devre dışı bırakabilirsiniz.

Ayrıca bkz. Https://drupal.stackexchange.com/a/76838/6309

Güncelleme

Formdaki öğeleri zaten devre dışı bıraktıysanız ve ajax'tan sonra bunları devre dışı bırakmak istiyorsanız sonraki kodu kullanın:

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