jQuery – Detectar alteração de valor no campo de input oculto

Eu tenho um campo de texto oculto cujo valor é atualizado por meio de uma resposta AJAX.

 

Quando esse valor for alterado, eu gostaria de triggersr uma solicitação AJAX. Alguém pode aconselhar sobre como detectar a mudança?

Eu tenho o seguinte código, mas não sei como procurar o valor:

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

Então, é muito tarde, mas descobri uma resposta, no caso de se tornar útil para qualquer um que se deparar com essa discussão.

Alterações no valor para elementos ocultos não ativam automaticamente o evento .change (). Então, onde quer que você esteja configurando esse valor, você também precisa dizer ao jQuery para ativá-lo.

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

Uma vez que é o caso,

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

deve funcionar como esperado.

Como a input oculta não aciona o evento “change” na mudança, usei o MutationObserver para acioná-lo.

(Às vezes, alterações de valor de input ocultas são feitas por alguns outros scripts que você não pode modificar)

Isso não funciona no IE10 e abaixo

 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] ); 

Você pode simplesmente usar a function abaixo, Você também pode alterar o elemento de tipo.

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

Alterações no valor para elementos ocultos não ativam automaticamente o evento .change (). Então, onde quer que você esteja configurando esse valor, você também precisa dizer ao jQuery para ativá-lo.

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).trigger('change');; console.log("value changed" +$testChange.val()); }, 3000); updateChange();

deve funcionar como esperado.

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

É possível usar Object.defineProperty() para redefinir a propriedade ‘value’ do elemento de input e fazer qualquer coisa durante a mudança.

Object.defineProperty() nos permite definir um getter e setter para uma propriedade, controlando-a.

 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(); 

Este exemplo retorna o valor do campo de detalhamento toda vez que o campo de rascunho oculto altera seu valor (navegador 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 }); } }; })(); 

Embora este segmento tenha 3 anos, esta é a minha solução:

 $(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"); }); } 
Intereting Posts