Detect if a field is updated with Javascript or Jquery, without using a trigger

Question

Detect if a field is updated with Javascript or Jquery, without using a trigger

Navigation

#1 by (0 votes)

0

I have a very extensive template, and there is a form that updates the value of a text field with Javascript or Jquery, this function has not been able to locate it, and I need to detect when this field is updated, I have tried with all these functions, but it is not detecting when it is updated.

Can you help me find the reason, or some solution, why is not it detected when the field is updated from Javascript but is detected when updated when I write and click outside the field?

IMPORTANT: The 90,000 value that is added dynamically, makes it a specific function, which I have not been able to find and I urgently need to solve for time issues in the quickest and easiest way, and is to try detect if the value changed with Javascript and not with user actions.

$(function(){

/**
 * Actualización automática del formulario, funcion no encontrada
 * IMPORTANTE: $('#long').val('90.000').trigger('change') no puedo usar esto por que la
   Funcion que agrega este valor no la he encontrado y es muy extenso el proyecto, quiero una              alternativa rápida desde Javascript o Jquery
 */
setTimeout(function(){
  // Value updated automatically
  $('#long').val("90.000");
}, 2000);

/**
 * Detecta cuando el campo es actualizado
 */
$('input#long').on('change', function(){
  alert("Updated");
});

$(':input').on('change', function(){
  alert("Updated");
});

$('input#long').change(function(){
  alert("Updated");
});

$(document).on('change', 'input#long', function(){
  alert("Updated");
});  

$(document).on('change', 'input', function(){
  alert("Updated");
}); 

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="long">

javascript jquery

asked by Learning and sharing 31.08.2018 в 20:12

source

1 answer

No 'Access-Control-Allow-Origin' header is present on the requested resource (flask - python - js) Execute functions simultaneously from the controller in AngularJS

score 0 · Answer 1

The change event is not thrown when the value is changed with $.val() . So you can not use it to detect when its value changes dynamically. See example:

$("input").on("change", function(e){
  $("p").html("valor: " + $(this).val());
});
var v = 0;
$("button").on("click", function(){
  $("input").val(v++);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input placeholder="click me!">
<button>Click me!</button>
<p></p>

So you would have to overwrite the $.val() function so that after changing the value, launch the event change and thus be able to detect it. I leave you the code that I found in a response from the community in English :

(function($){
    var originalVal = $.fn.val;
    $.fn.val = function(){
        var result =originalVal.apply(this,arguments);
        if(arguments.length>0)
            $(this).change(); // OR with custom event $(this).trigger('value-changed');
        return result;
    };
})(jQuery);

Preferably place this code before any code of your project is executed, this way you will not have problems. See the difference:

(function($){
    var originalVal = $.fn.val;
    $.fn.val = function(){
        var result =originalVal.apply(this,arguments);
        if(arguments.length>0)
            $(this).change(); // OR with custom event $(this).trigger('value-changed');
        return result;
    };
})(jQuery);

$("input").on("change", function(e){
  $("p").html("valor: " + $(this).val());
});
var v = 0;
$("button").on("click", function(){
  $("input").val(v++);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input placeholder="click me!">
<button>Click me!</button>
<p></p>

Now the only thing you have to do is detect if the new value is "90,000" so you set it at the value that suits you or directly omit it.

Greetings!