Skip to main content
Silly-V
Silly-V
Legend
September 26, 2015
Answered

Add event handler as/via prototype?

  • September 26, 2015
  • 1 reply
  • 1198 views

I would like to try and increase my javascript knowledge here.

So, here is what I have got so far, and I would like to make it better. I saw that if you click on the 1 pixel in the border of a dropdown list in CC ScriptUI, it will have the undesired effect of selecting "null", which crashed some of my scripts. Therefore I have made this "prototype" that selects the first item, should someone trigger the effect of selecting null by inadvertently clicking on the border of the dropdownlist.

DropDownList.prototype.selectWell = function(){

  //CC will let you select null

  this.addEventListener('change', function(){

    if(this.selection == null){

      this.selection = this.items[0];

    }

  });

}

The way it would work is like this:

var d = window.add("dropdownlist", undefined, ["Item 1","Item 2"]);

d.selectWell();

Okay, this works, but then you gotta write "d.selectWell();" after every dropdown.

Would it be possible to write such code that every new instance of a dropdownlist already comes with this event listener added?

In browser javascript, they have querySelector(element) to add one listener to every element of the desired kind. I am not sure there is such available in ScriptUI.

I suppose it would be possible to do mass listener assignments via recursive function, but would need to be repeated in windows where new dropdowns are added dynamically.
Also, I could make my own constructor, call it SuperDropDownList and in that constructor add all the necessary listeners and use it to add any dropdown that I want to have the custom functionality in.

However, if this could be done with a simple "DropDownList.prototype", I would like to learn how to do so!

This topic has been closed for replies.
Correct answer CarlosCanto

where's this 1px? I couldn't click on it...

here's one way to do it

DropDownList.prototype.onChange = function() {


    //CC will let you select null






    alert('on change ' + this.properties.name);


    if (this.selection == null) {


        this.selection = this.items[0];


    }






}






var w = new Window('dialog', '');


var d = w.add("dropdownlist", undefined, ["Item 1", "Item 2"], {name: 'one'});


var d2 = w.add("dropdownlist", undefined, ["Item 1", "Item 2"], {name: 'two'});


//d.selectWell();






w.show();

1 reply

CarlosCanto
Community Expert
CarlosCantoCommunity ExpertCorrect answer
Community Expert
September 26, 2015

where's this 1px? I couldn't click on it...

here's one way to do it

DropDownList.prototype.onChange = function() {


    //CC will let you select null






    alert('on change ' + this.properties.name);


    if (this.selection == null) {


        this.selection = this.items[0];


    }






}






var w = new Window('dialog', '');


var d = w.add("dropdownlist", undefined, ["Item 1", "Item 2"], {name: 'one'});


var d2 = w.add("dropdownlist", undefined, ["Item 1", "Item 2"], {name: 'two'});


//d.selectWell();






w.show();
    Silly-V
    Silly-VAuthor
    Legend
    September 27, 2015

    This looks like what I am looking for, exactly in fact. However, does adding this named prototype prevent from adding an "onChange" handler later on without overriding this one? And I'll totally experiment as soon as I get a moment, so I may answer my own question soon.

    Qwertyfly___
    Qwertyfly___
    Legend
    September 27, 2015

    adding an onChange later will override.

    but you can still add a change Event Listener.

    DropDownList.prototype.onChange = function() {  
    

        //CC will let you select null  
    

        alert('on change ' + this.properties.name);  
    

        if (this.selection == null) {  
    

            this.selection = this.items[0];  
    

        }  
    

    } 
    

        //CC will let you select null  
    

    

    

    var w = new Window('dialog', ''); 
    

    var d = w.add("dropdownlist", undefined, ["Item 1", "Item 2"], {name: 'one'});  
    

    var d2 = w.add("dropdownlist", undefined, ["Item 1", "Item 2"], {name: 'two'});  
    

    

    

    d2.addEventListener('change',function(){alert('2nd change');});
    

    

    

    //d.selectWell();  
    

      
    

      
    

    w.show();
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices