1. Fabrik 3.8.1 has been released. It is mostly bug fixes and feature enhancements, but does include two new plugins (push notifications, and the sequence element). As usual we strongly recommend testing the new release on a sandbox if your application is mission critical, and always do an Akeeba backup before updating.
    Dismiss Notice

Click event on radio button trigger twice

Discussion in 'Professional Support' started by lcollong, Apr 15, 2018.

  1. lcollong

    lcollong FabriKant d'applications web

    Level: Community
    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
     
    Last edited: Apr 15, 2018
  2. cheesegrits

    cheesegrits Support Gopher Staff Member

    Level: Community
    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
     
  3. lcollong

    lcollong FabriKant d'applications web

    Level: Community
    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 ?
     
  4. cheesegrits

    cheesegrits Support Gopher Staff Member

    Level: Community
    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
     
  5. lcollong

    lcollong FabriKant d'applications web

    Level: Community
    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.
     
  6. cheesegrits

    cheesegrits Support Gopher Staff Member

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

    -- hugh
     
    lcollong likes this.
  7. cheesegrits

    cheesegrits Support Gopher Staff Member

    Level: Community
  8. lcollong

    lcollong FabriKant d'applications web

    Level: Community
    Well done !
    Works perfectly for both "classical" and BS group button. Thanks.
     
  9. cheesegrits

    cheesegrits Support Gopher Staff Member

    Level: Community
    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
     

Share This Page