Skip to main content
DBarranca
DBarranca
Legend
July 29, 2013
Answered

Dispatch UIEvent

  • July 29, 2013
  • 1 reply
  • 1300 views

Hello,

could you please help me understanding why .dispatchEvent() used to call a radioButton 'click' callback works, while it fails when it's applied to a checkbox?

Here's an example:

var win = new Window ("dialog");
win.alignChildren = "left";
var panel = win.add ("panel");
panel.alignChildren = "left";
var rb1 = panel.add ("radiobutton", undefined, "First RB"); 
var rb2 = panel.add ("radiobutton", undefined, "Second RB"); 
var rb3 = panel.add ("radiobutton", undefined, "Third RB"); 
rb1.value = true;
panel.addEventListener ('click', function(event) {
    for (var i = 0; i < panel.children.length; i++) {
        if (panel.children.value == true) {
            alert(panel.children.text);
            return;
         }
     }
});
var cb1 = win.add("checkBox", undefined, 'First CheckBox');
cb1.onClick = function() { alert("Clicked: " + this.value); }
var okButton = win.add ("button", undefined, "OK");
okButton.onClick = function() { panel.dispatchEvent( new UIEvent ('click') ); } // Works as expected
// okButton.onClick = function() { cb1.dispatchEvent( new UIEvent ('click') ); } // Doesn't work at all
win.show();

I can't figure out the why.

Oh, by the way, if you try the above on ESTK (CC) the alert for the radiobuttons is "wrong" - that is, being selected the rb1, if you click on (say) rb3, the alert says "First RB".

Conversely, if you run this on Photoshop (CC), the alert goes "Third RB".

It seems like the 'click' is catched by the panel callback before it gets to the radiobutton (ESTK) or after (PS). Another nice example of consistency 😉

Thanks!

Davide Barranca

www.davidebarranca.com

This topic has been closed for replies.
Correct answer DBarranca

I wasn't sure what you were trying to do. Yes I normally use either notify() or call the function depending on what I want to do. As I said I haven't needed to use dispatchEvent(). Perhaps dispatchEvent() can only be used with addEventListener handler functions.

My guess is the onClick is not a eventListener handler function  so the control doesn't have a 'click' eventhandler per se. If you run the code below you will see that the cb1.onClick doesn't get passed the event as it would with a normal eventListener function.

Again, just guesses.

win.alignChildren = "left";
var panel = win.add ("panel");
panel.alignChildren = "left";
var rb1 = panel.add ("radiobutton", undefined, "First RB"); 
var rb2 = panel.add ("radiobutton", undefined, "Second RB"); 
var rb3 = panel.add ("radiobutton", undefined, "Third RB"); 
rb1.value = true;
panel.addEventListener ('click', function(event) {// note event is an event object
    alert(event);
    for (var i = 0; i < panel.children.length; i++) {
        if (panel.children.value == true) {
            alert(panel.children.text);
            return;
         }
     }
});
var cb1 = win.add("checkBox", undefined, 'First CheckBox');
cb1.onClick = function(event) { alert(event);alert("Clicked: " + this.value); }// note event is undefined
var okButton = win.add ("button", undefined, "OK");
okButton.onClick = function() { panel.dispatchEvent( new UIEvent ('click') ); } // Works as expected
//okButton.onClick = function() { cb1.dispatchEvent( new UIEvent ('click') ); } // Doesn't work at all
win.show();


Your comment made me try this one:

var win = new Window ("dialog");
win.alignChildren = "left";
var panel = win.add ("panel");
panel.alignChildren = "left";
var rb1 = panel.add ("radiobutton", undefined, "First RB"); 
var rb2 = panel.add ("radiobutton", undefined, "Second RB"); 
var rb3 = panel.add ("radiobutton", undefined, "Third RB"); 
rb1.value = true;
panel.addEventListener ('click', function(event) {
    for (var i = 0; i < panel.children.length; i++) {
        if (panel.children.value == true) {
            alert(panel.children.text);
            return;
         }
     }
});
var cb1 = win.add("checkBox", undefined, 'First CheckBox');
var cb2 = win.add("checkBox", undefined, 'Second CheckBox');
cb1.onClick = function() { alert("Clicked: " + this.value); }
cb2.addEventListener ('click', function(event) { alert("Clicked: " + event.target.value)})
var okButton = win.add ("button", undefined, "OK");
okButton.onClick = function() { cb2.dispatchEvent(new UIEvent ('click')); } // Works fine
win.show();

This time, using addEventListener() on a second checkbox, I'm able to dispatchEvent() correctly. Apparently, as you suggested, ScriptUI has a special way to deal with onClick() etc!

EDIT: I've collected call(), notify() and dispatchEvent() examples in a blogpost here.

Davide

1 reply

M
Michael_L_Hale
Inspiring
July 29, 2013

Not sure as I don't normally use eventListeners on panels.

But if you just want to simulate the cb1 onClick() event you can  do this

okButton.onClick = function() { cb1.notify(); }

DBarranca
DBarrancaAuthor
Legend
July 29, 2013

Hi Mike,

there's a slight difference between .notify() and dispatch as far as I can tell:

okButton.onClick = function() { cb1.notify(); }

will actually toggle the checkbox status (i.e. if it's unchecked, it becomes checked), while dispatch should just simulate the event and trigger the callback.

I could just:

okButton.onClick = function() { cb1.onClick(); }

but I can't understand why the dispatchEvent() doesn't work - I may be doing something wrong here.

Davide

M
Michael_L_Hale
Inspiring
July 29, 2013

I wasn't sure what you were trying to do. Yes I normally use either notify() or call the function depending on what I want to do. As I said I haven't needed to use dispatchEvent(). Perhaps dispatchEvent() can only be used with addEventListener handler functions.

My guess is the onClick is not a eventListener handler function  so the control doesn't have a 'click' eventhandler per se. If you run the code below you will see that the cb1.onClick doesn't get passed the event as it would with a normal eventListener function.

Again, just guesses.

win.alignChildren = "left";
var panel = win.add ("panel");
panel.alignChildren = "left";
var rb1 = panel.add ("radiobutton", undefined, "First RB"); 
var rb2 = panel.add ("radiobutton", undefined, "Second RB"); 
var rb3 = panel.add ("radiobutton", undefined, "Third RB"); 
rb1.value = true;
panel.addEventListener ('click', function(event) {// note event is an event object
    alert(event);
    for (var i = 0; i < panel.children.length; i++) {
        if (panel.children.value == true) {
            alert(panel.children.text);
            return;
         }
     }
});
var cb1 = win.add("checkBox", undefined, 'First CheckBox');
cb1.onClick = function(event) { alert(event);alert("Clicked: " + this.value); }// note event is undefined
var okButton = win.add ("button", undefined, "OK");
okButton.onClick = function() { panel.dispatchEvent( new UIEvent ('click') ); } // Works as expected
//okButton.onClick = function() { cb1.dispatchEvent( new UIEvent ('click') ); } // Doesn't work at all
win.show();

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices