YesNo element buttons don't fire onchange events properly

[chozma]

Hi guys,

I'm using a yesno element on one of my pages in conjunction with some javascript on change events. It looks great and I like the styling which makes the yes/no options and radio bits into buttons which change colour on click. Very nice. But.....

I've noticed that if the user clicks on the button, rather than the actual radio button dot, the button changes colour as you'd expect but the onchange events aren't firing. However, if the user clicks on the radio button itself then the events fire as you'd expect and all is good.

I just did some user testing and every time the user will click on the button and not the radio button, if there is a button surround. So it seems to me the button styling is a bit misleading and not quite working as it should?

Obviously, I can find a way to take the styling off but its a really nice touch and I wonder if its meant to do this? Is there a way I can get the whole button to fire the events. Or alternatively only get the button to change colour if the actual radio button is clicked...

Not sure if others will have had this issue too?

Thanks, Kind regards,

Hannah

 

[troester]

Which Fabrik version are you running and which Joomla template?
This issue should have been fixed here https://github.com/Fabrik/fabrik/commit/f6483849f4b4d30c764dd800478960491f9090ad

I don't understand what you mean with clicking "button or radio button dot" (can you see both at the same time?), do you have a screenshot or link?

 

[chozma]

Hi Troester, I am using the latest version of Fabrik (I updated from github two days ago) but I am using my own bootstrapped template. Perhaps my template is the issue?

A screenshot of what I can see is attached.

I have added log in details for administrators to see if you want to take a look, I assume you are an admin for Fabrik? Go to the following page: index.php/mobanimal/form/22

 

[troester]

Yes, this doesn't look right.
In Firefox I can't see buttons at all but I get a lot of JS errors.
With protostar (you can append ?template=protostar for temporary template change) the buttons are displaying red/green, no JS error (but I can't see any effect, dropdowns are empty...)

 

[chozma]

Agreed, with protostar I still don't see the onchange events firing... though the buttons look much better without the radio buttons, I will have to see if I can fix my template to do that!

 

[cheesegrits]

Try click rather than change.

-- hugh

 

[cheesegrits]

I had a look at that page, and your template is indeed totally changing the way the btn-group works for radios in the standard Bootstrap environment. Which, for instance, should hide the actual vanilla radio controls, and change icon classes on the two button icons to get the red/green switching, whilst passing clicks through to the hidden radios to maintain state for form input submission.

I'm not sure if that's "fixable".

How does that template render normal radios?

-- hugh

 

[chozma]

Hi Hugh,

Thanks for looking into this for me, I always appreciate your help.

As you suggested changing the events to onclick events makes the buttons work just as I need so that's a wonderful solution thanks very much. And with a quick bit of css to hide the radio bits as well I get some very neat looking buttons that still perform as required - I probably need to do a bit more testing to be really sure but it seems ok after a quick test. Ha ha, I'm sure those will be famous last words.

Normal radios can be seen in the attached but that's probably not needed now.



Also its always worth saying how great I think what you're doing here is - Fabrik is awesome, thanks to you and Rob and I'm sure others as well for what you are doing and for the support!

Kind regards,

Hannah
x

 

[cheesegrits]

Thank you for the kind words.

-- hugh