[Multiple Select] Making it work with On Change events

[Multiple Select] Making it work with On Change events

  
Forge Component
(14)
Published on 2014-05-02 by André Madeira
14 votes
Published on 2014-05-02 by André Madeira

I figured something out - thought I would share my approach and it could help others.

I went over the JavaScript numerous times until I found some good spots for code to go. JavaScript isn't my bread and butter, so forgive the roughshod nature of my fix.

I added this at the end of the close: function() {

            this.options.onClose(); <- after this
            if (this.hasChanges) {
                this.hasChanges = false;
                this.fireOnChange();
            }
        },

This at the end of update: function() {

            this.$el.val(this.getSelects()); <- after this
            this.hasChanges = true;

One new function/method:

fireOnChange: function() {
            if (this.$el && this.$el[0] && this.$el[0].onchange) {
                this.$el[0].onchange();
            }
        },

Basically, once the component is initialized, it keeps the original <select> in its $el member, and the onchange event that was assigned by OutSystems is still in there; it just never gets called.

update() gets called from clicks and select all/none and the like, so it seemed a good spot to determine whether there was anything changed.

close() gets called when you click outside the box, etc. so it seemed a good spot to check and clear that modification flag and run the original event if changes had been made.

Works pretty well, or seems to.

-- Ritchie

Thank you,but can you upload an example demo here ?