jQuery-লুকানো ইনপুট ক্ষেত্রের মান পরিবর্তন সনাক্ত করুন




event-handling field (5)

আমার একটি লুকানো পাঠ্য ক্ষেত্র রয়েছে যার মূল্য একটি AJAX প্রতিক্রিয়া মাধ্যমে আপডেট হয়।

<input type="hidden" value="" name="userid" id="useid" />

এই মান পরিবর্তন হলে, আমি একটি AJAX অনুরোধ ফায়ার করতে চাই। কেউ কিভাবে পরিবর্তন সনাক্ত করার পরামর্শ দিতে পারেন?

আমার নিম্নলিখিত কোড আছে, কিন্তু মানটির জন্য কীভাবে তাকান তা জানি না:

$('#userid').change( function() {  
    alert('Change!'); 
}) 

আপনি কেবল নীচের ফাংশন ব্যবহার করতে পারেন, আপনি টাইপ উপাদান পরিবর্তন করতে পারেন।

 $("input[type=hidden]").bind("change", function() {
       alert($(this).val()); 
 });

লুকানো উপাদানের মান পরিবর্তন স্বয়ংক্রিয়ভাবে .change () ইভেন্টটি ফায়ার করে না। সুতরাং, যেহেতু আপনি যে মানটি সেট করছেন সেক্ষেত্রে আপনাকে এটি ট্রিগার করতে জাভাস্ক্রিপ্টকে বলতে হবে।

এইচটিএমএল

 <div id="message"></div>
<input type="hidden" id="testChange" value="0"  />    

অবশ্যই JAVASCRIPT

var $message = $('#message');
var $testChange = $('#testChange');
var i = 1;

function updateChange() {
    $message.html($message.html() + '<p>Changed to ' + $testChange.val() + '</p>');
}

$testChange.on('change', updateChange);

setInterval(function() {
    $testChange.val(++i).trigger('change');; 
    console.log("value changed" +$testChange.val());
}, 3000);

updateChange();

প্রত্যাশিত হিসাবে কাজ করা উচিত।

http://jsfiddle.net/7CM6k/3/


ইনপুট উপাদানটির 'মান' বৈশিষ্ট্যটি পুনরায় সংজ্ঞায়িত করতে এবং এর পরিবর্তনের সময় কিছু করার জন্য Object.defineProperty() ব্যবহার করা সম্ভব।

Object.defineProperty() আমাদের একটি সম্পত্তি জন্য একটি Object.defineProperty() সংজ্ঞায়িত করার অনুমতি দেয়, এইভাবে এটি নিয়ন্ত্রণ।

replaceWithWrapper($("#hid1")[0], "value", function(obj, property, value) { 
  console.log("new value:", value)
});

function replaceWithWrapper(obj, property, callback) {
  Object.defineProperty(obj, property, new function() {
    var _value = obj[property];
    return {
      set: function(value) {
        _value = value;
        callback(obj, property, value)
      },
      get: function() {
        return _value;
      }
    }
  });
}

$("#hid1").val(4);

https://jsfiddle.net/bvvmhvfk/


যদিও এই থ্রেড 3 বছর বয়সী, এখানে আমার সমাধান:

$(function ()
{
    keep_fields_uptodate();
});

function keep_fields_uptodate()
{
    // Keep all fields up to date!
    var $inputDate = $("input[type='date']");
    $inputDate.blur(function(event)
    {
        $("input").trigger("change");
    });
}

যেহেতু লুকানো ইনপুট পরিবর্তনে ইভেন্টটি "পরিবর্তন" ট্রিগার করে না, তাই পরিবর্তে এটিতে ট্রিগার করার জন্য আমি MutationObserver ব্যবহার করি।

(কখনও কখনও লুকানো ইনপুট মান পরিবর্তনগুলি আপনি পরিবর্তন করতে পারবেন এমন কিছু অন্যান্য স্ক্রিপ্ট দ্বারা সম্পন্ন হয়)

এই IE10 এবং নীচে কাজ করে না

MutationObserver = window.MutationObserver || window.WebKitMutationObserver;

var trackChange = function(element) {
  var observer = new MutationObserver(function(mutations, observer) {
    if(mutations[0].attributeName == "value") {
        $(element).trigger("change");
    }
  });
  observer.observe(element, {
    attributes: true
  });
}

// Just pass an element to the function to start tracking
trackChange( $("input[name=foo]")[0] );

$('#userid').change(function(){
  //fire your ajax call  
});

$('#userid').val(10).change();




hidden