Click event on radio button trigger twice

[lcollong]

Hi there,

On a form, if I set an element as a radio-button and add a JS event "on Click" to this element with a "console.log('ok');" code, I have the following behavior :
if you click exactly on the radio-button itself, it triggers only once for each click.
if you click on the label itself, it change the value of the button as well but triggers the event twice.

In my case, it is pretty disturbing as my code triggers an alert popup to the user. As my setup use the "button group" bootstrap arrangement, each time the user clicks on whatever value, he shows the alert popup twice...

This behavior seems to be pretty new. I did the test on a 3 month old (not updated) site and I get only one event per click whatever is the setup.

Is this normal ? If so, how could I show the alert only once ?

Thanks

 

[cheesegrits]

What site template are you using?

Unfortunately, Bootstrap radio groups don't automagically handle event delegation. J! has some magic JS that handles it on the backend, and in the example BS v2 template (Protostar), but every 3rd party BS template handles it (or doesn't handle it) in different ways, for BS v2, v3 and now v4. So it's really hard to code for, as it's not one of those things where we can just check to see if / what version of Bootstrap is present, or put in layouts. So our code is kinda of a compromise, to make sure the event gets fired.

-- hugh

 

[lcollong]

Ok for compromising.... but this happen also on none grouped radio button ("classical" radio-buttons). Do you confirm that something has changed in Fabrik or Joomla recently ? Because on the 3 month old site which is a test site cloned from the current prod one (same template), the event is only fired once. This working site is the one visible on "FORM" in "mySites".

Our site template is "yoo_avenue", a February 2014 theme of the YOOtheme club based on YOOtheme's Warp theme framework. It is uptodate.

If no direct solution, would you have any advice to catch the double event and avoid to fired it the second time ? I think about set a cookie the first time, check if set and don't do it, reset the cookie on next click what ever element it is except this one... maybe there is a simpler way to do it ?

 

[cheesegrits]

Can you point me at the page? I had some issues with Yootheme recently, was talking to their devs, can't remember what the upshot was.

-- hugh

 

[lcollong]

It's a production site. But I have setup a test drive on the "PS" mySites.
Front-end --> menu "test" --> add a new row --> last element named "radio-buttons".
If you click exactly on the circle it shows up the alert message only once. If you click on the label, it shows up twice.
It's not yoo_avenue but it's a warp based theme.

 

[cheesegrits]

Ah, I think I see the problem. A change I made in November. I'll work on it.

-- hugh

 

[cheesegrits]

OK, try this:

https://github.com/Fabrik/fabrik/commit/1cbe3de75a397b230cdcff1da26bce036186bcdc

I think another change I made, adding a 'for' attribute to labels in our grid helper layout, made it redundant.

-- hugh

 

[lcollong]

Well done !
Works perfectly for both "classical" and BS group button. Thanks.

 

[cheesegrits]

Yeah, I'd added the label "for" attribute for Aria use (so screen readers know what control the label is for), and forgot that it also causes events on the label to propagate to the input control as well. So after adding that, the change I'd made before that to delegate both the label and the input became redundant (and duplicated the events).

-- hugh