jQuery – Détecte le changement de valeur sur le champ de saisie masqué

J’ai un champ de texte caché dont la valeur est mise à jour via une réponse AJAX.

 

Lorsque cette valeur change, je voudrais lancer une requête AJAX. Quelqu’un peut-il conseiller sur la façon de détecter le changement?

J’ai le code suivant, mais je ne sais pas comment rechercher la valeur:

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

Donc, c’est très tard, mais j’ai découvert une réponse, au cas où cela deviendrait utile à quiconque rencontrera ce sujet.

Les modifications de valeur des éléments masqués ne déclenchent pas automatiquement l’événement .change (). Donc, partout où vous définissez cette valeur, vous devez également dire à jQuery de le déclencher.

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

Une fois que c’est le cas,

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

devrait fonctionner comme prévu.

Étant donné que l’entrée cachée ne déclenche pas l’événement “change” lors du changement, j’ai utilisé MutationObserver pour le déclencher à la place.

(Parfois, les modifications de valeur d’entrée masquées sont effectuées par d’autres scripts que vous ne pouvez pas modifier)

Cela ne fonctionne pas dans IE10 et ci-dessous

 MutationObserver = window.MutationObserver || window.WebKitMutationObserver; var trackChange = function(element) { var observer = new MutationObserver(function(mutations, observer) { if(mutations[0].atsortingbuteName == "value") { $(element).sortinggger("change"); } }); observer.observe(element, { atsortingbutes: true }); } // Just pass an element to the function to start tracking trackChange( $("input[name=foo]")[0] ); 

Vous pouvez simplement utiliser la fonction ci-dessous, vous pouvez également modifier l’élément de type.

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

Les changements de valeur des éléments masqués ne déclenchent pas automatiquement l’événement .change (). Donc, partout où vous définissez cette valeur, vous devez également dire à jQuery de le déclencher.

HTML

  

JAVASCRIPT

 var $message = $('#message'); var $testChange = $('#testChange'); var i = 1; function updateChange() { $message.html($message.html() + '

Changed to ' + $testChange.val() + '

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

devrait fonctionner comme prévu.

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

Il est possible d’utiliser Object.defineProperty() afin de redéfinir la propriété ‘value’ de l’élément en entrée et de faire quoi que ce soit pendant sa modification.

Object.defineProperty() nous permet de définir un getter et un setter pour une propriété, la contrôlant ainsi.

 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/

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

Cet exemple renvoie la valeur du champ brouillon chaque fois que le champ brouillon masqué change de valeur (navigateur 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].atsortingbuteName == "value" ){ // use callback to pass back value of hidden form field callback( obj.value ); } }); // have the observer observe obj for changes in children // note 'atsortingbutes:true' else we can't read the input atsortingbute value obs.observe( obj, { childList:true, subtree:true, atsortingbutes:true }); } }; })(); 

Bien que ce fil ait 3 ans, voici ma solution:

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