AJAX करते समय सभी फ़ॉर्म तत्वों को अक्षम करें

Question

मेरे पास एक ऐसा फॉर्म है जहां हर उपयोगकर्ता इनपुट फ़ील्ड AJAX सक्षम है, और जब मैं उनमें से किसी एक को बदल दिया जाता है, तो मैं सभी फॉर्म तत्वों को अक्षम करना चाहूंगा - क्या यह संभव है?

Answer 1

हाँ, यह मुमकिन है। उदाहरण के लिए, आप .js फ़ाइल को अपने फ़ॉर्म में संलग्न कर सकते हैं और Drupal.ajax ऑब्जेक्ट का विस्तार कर सकते हैं।
AJAX सबमिशन को फॉर्म से आरंभ करने वाले प्रत्येक तत्व का Drupal.ajax का अपना उदाहरण है। आप इसे वैश्विक वस्तु में पा सकते हैं Drupal.ajax। और हर Drupal.ajax वस्तु तरीकों है success, error, beforeSendआदि
यहाँ विचार प्रदर्शित करने के लिए एक सरल उदाहरण है:

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

यह दृष्टिकोण थोड़ा मुश्किल लग सकता है, लेकिन यह आपको अपने रूपों में AJAX पर पूर्ण नियंत्रण देता है।
दूसरा तरीका jQuery के तरीकों का उपयोग करना है .ajaxStart(), क्योंकि Drupal jQuery AJAX फ्रेमवर्क का उपयोग करता है।

Comments

मुझे अपनी साइट में इस सुविधा की आवश्यकता नहीं थी और समय की कमी ने मुझे इस उत्तर को जांचने से रोका। मैं इस उत्तर को जाँच न करने के बावजूद स्वीकार करने जा रहा हूँ क्योंकि ऐसा लगता है कि आपने इसमें बहुत प्रयास किया है और इसे अनदेखा करना अनुचित है। इसके अलावा दो वोट-अप की मदद :)

— डैनियल

बहुत उपयोगी। कुछ अजाक्स तरीकों को निष्क्रिय करने की आवश्यकता है और अन्य को नहीं। इससे मुझे बहुत मदद मिली और मुझे यह समझने में मदद मिली कि कस्टम सफलता के तरीकों को कैसे जोड़ा जाए। धन्यवाद।

— तनवीर चौधरी 12

Answer 2

मैंने एक ऐसा विजेट बनाया, जो आपके पृष्ठ की सामग्री का केवल-पढ़ने के लिए पूरी तरह से अक्षम या प्रस्तुत कर सकता है। यह सभी बटन, एंकर को निष्क्रिय कर देता है, सभी क्लिक घटनाओं को हटा देता है, आदि, और उन सभी को फिर से सक्षम कर सकता है। यह सभी jQuery यूआई विगेट्स का भी समर्थन करता है। मैंने इसे एक एप्लिकेशन के लिए बनाया था जिसे मैंने काम पर लिखा था। आप इसका उपयोग करने के लिए स्वतंत्र हैं।

इसे देखें ( http://www.dougestep.com/dme/jquery-disabler-widget )।

Answer 3

आप इस jQuery स्क्रिप्ट का उपयोग करके ajax के दौरान कुछ तत्वों को अक्षम / सक्षम कर सकते हैं:

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

आप कक्षा में जोड़ देंगे ajax-disablingकरने के लिए <form>या <div>(या किसी अन्य आवरण) सभी आदानों ajax के दौरान विकलांग के अंदर हो जाएगा।

आप चयनकर्ताओं के साथ चारों ओर खेल सकते हैं और चयन और टेक्स्टारेस को भी अक्षम कर सकते हैं।

Https://drupal.stackexchange.com/a/76838/6309 भी देखें

अपडेट करें

यदि आपके पास पहले से ही फ़ॉर्म में अक्षम तत्व हैं और आप अगले कोड के अजाक्स के उपयोग के बाद उन्हें अक्षम रखना चाहते हैं:

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