metodo - jQuery-Detectar el cambio de valor en el campo de entrada oculto

jquery detectar cambio en div

Question

Tengo un campo de texto oculto cuyo valor se actualiza a través de una respuesta AJAX.

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

Cuando este valor cambie, me gustaría disparar una solicitud AJAX. ¿Alguien puede aconsejar sobre cómo detectar el cambio?

Tengo el siguiente código, pero no sé cómo buscar el valor:

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

Answer 1

Así que esto es muy tarde, pero he descubierto una respuesta, en caso de que sea útil para cualquiera que encuentre este hilo.

Los cambios en el valor de los elementos ocultos no activan automáticamente el evento .change (). Entonces, donde sea que esté configurando ese valor, también tiene que decirle a jQuery que lo active.

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

Una vez que ese es el caso,

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

Debería funcionar como se espera.

Answer 2

Aunque este hilo tiene 3 años, aquí está mi solución:

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

Answer 3

Dado que la entrada oculta no desencadena un evento de "cambio" en el cambio, usé MutationObserver para desencadenar esto

(A veces, los cambios de valores de entrada ocultos se realizan mediante otros scripts que no se pueden modificar)

Esto no funciona en IE10 y por debajo

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

Answer 4

Es posible usar Object.defineProperty() para redefinir la propiedad ''valor'' del elemento de entrada y hacer cualquier cosa durante su cambio.

Object.defineProperty() nos permite definir un getter y setter para una propiedad, controlando así.

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/

Answer 5

Este ejemplo devuelve el valor del campo de borrador cada vez que el campo de borrador oculto cambia su 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  });

       }
  };
})();

Answer 6

Simplemente puede usar la siguiente función. También puede cambiar el elemento de tipo.

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

Los cambios en el valor de los elementos ocultos no activan automáticamente el evento .change (). Entonces, donde sea que esté configurando ese valor, también tiene que decirle a jQuery que lo active.

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

Debería funcionar como se espera.

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

Answer 7

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

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