J'ai un champ de texte masqué dont la valeur est mise à jour via une réponse AJAX.
<input type="hidden" value="" name="userid" id="useid" />
Lorsque cette valeur change, je souhaite déclencher une demande 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 chercher la valeur:
$('#userid').change( function() {
alert('Change!');
})
C'est donc très tard, mais j'ai découvert une réponse, au cas où cela deviendrait utile à quiconque se heurterait à ce fil.
Les modifications de valeur apportées aux éléments masqués ne déclenchent pas automatiquement l'événement .change (). Ainsi, quelle que soit la définition de cette valeur, vous devez également indiquer à jQuery de la déclencher.
function setUserID(myValue) {
$('#userid').val(myValue)
.trigger('change');
}
Une fois que c'est le cas,
$('#userid').change(function(){
//fire your ajax call
})
devrait fonctionner comme prévu.
Etant donné que les entrées masquées ne déclenchent pas d’événement "change", j’ai utilisé MutationObserver pour le déclencher.
(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 moins
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] );
Vous pouvez simplement utiliser la fonction ci-dessous, vous pouvez également changer l'élément type.
$("input[type=hidden]").bind("change", function() {
alert($(this).val());
});
Les modifications de valeur apportées aux éléments masqués ne déclenchent pas automatiquement l'événement .change (). Ainsi, quelle que soit la définition de cette valeur, vous devez également indiquer à jQuery de la déclencher.
HTML
<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();
devrait fonctionner comme prévu.
Il est possible d'utiliser Object.defineProperty()
afin de redéfinir la propriété 'value' de l'élément input et de ne rien faire lors de 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);
$('#userid').change(function(){
//fire your ajax call
});
$('#userid').val(10).change();
Cet exemple renvoie la valeur du champ de brouillon chaque fois que le champ de 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].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 });
}
};
})();