Develop Reference

mxgraph infinite loops on apply

I am extending mxgraph delete control example to add delete like controls to nodes which are generated dynamically in my graph. The source code for the example is available here
The problem is in this part of the code -
// Overridden to add an additional control to the state at creation time
mxCellRendererCreateControl = mxCellRenderer.prototype.createControl;
mxCellRenderer.prototype.createControl = function(state)
{
mxCellRendererCreateControl.apply(this, arguments);
var graph = state.view.graph;
if (graph.getModel().isVertex(state.cell))
{
if (state.deleteControl == null)
mxCellRendererCreateControl.apply inside the overridden call back of createControl seems to work as intended (calls the original function before creating additional controls) with the initial state of the graph on load. But, once I add nodes dynamically to the graph and the callback is invoked by mxgraph's validate/redraw, the control goes into an infinite loop, where 'apply' function basically keeps calling itself (i.e, the callback).
I am a bit clueless because when I debug, the context(this) looks fine, but I can't figure out why instead of invoking the prototype method, it just keeps invoking the overridden function in a loop. What am I doing wrong?

It looks like you are not cloning your original function the right way, please try the following :
Function.prototype.clone = function() {
var that = this;
return function theClone() {
return that.apply(this, arguments);
};
};
Add that new method somewhere in your main code so it will available in the whole application, now you can change your code to :
// Overridden to add an additional control to the state at creation time
let mxCellRendererCreateControl = mxCellRenderer.prototype.createControl.clone();
mxCellRenderer.prototype.createControl = function(state) {
mxCellRendererCreateControl(state);
var graph = state.view.graph;
if (graph.getModel().isVertex(state.cell)) {
if (state.deleteControl == null) {
// ...
}
}
// ...
};
This should work if I understood your problem correctly, if it does not, please change the old function call back to the apply. Otherwise let me know if something different happened after the Function prototype change.

It seems that your overriding code is being called multiple times (adding a simple console.log before your overriding code should be enough to test this)
Try to ensure that the code that overrides the function only gets called once, or validate whether the prototype function is the original or yours.
Here is an example of how you can check if the function is yours or not
if (!mxCellRenderer.prototype.createControl.isOverridenByMe) {
let mxCellRendererCreateControl = mxCellRenderer.prototype.createControl;
mxCellRenderer.prototype.createControl = function(state) { /* ... */ };
mxCellRenderer.prototype.createControl.isOverridenByMe = true;
}
There are other ways, like using a global variable to check if you have overriden the method or not.
If this doesn't fix your issue, please post more about the rest of your code (how is this code being loaded/called would help a lot)

ExtJS: How to call original method from an override?

How do I call the original method from an override method?
I have a combobox from which I am removing one of the values from its store to prevent users from selecting it due to the fact that we are no longer supporting that value in that value. I still want that value to be displayed properly if the combobox receives it, because technically, it's not an invalid value; it's just no longer supported. In order to achieve my goal, I want to override the getDisplayValue() method such that, if the combo box receives the value that is no longer in the store, I want the override method to return the correct string, but if it receives any other value, I want the original method to handle it, like so:
myCombobox = Ext.create("Ext.form.field.ComboBox",
{
// <snip><snip>
getDisplayValue: function()
{
if (this.value == 'removedValue')
{
return 'Correct Text';
}
else
{
// What do I do here to call original getDisplayValue() and return its returned value?
}
}
});
Update
Someone posted an answer which said to use this.callParent(arguments); but then they deleted the answer after I left a comment saying that that didn't work. I got the override function to do what I want it to do in the else case by putting in the source code from the overridden function (which I got from Sencha's web site), but I'd rather use a solution that involves somehow actually calling that function instead if that's possible, as its source code could change in a later ExtJS update (e.g., for a bug fix), while mine would remain static.
(Note that I changed the code slightly to look at the value instead of the rawValue, since the latter isn't necessarily defined at the time of the getDisplayValue() call.)

Even though the question is answered, here is another better way to solve your problem. This is how ExtJS calls it parent method in some of its internal classes.
Ext.create("Ext.form.field.ComboBox", {
getDisplayValue: function() {
if (this.rawValue == 'removedValue') {
// your logic
return;
}
return Ext.form.field.ComboBox.prototype.getDisplayValue.call(this);
}
});

If you use Ext.define, in 4.1 it was callOverridden, and since 4.2 it is callParent.
If you use Ext.create to create a combobox, callParent does not bring you to the combobox's function, but to the function of the base class (triggerfield?), which is not what you want.
What I have used successfully once is something like this:
Ext.create('MyCombo',{
initComponent:function() {
var me = this;
me.callParent(arguments);
var oldFn = me.getDisplayValue;
me.getDisplayValue = function() {
if (this.rawValue == 'removedValue') {
return 'Correct Text';
} else {
oldFn.apply(this, arguments); // What do I do here to call original getDisplayValue() and return its returned value?
}
};
}
});
But it is far cleaner if you use Ext.define to derive your special combobox from the default one and then use callParent.

How to robustly detect checkbox value changes in javascript

I'd like to know how to detect changes to an html checkbox input, even when its changed programatically like this:
checkboxDomNode.checked = true
The browser obviously knows it changed since it gets a visual checkmark, and also any :checked css pseudo class gets triggered. I'm actually trying to emulate the :checked css pseudo class in javascript, which is why i'm trying to find a robust way to do this.
I've tested the "change" event, and it is not triggered on programatic changes like the above. It also looks like MutationObserver doesn't support changes made to that property.

A small extension to the answer of Alan Darmasaputra: Instead of performing two tasks on each change you can use a simple object wrapper for your checkbox, with a getter and a setter for your property:
var checkboxObject = {
node: document.querySelector('input[type=checkbox]'), // or whatever query you wish to perform
get checked() {
return this.node.checked;
},
set checked(value) {
var oldValue = this.node.checked;
this.node.checked = !!value;
if(oldValue !== !!value) {
this.node.dispatchEvent(new Event("change"));
}
}
};
checkboxObject.node.addEventListener('change',function(event){
//do something
});
// calls checkboxObject[get checked]
var state = checkboxObject.checked;
// calls checkboxObject[set checked] with argument 'false'
checkboxObject.checked = false;
As you can see, this requires some initial configuration, but then you can both programmatically change the checked state, and dispatch the event in one assignment.
More info: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/set
Working fiddle:
var checkboxObject = {
node: document.querySelector('input[type=checkbox]'), // or whatever query you wish to perform
get checked() {
return this.node.checked;
},
set checked(value) {
var oldValue = this.node.checked;
this.node.checked = !!value;
if(oldValue !== !!value) {
this.node.dispatchEvent(new Event("change"));
}
}
};
document.getElementById('check').addEventListener('click', function() {
checkboxObject.checked = true;
});
document.getElementById('uncheck').addEventListener('click', function() {
checkboxObject.checked = false;
});
checkboxObject.node.addEventListener('change',function(event){
document.getElementById('log').innerText += 'checkbox value changed! New value: ' + event.target.checked + '\n';
});
// Why implementing this directly on the checkbox element is not a good idea:
console.log( Object.getOwnPropertyDescriptor( Object.getPrototypeOf(checkboxObject.node), 'checked' ));
<button id="check">check</button>
<button id="uncheck">uncheck</button>
<input type="checkbox">
<div id="log" style="white-space: pre-line"></div>
**EDIT: **
Implementing this behaviour directly on the checkbox element is not a good idea. With Object.getOwnPropertyDescriptor we can check the type of a property ( an accessor descriptor, or a data descriptor ). If we do that for the checked property o the prototype of checkboxObject.node, as follows:
console.log( Object.getOwnPropertyDescriptor( Object.getPrototypeOf(checkboxObject.node), 'checked' ));
the output will be:
{
"get": function () { [native code] },
"set": function () { [native code] },
"enumerable": true,
"configurable": true
}
This means that the element already has a getter and setter defined for the property checked, in its prototype that is. It IS possible to implement logic where you Object.getPrototypeOf() your checkbox, and call the setter on it explicitly to invoke the native behaviour, but that would make things quite hard to understand real soon, especially because you'd have to bind the context to be your checkbox element for that call. I'll leave it up to you to make a decision about that.
Also keep in mind that an existing (prototype) descriptor might be non-writable (in this case it's not, otherwise it would be in the output above), which means that a normal property assignment for overriding this will fail. In that case you'd have to Object.defineProperty() directly on your checkbox element, to ensure you're not actually trying to override the immutable prototype setters / getters.

Why don't you try two way binding using any javaScript frameworks like AngularJS or KnockoutJS. You are also welcome to do it with pure javaScript.
Have a look in this article,
http://www.lucaongaro.eu/blog/2012/12/02/easy-two-way-data-binding-in-javascript/
Simple Example with AngularJS
HTML :
<div ng-controller="checkCtrl">
Check It : <input type="checkbox" id="chkbox" ng-model="checked" />
<p ng-model="checked">{{checked}}</p>
</div>
AngularJS :
var testApp = angular.module("testApp", []);
testApp.controller("checkCtrl", function($scope){
$scope.checked = true;
});
jsFiddle

Properties that are programatically modified doesn't fire Events. You could instead try adding onchange listener
checkboxDomNode.addEventListener('change',function(event){
//do something
})
and then after modifying your property, fire the event
checkboxDomNode.dispatchEvent(new Event("change"))
Tested on Chrome 53

Trigger action on programmatic change to an input value

My objective is to observe an input value and trigger a handler when its value gets changed programmatically. I only need it for modern browsers.
I have tried many combinations using defineProperty and this is my latest iteration:
var myInput=document.getElementById("myInput");
Object.defineProperty(myInput,"value",{
get:function(){
return this.getAttribute("value");
},
set:function(val){
console.log("set");
// handle value change here
this.setAttribute("value",val);
}
});
myInput.value="new value"; // should trigger console.log and handler
This seems to do what I expect, but it feels like a hack as I am overriding the existing value property and playing with the dual status of value (attribute and property). It also breaks the change event that doesn't seem to like the modified property.
My other attempts:
a setTimeout/setInterval loop, but this is not clean either
various watch and observe polyfills, but they break for an input value property
What would be a proper way to achieve the same result?
Live demo: http://jsfiddle.net/L7Emx/4/
[Edit] To clarify: My code is watching an input element where other applications can push updates (as a result of ajax calls for example, or as a result of changes in other fields). I have no control on how the other applications push updates, I am just an observer.
[Edit 2] To clarify what I mean by "modern browser", I'd be very happy with a solution that works on IE 11 and Chrome 30.
[Update] Updated demo based on the accepted answer: http://jsfiddle.net/L7Emx/10/
The trick suggested by #mohit-jain is to add a second input for user interaction.

if the only problem with your solution is breaking of change event on value set. thn you can fire that event manually on set. (But this wont monitor set in case a user makes a change to the input via browser -- see edit bellow)
<html>
<body>
<input type='hidden' id='myInput' />
<input type='text' id='myInputVisible' />
<input type='button' value='Test' onclick='return testSet();'/>
<script>
//hidden input which your API will be changing
var myInput=document.getElementById("myInput");
//visible input for the users
var myInputVisible=document.getElementById("myInputVisible");
//property mutation for hidden input
Object.defineProperty(myInput,"value",{
get:function(){
return this.getAttribute("value");
},
set:function(val){
console.log("set");
//update value of myInputVisible on myInput set
myInputVisible.value = val;
// handle value change here
this.setAttribute("value",val);
//fire the event
if ("createEvent" in document) { // Modern browsers
var evt = document.createEvent("HTMLEvents");
evt.initEvent("change", true, false);
myInput.dispatchEvent(evt);
}
else { // IE 8 and below
var evt = document.createEventObject();
myInput.fireEvent("onchange", evt);
}
}
});
//listen for visible input changes and update hidden
myInputVisible.onchange = function(e){
myInput.value = myInputVisible.value;
};
//this is whatever custom event handler you wish to use
//it will catch both the programmatic changes (done on myInput directly)
//and user's changes (done on myInputVisible)
myInput.onchange = function(e){
console.log(myInput.value);
};
//test method to demonstrate programmatic changes
function testSet(){
myInput.value=Math.floor((Math.random()*100000)+1);
}
</script>
</body>
</html>
more on firing events manually
EDIT:
The problem with manual event firing and the mutator approach is that the value property won't change when user changes the field value from browser. the work around is to use two fields. one hidden with which we can have programmatic interaction. Another is visible with which user can interact. After this consideration approach is simple enough.
mutate value property on hidden input-field to observe the changes and fire manual onchange event. on set value change the value of visible field to give user feedback.
on visible field value change update the value of hidden for observer.

The following works everywhere I've tried it, including IE11 (even down to IE9 emulation mode).
It takes your defineProperty idea a bit further by finding the object in the input element prototype chain that defines the .value setter and modifying this setter to trigger an event (I've called it modified in the example), while still keeping the old behavior.
When you run the snippet below, you can type / paste / whatnot in the text input box, or you can click the button that appends " more" to the input element's .value. In either case, the <span>'s content is synchronously updated.
The only thing that's not handled here is an update caused by setting the attribute. You could handle that with a MutationObserver if you want, but note that there's not a one-to-one relationship between .value and the value attribute (the latter is just the default value for the former).
// make all input elements trigger an event when programmatically setting .value
monkeyPatchAllTheThings();
var input = document.querySelector("input");
var span = document.querySelector("span");
function updateSpan() {
span.textContent = input.value;
}
// handle user-initiated changes to the value
input.addEventListener("input", updateSpan);
// handle programmatic changes to the value
input.addEventListener("modified", updateSpan);
// handle initial content
updateSpan();
document.querySelector("button").addEventListener("click", function () {
input.value += " more";
});
function monkeyPatchAllTheThings() {
// create an input element
var inp = document.createElement("input");
// walk up its prototype chain until we find the object on which .value is defined
var valuePropObj = Object.getPrototypeOf(inp);
var descriptor;
while (valuePropObj && !descriptor) {
descriptor = Object.getOwnPropertyDescriptor(valuePropObj, "value");
if (!descriptor)
valuePropObj = Object.getPrototypeOf(valuePropObj);
}
if (!descriptor) {
console.log("couldn't find .value anywhere in the prototype chain :(");
} else {
console.log(".value descriptor found on", "" + valuePropObj);
}
// remember the original .value setter ...
var oldSetter = descriptor.set;
// ... and replace it with a new one that a) calls the original,
// and b) triggers a custom event
descriptor.set = function () {
oldSetter.apply(this, arguments);
// for simplicity I'm using the old IE-compatible way of creating events
var evt = document.createEvent("Event");
evt.initEvent("modified", true, true);
this.dispatchEvent(evt);
};
// re-apply the modified descriptor
Object.defineProperty(valuePropObj, "value", descriptor);
}
<input><br><br>
The input contains "<span></span>"<br><br>
<button>update input programmatically</button>

I only need it for modern browsers.
How modern would you like to go? Ecma Script 7 (6 will be made final in December) might contain Object.observe. This would allow you to create native observables. And yes, you can run it! How?
To experiment with this feature, you need to enable the Enable
Experimental JavaScript flag in Chrome Canary and restart the browser.
The flag can be found under 'about:flags’
More info: read this.
So yeah, this is highly experimental and not ready in the current set of browsers. Also, it's still not fully ready and not 100% if it's coming to ES7, and the final date for ES7 isn't even set yet. Still, I wanted to let you know for future use.

Since you are already using polyfills for watch/observe, etc, let me take the opportunity to suggest to you Angularjs.
It offers exactly this functionality in the form of it's ng-models. You can put watchers on the model's value, and when it changes, you can then call other functions.
Here is a very simple, but working solution to what you want:
http://jsfiddle.net/RedDevil/jv8pK/
Basically, make a text input and bind it to a model:
<input type="text" data-ng-model="variable">
then put a watcher on the angularjs model on this input in the controller.
$scope.$watch(function() {
return $scope.variable
}, function(newVal, oldVal) {
if(newVal !== null) {
window.alert('programmatically changed');
}
});

There is a way to do this.
There is no DOM event for this, however there is a javascript event that triggers on an object property change.
document.form1.textfield.watch("value", function(object, oldval, newval){})
^ Object watched ^ ^ ^
|_ property watched | |
|________|____ old and new value
In the callback you can do whatever.
In this example, we can see this effect (Check the jsFiddle) :
var obj = { prop: 123 };
obj.watch('prop', function(propertyName, oldValue, newValue){
console.log('Old value is '+oldValue); // 123
console.log('New value is '+newValue); // 456
});
obj.prop = 456;
When obj change, it activates the watch listener.
You have more information in this link : http://james.padolsey.com/javascript/monitoring-dom-properties/

I wrote the following Gist a little while ago, which allows to listen for custom events cross browser (including IE8+).
Have a look at how I'm listening for onpropertychange on IE8.
util.listenToCustomEvents = function (event_name, callback) {
if (document.addEventListener) {
document.addEventListener(event_name, callback, false);
} else {
document.documentElement.attachEvent('onpropertychange', function (e) {
if(e.propertyName == event_name) {
callback();
}
}
};
I'm not sure the IE8 solution works cross browser, but you could set a fake eventlistener on the property value of your input and run a callback once the value of value changes triggered by onpropertychange.

This is an old question, but with the newish JS Proxy object, triggering an event on a value change is pretty easy:
let proxyInput = new Proxy(input, {
set(obj, prop, value) {
obj[prop] = value;
if(prop === 'value'){
let event = new InputEvent('input', {data: value})
obj.dispatchEvent(event);
}
return true;
}
})
input.addEventListener('input', $event => {
output.value = `Input changed, new value: ${$event.data}`;
});
proxyInput.value = 'thing'
window.setTimeout(() => proxyInput.value = 'another thing', 1500);
<input id="input">
<output id="output">
This creates a JS proxy object based on the original input DOM object. You can interact with the proxy object in the same way you'd interact with the origin DOM object. The difference is that we've overridden the setter. When the 'value' prop is changed, we carry out the normal, expected operation, obj[prop] = value, but then if the prop's value is 'value' we fire a custom InputEvent.
Note that you can fire whatever kind of event you'd like with new CustomEvent or new Event. "change" might be more appropriate.
Read more on proxies and custom events here:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy
https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events
Caniuse:
https://caniuse.com/#search=proxy

Revert an invalid value in knockout without subscriptions firing

Is it possible to revert a value change to a view model with something other than a custom binding handler (maybe an extender) without the subscriptions firing?
For example, say you have a numeric field that only allows values up to 100. If someone types 101, we want the value to drop back to the previous value and most importantly not fire any subscriptions on the reverted value.
I'm trying to find a generic way of accomplishing this without having to write a custom binding handler that inherently would require duplication of core knockout code to handle text fields, select fields, etc.

Yes, it can be done with an extender, like this:
ko.extenders.numeric = function(target, properties) {
var result = ko.computed({
read: target,
write: function(newValue) {
var current = target();
var valueToWrite = newValue;
if(properties) {
if(properties.maxNum && properties.maxNum < newValue) {
valueToWrite = current;
}
if(properties.minNum && properties.minNum > newValue) {
valueToWrite = current;
}
}
if(valueToWrite !== current) {
target(valueToWrite);
} else {
target.notifySubscribers(valueToWrite);
}
}
});
result(target());
return result;
};
And this is how you use it:
self.number = ko.observable().extend({numeric: { minNum: 50, maxNum: 100} });
You can test that in the fiddle I've created.
You can comment the target.notifySubscribers(valueToWrite) line but what will happen is that if you change that value from outside (like in an input element), the value will not be updated back to the previous one.

I went down the same route that #Jalayn had suggested already, and ended up doing something similar to the issue listed in the comments on his answer. I'm still not a huge fan of this as it requires you to check at the top of the subscription to see if the value has actually changed, but at least it is possible.
The full solution and QUnit tests are posted here: https://github.com/gotdibbs/ko.extenders.filteredUpdate/.
The key components to making this work are an extender to "protect" the view model from unwanted changes using a computed observable, and a custom function extending subscribables to work in place off a normal subscription which would fire on every change regardless of if the value is actually changing.