it-swarm.asia

مسج - كشف تغيير القيمة في حقل الإدخال المخفي

لدي حقل نص مخفي يتم تحديث قيمته من خلال استجابة AJAX.

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

عندما تتغير هذه القيمة ، أرغب في تشغيل طلب AJAX. يمكن لأي شخص تقديم المشورة بشأن كيفية اكتشاف التغيير؟

لدي الكود التالي ، لكن لا أعرف كيف أبحث عن القيمة:

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

إذاً هذا متأخر ، لكنني اكتشفت إجابة ، في حالة كونه مفيدًا لأي شخص يأتي عبر هذا الموضوع.

لا تؤدي التغييرات في القيمة إلى العناصر المخفية إلى إطلاق حدث .change () تلقائيًا. لذلك ، أينما كنت تقوم بتعيين هذه القيمة ، عليك أيضًا أن تخبر jQuery بتشغيلها.

function setUserID(myValue) {
     $('#userid').val(myValue)
                 .trigger('change');
}

بمجرد أن هذا هو الحال ،

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

يجب أن تعمل كما هو متوقع.

570
yycroman

نظرًا لأن المدخلات المخفية لا تشغل حدث "التغيير" عند التغيير ، فقد استخدمت 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] );
21
lulalala

يمكنك ببساطة استخدام الوظيفة أدناه ، يمكنك أيضًا تغيير عنصر الكتابة.

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

لا تؤدي التغييرات في القيمة إلى العناصر المخفية إلى إطلاق حدث .change () تلقائيًا. لذلك ، أينما كنت تقوم بتعيين هذه القيمة ، عليك أيضًا أن تخبر jQuery بتشغيلها.

HTML

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

جافا سكريبت

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/

9
Tarun Gupta

من الممكن استخدام Object.defineProperty() من أجل إعادة تعريف خاصية 'value' لعنصر الإدخال وفعل أي شيء أثناء تغييره.

Object.defineProperty() يسمح لنا بتحديد getter و setter للخاصية ، وبالتالي السيطرة عليها.

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/

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

$('#userid').val(10).change();
2
Digambar Patil

يعرض هذا المثال قيمة حقل المسودة في كل مرة يغير فيها حقل المسودة المخفي قيمته (متصفح chrome):

var h = document.querySelectorAll('input[type="hidden"][name="draft"]')[0];
//or jquery.....
//var h = $('input[type="hidden"][name="draft"]')[0];

observeDOM(h, 'n', function(draftValue){ 
  console.log('dom changed draftValue:'+draftValue);
});


var observeDOM = (function(){
var MutationObserver = window.MutationObserver || 
window.WebKitMutationObserver;

  return function(obj, thistime, callback){
    if(typeof obj === 'undefined'){
      console.log('obj is undefined');
      return;
    }

    if( MutationObserver ){

        // define a new observer
        var obs = new MutationObserver(function(mutations, observer){

            if( mutations[0].addedNodes.length || mutations[0].removedNodes.length ){

               callback('pass other observations back...');

            }else if(mutations[0].attributeName == "value" ){

               // use callback to pass back value of hidden form field                            
               callback( obj.value );

            }

        });

        // have the observer observe obj for changes in children
        // note 'attributes:true' else we can't read the input attribute value
        obs.observe( obj, { childList:true, subtree:true, attributes:true  });

       }
  };
})();
0
user2677034