In AlloyUI (or YUI3 I suppose), how do I trigger a change event when checking a radio button using setAttribute?

Question

Changing the value of a radioButton using setAttribute('checked',true) changes the value of the radio button, but does not fire a change event.

This does not seem to be limited to YUI or AlloyUI (see for instance Detecting a change in radio button/checkbox state).

To work around that issue, I would like to programmatically fire a change event when I set the value of my radio button.

How can I do that in Alloy UI (I am using Liferay 6.1 GA2) ?

Thanks Alain

Some specifics:

the html:

<aui:input type="radio" label="${viewMenuItem.label}" value="${viewMenuItem.value}"
   id="${messageWallDisplay.newMessageOptionName}${viewMenuItem.value}"
   name="${messageWallDisplay.newMessageOptionName}" data="${viewMenuItem.dataMap}"
   checked="${viewMenuItem.value == messageWallDisplay.newMessageOptionDefaultValue}"/>

the event delegation setup (I also tried event callback on the radiobuttons):

  messageTypeRadioGroup.delegate('change', function (event){
     var option = event.currentTarget;
     if (option.get("checked")==true){
        showHideUserSelection(option);
     }
  }, 'input[type=radio]');

The setAttribute that doesn't trigger the change event:

MWC.newMessageDefaultOption.setAttribute('checked',true);

score 2 · Accepted Answer · edited May 23 '17 at 12:28

2

This answer here looks like what you're trying to accomplish: Javascript: simulate a click on a link

If MWC.newMessageDefaultOption is your radio node, you can just do something like this:

MWC.newMessageDefaultOption.simulate('change');

As noted in the comment Simulate is for testing purposes. For best practice:

var doThingsOnChangeFunc = function(arg1, arg2) {
    // do things!
}

myNode.on(
    'change',
    function(event) {
        var arg1 = event.currentTarget;
        var arg2 = "something";

        doThingsOnChange(arg1, arg2);
    }
);

Then later down when you are programmatically changing your radio button\checkbox:

myNode.setAttribute('checked', true);

doThingsOnChange(arg1, arg2);

edited May 23 '17 at 12:28

Community

1
1

answered Jun 06 '13 at 23:10

rp.

3,435
1
21
29

I could not get this to work, the change event would still not trigger. I wonder if this has to do with simulate being developed for testing purposes, and yahoo [warning against using it in user-facing code](http://yuilibrary.com/yui/docs/event/simulate.html#faking). – Alain Dresse Jun 07 '13 at 04:30
Interesting, I did not read close enough. But the best option would be to just call the method that is also handling your change event. See my updated answer. – rp. Jun 13 '13 at 17:25
That's actually what I ended up doing. Thanks ! – Alain Dresse Jun 13 '13 at 19:21

score 0 · Answer 2 · answered Jun 07 '13 at 04:33

0

I ended up refactoring the code, replacing MWC.newMessageDefaultOption variable by a callback: a function that selects the default radio button and performs the same followup actions as in the event handler.

answered Jun 07 '13 at 04:33

Alain Dresse

673
8
24

score 0 · Answer 3 · answered Jun 11 '13 at 08:33

0

Please try below code,

var allRadios = A.all( "input[type='radio']" );
        allRadios.on( 'change', function(e) {
            var portletNamespace='<portlet:namespace/>';
            var selectedRadioButtonValue = e.currentTarget.get('value');
            // add your custom code here
    });

Above code add change event to all radio button and when change event occurs it will execute code inside function.

Please let me know if you need anything more

answered Jun 11 '13 at 08:33

Pritesh Shah

857
1
7
8

Thanks Pritesh. I no longer have the initial code (since I refactored the whole thing) but will try your code. Will certainly come in handy at a later time. – Alain Dresse Jun 12 '13 at 10:42
I tried this code, and couldn't get it to work. The change of the checked status through code does not trigger the change event. – Alain Dresse Jun 13 '13 at 07:47

In AlloyUI (or YUI3 I suppose), how do I trigger a change event when checking a radio button using setAttribute?

3 Answers3