Nonaktifkan semua elemen formulir saat melakukan AJAX

8

Saya memiliki formulir di mana setiap bidang input pengguna diaktifkan AJAX, dan saya ingin menonaktifkan semua elemen formulir ketika salah satunya diubah - apakah mungkin?

7 forms ajax

— Daniel
sumber

12

Iya itu mungkin. Misalnya, Anda bisa melampirkan file .js ke formulir Anda dan memperluas objek Drupal.ajax.
Setiap elemen yang dapat memulai pengajuan AJAX dari formulir memiliki instance Drupal.ajax sendiri. Anda dapat menemukannya di objek global Drupal.ajax. Dan setiap benda Drupal.ajax memiliki metode success, error, beforeSenddll
Berikut ini adalah contoh sederhana untuk menunjukkan ide:

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

Pendekatan ini mungkin tampak sedikit sulit, tetapi memberi Anda kendali penuh atas AJAX dalam formulir Anda.
Cara lain adalah dengan menggunakan metode jQuery seperti .ajaxStart(), karena Drupal menggunakan jQuery AJAX Framework.

— kalabro
sumber

Saya akhirnya tidak memerlukan fitur ini di situs saya dan batasan waktu telah menghalangi saya untuk memeriksa jawaban ini. Saya akan menerima jawaban ini meskipun tidak memeriksa karena tampaknya Anda berusaha keras untuk itu dan tidak adil untuk mengabaikannya. Juga dua pemilihan membantu :)

— Daniel

Sangat berguna. Diperlukan untuk memiliki metode ajax tertentu menonaktifkan formulir dan bukan yang lain. Ini banyak membantu saya dan membantu saya memahami cara melampirkan metode keberhasilan kustom. Terima kasih.

— Tanvir Chowdhury

3

Saya membuat widget yang dapat sepenuhnya menonaktifkan atau menyajikan tampilan hanya baca konten di halaman Anda. Ini menonaktifkan semua tombol, jangkar, menghapus semua acara klik, dll, dan dapat mengaktifkannya kembali. Bahkan mendukung semua widget jQuery UI juga. Saya membuatnya untuk aplikasi yang saya tulis di tempat kerja. Anda bebas menggunakannya.

Lihat di ( http://www.dougestep.com/dme/jquery-disabler-widget ).

— Doug Estep
sumber

1

Anda dapat menonaktifkan / mengaktifkan beberapa elemen selama ajax menggunakan skrip jQuery ini:

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

Jika Anda akan menambahkan kelas ajax-disablingke <form>atau <div>(atau pembungkus lain), semua input akan dinonaktifkan di dalam selama ajax.

Anda dapat bermain-main dengan penyeleksi dan menonaktifkan juga memilih dan textareas.

Lihat juga https://drupal.stackexchange.com/a/76838/6309

Memperbarui

Jika Anda sudah menonaktifkan elemen pada formulir dan Anda ingin tetap menonaktifkannya setelah ajax gunakan kode berikutnya:

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