YUI modifying and detecting changes of a

Question

I want to see an alert message when the value of a div changes. This value is being modified by modify_div. When I click the button this function modifies the div, but the alert "value changed" is not displayed. Am I missing something?

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"          "      http://www.w3.org/TR/html4/strict.dtd">

  <html>
  <head>
  <script src="http://yui.yahooapis.com/3.5.1/build/yui/yui-min.js"></script>
   <script>


 YUI().use('node', function (Y) {

 var demo = Y.one('#test');
 demo.on('click', function (e) {
    //alert('You clicked me');
});
});

 YUI().use('node','event', function (Y) {

var demo = Y.one('#variable-name');
demo.on('change', function (e) {
    alert('Value changed');
});
});



</script>

<script type="text/javascript">

function modify_div()
{
//var thevar = "This is a test";
var thevar = 7;


document.getElementById('variable-name').innerHTML = thevar;
}
</script>

</head>


<body>


<!-- Click me button -->
<input type="button" id="test" value="Click me" enabled="true" onclick="modify_div();">        </input>


</br>


<div id="variable-name" style="display:inline;">01010101</div>



</body>

</html>

score 1 · Answer 1 · edited May 23 '17 at 11:43

based on http://www.quirksmode.org/dom/events/change.html,

change event only fires if its form field

e.g. input textarea and select

so change event will not fire when contents of div is changed.

It will work if you replace div with input and update its value.

other option is to manually fire event where ever you are changing the value your variable

http://tech.groups.yahoo.com/group/ydn-javascript/message/13216

following SO question has answers but it requires jQuery
Detect element content changes with jQuery

score 1 · Answer 2 · answered Jul 05 '12 at 15:43

The correct answer was given by @N30: there is no change event for divs. He provides good alternatives but no YUI specific information, so I'd like to extend his answer with an example of a YUI Plugin.

Like he explained, the basic idea is to keep a value in JavaScript memory and fire an event when you change that value. You can do this by extending Y.EventTarget which provides you with custom events:

YUI().use('node', 'plugin', function (Y) {
    function NodeValuePlugin(config) {
        // Boilerplate
        NodeValuePlugin.superclass.constructor.apply(this);

        // config.host is the Y.Node instance
        this._node = config.host;
        // we keep the value in a private property
        this._value = this._node.get('text');

        // we publish a 'change' event and set a default
        // function to run when the event is fired
        // This function will change the private property
        // and update the DOM
        // This means you can call e.preventDefault() and
        // stop the default behavior (the change of value)
        this.publish('change', {
            emitFacade: true,
            defaultFn: this._defValueChangeFn
        });
    }
    Y.extend(NodeValuePlugin, Y.EventTarget, {
        set: function (newVal) {
            // we want to do stuff only when the value changes
            if (newVal != this._value) {
                // instead of changing the DOM here,
                // we fire an event and let the event
                // do the work
                // We pass it the new and old values
                this.fire('change', {
                    newVal: newVal,
                    prevVal: this._value
                });
            }
            // make this method chainable
            return this;
        },
        get: function () {
            return this._value;
        },
        _defValueChangeFn: function (e) {
            // sync everything
            this._value = e.newVal;
            this._node.set('text', e.newVal);
        },
        // this is necessary boilerplate for plugins
        destroy: function () {}
    }, {
        // we can access the plugin from node[namespace]
        // in this case, node.value
        NS: 'value'
    });

    var node = Y.one('#test').plug(NodeValuePlugin);
    node.value.on('change', function (e) {
        console.log('Here\'s the old value: ' + e.prevVal);
        console.log('Here\'s the new value: ' + e.newVal);
    });
    // Freebie:
    // since we're using node.set('text', foo)
    // this prevents XSS vulnerabilities
    node.value.set('<a href="#">qwer</a>');

});

You can learn more about plugins from the Plugin User Guide in the YUI website.

YUI modifying and detecting changes of a

2 Answers2

Linked