Question:
I have a third-party system that fills a field using a zoom. Below this zoom I have a grid of products (my specific). I need to include a product in this grid whenever the system fills in this product field. However, there is no customization point that can intercept the moment the product is selected in the zoom.
The question is: How to detect that the field value has changed (remembering that this is changed via javascript)? I've tried using the events: bind and on of jquery without success. Another settimeout alternative was to use a settimeout . For now I'm looking for a more elegant way out to solve this situation.
Has anyone been through something like that?
Answer:
This may be possible in the future. A new method that can solve this problem is planned, Object.observe() , 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 the object's properties. In your case it should be called with the update event.
But that doesn't exist yet and one of the polyfills that already exists doesn't work in this case ( http://jsfiddle.net/5ehaor1d/ ).
That leaves two possibilities. One of them has also occurred to you that it is to use setInterval or setTimeout .
The other one is kind of brute force, and it works if the external code uses jQuery. The idea is to change jQuery's .val() method to fire events when values change. I don't guarantee it won't screw up 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');
}