Detect when input value is changed via js

Asked

Viewed 1,363 times

3

I have a third system that fills a field through a zoom. Below this zoom I have a product grid (my specific). I need to include a product in this grid whenever the system fills this product field. However, there is no customization point that can intercept the moment the product is selected at zoom.

The question is: How to detect that the field value has been changed (remembering that it is changed via javascript)? I have tried using the events: bind and on of jquery without success. Another alternative gambiarrenta was to use a settimeout. For now I’m looking for a more elegant way out to solve such a situation.

Someone’s been through something like this?

javascript
  • 1

    You can use the event change, if I understand your problem well. Can you put the HTML of that(s) field(s)? A live example on jsFiddle would be ideal to understand better.

  • I tried to use the change event. However, as the field is changed via js and not by the user apparently is ignored

  • And the JS code that changes the value is not yours?

  • http://jsfiddle.net/emirdeliz/26v6urLw/

  • It’s not. A third party system is responsible for zooming in and setting the value. Let’s say I’m customizing a system fragment

  • 1

    And does the third system run on your page? Is that code exposed to global space? you could change their method that applies the change of value... half gross, but otherwise I think it’s really the setTimeout... Something like this: http://jsfiddle.net/26v6urLw/4/

  • I tested the code sent by @Sergio and went, I even added a function that changes the code on the click and triggered the event... see here

Show 2 more comments

3 answers

2

This may be possible in the future. A new method is foreseen that can solve this problem, the Object.(), promised for ES7.

If you go forward you can pass an object to the method and a callback that will be called every time there is a change to object properties. In your case it should be called with the event update.

But that still doesn’t exist and one of polyfillque already exists does not work in this case (http://jsfiddle.net/5ehaor1d/).

That leaves two possibilities. One of them has already occurred to you that is to use setInterval or setTimeout.

The other, it is a brute force, and it works if the external code uses jQuery. The idea is to change the method .val() jQuery to trigger events when changing values. I do not guarantee that it will not fail but in this case it works (http://jsfiddle.net/26v6urLw/4/).

var jVal = $.fn.val;
$.fn.val = function(v) {
    if (typeof v != 'undefined') jVal.call(this, v);
    else return jVal.call(this);
    if (v) $(this).trigger('change');
}
  • 1

    There is also an interesting solution on the Soen: http://stackoverflow.com/a/19378549

  • @bfavaretto this idea is very good! Puts an answer with her.

0

If you can modify the function that changes the value of the field, I believe the problem is easily solved by adding the line $("#teste").trigger('change'); just below the line modifying the field value. So whenever the value is modified the event change will be fired and the handler of the event will capture you and treat you.

  • I understood that he would have no way to change this piece of code (would be out of his control).

  • If he has no way to change the code snippet this answer is not valid, then he should use another approach. But if he has this possibility is a possible solution. From what I understood he would have access to carry out this small modification.

  • Really I could be wrong.

  • Actually I do not have access to zoom callback. Therefore, there is no way to intercept

  • Thank you so much for the support. The option I was using setInterval. Even though it was not the most elegant option the code was not so bad. I used the following link: http://james.padolsey.com/javascript/monitoring-dom-properties/

0

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.