AJAX করার সময় সমস্ত ফর্ম উপাদানগুলি অক্ষম করুন

Question

আমার এমন একটি ফর্ম রয়েছে যেখানে প্রতিটি ব্যবহারকারীর ইনপুট ক্ষেত্রটি এজাক্স সক্ষম থাকে এবং আমি যখন ফর্মের একটি উপাদান পরিবর্তন করি তখন সমস্তগুলি অক্ষম করতে চাই - এটি কি সম্ভব?

Answer 1

হ্যাঁ এটা সম্ভব. উদাহরণস্বরূপ, আপনি আপনার ফর্মের সাথে একটি .js ফাইল সংযুক্ত করতে পারেন এবং 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(), কারণ দ্রুপাল jQuery AJAX ফ্রেমওয়ার্ক ব্যবহার করে।

Comments

আমি আমার সাইটে এই বৈশিষ্ট্যটির প্রয়োজন নেই এবং সময় সীমাবদ্ধতা আমাকে এই উত্তরটি পরীক্ষা করতে বাধা দিয়েছে। আমি এই উত্তরটি যাচাই না করেও তা গ্রহণ করতে চলেছি কারণ মনে হচ্ছে আপনি এটিতে প্রচুর প্রচেষ্টা করেছেন এবং এটিকে অগ্রাহ্য করা অন্যায়। এছাড়াও দুটি ভোট আপগুলি সহায়তা করে :)

— ড্যানিয়েল

খুব দরকারী. নির্দিষ্ট অজাক্স পদ্ধতিতে অন্যদের নয় বরং ফর্মটি অক্ষম করা দরকার। এটি আমাকে অনেক সহায়তা করেছে এবং কাস্টম সাফল্যের পদ্ধতিগুলি কীভাবে সংযুক্ত করতে হয় তা বুঝতে সহায়তা করেছে। ধন্যবাদ.

— তানভীর চৌধুরী

Answer 2

আমি এমন একটি উইজেট তৈরি করেছি যা আপনার পৃষ্ঠায় থাকা সামগ্রীর পঠনযোগ্য দৃশ্যটি সম্পূর্ণরূপে অক্ষম করতে বা উপস্থাপন করতে পারে। এটি সমস্ত বোতাম, অ্যাঙ্কারগুলি অক্ষম করে, সমস্ত ক্লিক ইভেন্টগুলি, ইত্যাদি সরায় এবং এগুলি আবার ফিরিয়ে সক্ষম করতে পারে। এটি সমস্ত jQuery ইউআই উইজেটগুলিকেও সমর্থন করে। আমি কাজটিতে লিখেছি এমন একটি অ্যাপ্লিকেশনের জন্য এটি তৈরি করেছি। আপনি এটি ব্যবহার মুক্ত।

এটি ( http://www.dougestep.com/dme/jquery-disabler-widget ) এ দেখুন।

Answer 3

আপনি এই 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");
      }
    });

যদি আপনি ক্লাস যুক্ত ajax-disablingকরেন <form>বা <div>(বা অন্য কোনও মোড়ক) সমস্ত ইনজুট এজ্যাক্সের সময় ভিতরে অক্ষম করা হবে।

আপনি নির্বাচকদের সাথে চারপাশে খেলতে পারেন এবং নির্বাচন এবং টেক্সারিও অক্ষম করতে পারেন।

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