CreativePro Forum
Join our community of graphic designers, publishers, and production artists from around the world. Our members-only forum is a great place to discuss challenges and find solutions!
- You must be logged in to reply to this topic.Login
How to make a click radiobutton eventListener work?
- This topic has 11 replies, 3 voices, and was last updated 5 years, 11 months ago by
Jeremy Howard.
-
AuthorPosts
-
-
December 29, 2019 at 4:25 am #1220112
First of all, Merry Christmas and happy new year for all of you, mates!!!
Now, let’s go to work.
I have been programming a script with a GUI (thanks Joonas Pääkkö for your incredible ScriptUI Dialog Builder!). The script’s internal job is fully functional and does what I need, but GUI have a bug and I’m unable to fix it.
The palette have a radiobutton group with 3 options. The last one have associated a statictext and a textedit elements. I wish that both of them was enabled only when his radiobutton was enabled too, and I have tried onClick functions and addEventListener click type but nothing works. Well, yes, it works if I link the event listener to the whole radiogroup, not the last element. And the event is only triggered if I click THE GROUP GREY BACKGROUND, not the radiobuttons!!!! Amazing…
I paste here the part of code relevant (Insertador is the window object, palette type).#targetengine “session”;
var Insertador = new Window(“palette”, undefined);
Insertador.text = “Insertador V 1.5”;
Insertador.preferredSize.width = 230;
Insertador.preferredSize.height = 482;
Insertador.orientation = “column”;
Insertador.alignChildren = [“left”,”top”];
Insertador.spacing = 7;
Insertador.margins = 15;
var insercion_group = Insertador.add(“group”, undefined, {name: “insercion_group”});
insercion_group.orientation = “column”;
insercion_group.alignChildren = [“left”,”center”];
insercion_group.spacing = 10;
insercion_group.margins = 0;
insercion_group.alignment = [“left”,”top”];// more controls here, not relevant
var statictext_3 = insercion_group.add(“statictext”, undefined, undefined, {name: “statictext_3”});
statictext_3.text = “Posición:”;var selec_pos_radiogroup = insercion_group.add(“group”, undefined, {name: “selec_pos_radiogroup”});
selec_pos_radiogroup.preferredSize.width = 146;
selec_pos_radiogroup.orientation = “column”;
selec_pos_radiogroup.alignChildren = [“left”,”top”];
selec_pos_radiogroup.spacing = 4;
selec_pos_radiogroup.margins = [15,0,0,0];var principio_radiobutton = selec_pos_radiogroup.add(“radiobutton”, undefined, undefined, {name: “principio”});
principio_radiobutton.text = “Principio”;
principio_radiobutton.alignment = [“left”,”top”];var fin_radiobutton = selec_pos_radiogroup.add(“radiobutton”, undefined, undefined, {name: “fin”});
fin_radiobutton.text = “Final”;
fin_radiobutton.value = true;var custom_radiobutton = selec_pos_radiogroup.add(“radiobutton”, undefined, undefined, {name: “custom”});
custom_radiobutton.text = “Personalizado:”;var custom_pos_group = selec_pos_radiogroup.add(“group”, undefined, {name: “custom_pos_group”});
custom_pos_group.orientation = “row”;
custom_pos_group.alignChildren = [“right”,”center”];
custom_pos_group.spacing = 10;
custom_pos_group.margins = [20,0,0,0];
custom_pos_group.enabled = false;var statictext_4 = custom_pos_group.add(“statictext”, undefined, undefined, {name: “statictext_4”});
statictext_4.text = “(en caracteres)”;
statictext_4.justify = “right”;var custom_posic = custom_pos_group.add(‘edittext {justify: “center”, properties: {name: “custom_posic”}}’);
//custom_posic.enabled = false;
custom_posic.text = “2”;
custom_posic.preferredSize.width = 35;//thats the listener thats works… clicking grey background
selec_pos_radiogroup.addEventListener(“click”, function(ev) {
// activa o desactiva el textbox custom_posic
alert(“Event ” + ev.type );
custom_pos_group.enabled = custom_radiobutton.value;
}
);//thats the listener that must work… but doesn’t do. Placed here for info, only one of them in final code
custom_radiobutton.addEventListener(“click”, function(ev) {
// activa o desactiva el textbox custom_posic
alert(“Event ” + ev.type );
custom_pos_group.enabled = custom_radiobutton.value;
}
);custom_radiobutton.onClick = function(ev) {
// activa o desactiva el textbox custom_posic
alert(“Event ” + ev.type );
custom_pos_group.enabled = custom_radiobutton.value;
}Indeed, one not showed here checkbox manage the whole insercion_group (enabling or disabling it) via onClick function and works fine.
Any idea, mates? I have been looking in the web for 3 days yet, but I can find a solution. Doc fro event listeners is obscure and very limited (for me, I hope that someone know how it works).
Thanks you all in advance!
Greetings from Spain,
Jose -
December 29, 2019 at 7:05 am #14323369
Jeremy Howard
ParticipantHello Jose,
I’m on my mobile at the moment so I can’t test this but have you tried using “onChange”?
Something like: custom_radiobutton.onChange = function(){
//put actions here
}If this doesn’t solve your problem then I’ll take a closer look when I get back to my computer.
-
December 29, 2019 at 7:36 am #14323368
Hi Jeremy!
Thanks for your reply.I have tried right now this code:
custom_radiobutton.onChange = function() {
custom_pos_group.enabled = custom_radiobutton.value;
}but doesn’t work.
I’ll wait until you can get back to your computer.
I have seen a web where can read that you must use
#include ‘EventManager.jsinc’
instruction prior to use events, but i think it’s not needed, cause I can trigger events.
-
December 29, 2019 at 7:53 am #14323367
I have something trying this:
custom_radiobutton.addEventListener(“onChange”, function() {
custom_pos_group.enabled = custom_radiobutton.value;
}
);or this:
selec_pos_radiogroup.addEventListener(“onChange”, function() {
custom_pos_group.enabled = custom_radiobutton.value;
}
);I get the same result, both of them enable the group custom_pos_group, but doesn’t disabled it when i click another radiobutton.
Well, one step forward at last!
-
December 29, 2019 at 10:17 am #14323365
Well, now the palette works, not using 1 eventListener but 3 onClick’s:
principio_radiobutton.onClick = function() {
custom_pos_group.enabled = false;
}fin_radiobutton.onClick = function() {
custom_pos_group.enabled = false;
}custom_radiobutton.onClick = function() {
custom_pos_group.enabled = true;
}Now I think the chunk of code in the previous post (event onChange) doesn’t work at all.
But I wish to learn how to use eventListener properly, for this or others projects.
Any clue will be well received. -
December 29, 2019 at 6:10 pm #14323364
Jeremy Howard
ParticipantHey there,
I am back at my computer and I threw this script together as an example to show you how the “onClick” function can be used to accomplish what you are trying to accomplish.
Check this script out and let me know if you have any questions!
//————— BEGIN SCRIPT —————//
#targetengine ‘my_session’
var myDialog = new Window (‘palette’, “Show UI Elements With Radio Button Click”, undefined, {minimizeButton: true, independent: false, closeButton: true, borderless: true, name: “Data Query Panel”});
myDialog.preferredSize.width = 500;
myDialog.preferredSize.height = 100;
myDialog.alignChildren = [‘top’, ‘left’];
myDialog.margins[1] = 10;
myDialog.spacing = 10;//– Group for radio buttons –//
var radioButtonsGroup = myDialog.add(‘group {orientation: “column”, alignChildren: “left”, alignment: “left”}’)
var radio1 = radioButtonsGroup.add(‘radiobutton’, undefined, “Radio Button One”);
radio1.value = false;
var radio2 = radioButtonsGroup.add(‘radiobutton’, undefined, “Radio Button Two”);
radio2.value = false;
var radio3 = radioButtonsGroup.add(‘radiobutton’, undefined, “This Radio Button Shows More Stuff.”);
radio3.value = false;
//– End group for radio buttons –////– Everything within the “hiddenTextGroup” will be hidden when the panel is first drawn –//
var hiddenTextGroup = myDialog.add(‘group {orientation: “column”, alignChildren: “left”, alignment: “left”}’)
hiddenTextGroup.size = [0,0];
hiddenTextGroup.hide();var revealedText = hiddenTextGroup.add(‘statictext’, undefined, “Some static text”);
revealedText.preferredSize.width = 500;var myEditText = hiddenTextGroup.add(‘edittext’, undefined, undefined);
myEditText.preferredSize.width = 500;
//– End of “hiddenTextGroup” –////– A group for my buttons in the panel –//
var buttonGroup = myDialog.add(‘group’);
buttonGroup.alignment = [‘right’,’bottom’];
buttonGroup.margins[1] = 15;//– My Buttons
var cancelButton = buttonGroup.add(‘button’, undefined, “Close Panel”,{name: “Close Panel”});
var proceedButton = buttonGroup.add(‘button’, undefined, “Submit This Stuff”,{name: “proceedButton”});//– Event listener – activated with the radio button is clicked. –//
radio3.onClick = function(){
hiddenTextGroup.size = [500,100];
hiddenTextGroup.show();
myDialog.layout.layout (true);
}proceedButton.onClick = function() {
alert(“You clicked Proceed.”);
myDialog.close(1); //–close the dialog, return 1
}cancelButton.onClick = function() {
myDialog.close(2); //–close the dialog, return 2
}var dialogResult = myDialog.show();
if(dialogResult == 1){
//– Do some stuff because the proceed button was clicked
}else if (dialogResult== 2){
exit(0);
}//————— END SCRIPT —————//
-
December 30, 2019 at 1:58 pm #14323360
Third attempt to post… I have tried 2 times, in 2 computers, with 4 hours between it, no post…
-
December 30, 2019 at 2:09 pm #14323359
I have tried to post a reply on my post, in 2 different computers, with 6 hours of difference, and I cant. Sorry, i post it here…
Hey Jeremy.
Thats basically the way i finally do, with 3 onClick calls. A bit inelegant, in my opinion…
Indeed, they aren’t event LISTENERS but event CALLBACKS. I have been using that callbacks long time ago, no too much mistery there. But listeners…
I have read Antoine post, too. And yes, I used radiobutton group like trigger for my listener as a last resort. I tried first with the radiobutton itself. Did it work? Nope. I went up the hierarchy and tried again. Same result. Tried the whole group. It worked, but clicking grey background. Something triggered the event, at last. Useless, but working ;). So again on my way with callbacks.Thank you for your advices!
And Happy new year for indesignsecretes.com crew and members!
Best regards from Spain!!
-
December 30, 2019 at 2:10 pm #14323358
David BlatnerKeymasterSorry for the problems, Jose. I am not sure why your replies were caught for moderation. I hope it is fixed now.
-
December 30, 2019 at 2:15 pm #14323357
Thanks David, now all is working right!
Happy new year in advance!!
-
December 30, 2019 at 2:20 pm #14323356
Well, I must apologize if you see more than a post of mine talking the same stuff. It seems there’s a little problem.
Sorry, mates! -
January 12, 2020 at 6:22 pm #14323295
Basically your post is the solution I have used. Three onClick events. A bit inelegant for me, but… IT WORKS.
Indeed, that onClick() events aren’t event LISTENERS but event CALLBACKS. I have been using event callbacks long time ago, not a big mystery there. But event listeners… never. And I think our ways (listeners and me) will not cross in the future ;)I have read Antonie post too. And yes, I tried to link event and radiogroup cause I started linking the radiobutton but I could not trigger the event, so I went up the hierarchy until I triggered the event (clicking the grey background in the radiobutton group).
Thnaks for your help!
And Happy new year for all, crew and members of INDESIGNSECRETS.COM !!
Best regards from Spain,
Jose
-
-
AuthorPosts
- You must be logged in to reply to this topic.
