I'll try my best to explain what is going on as it is quite strange. Previous to making some changes on our website (this wasn't touched) this worked perfectly I am currently having 2 unexpected errors with Radio buttons in JQuery when I use .buttonset()
We currently have a multistep form, on the second step we use details from the first step to provide a list of service providers to the client where they can select which one they would like to use.
We use ajax to return HTML that is placed inside radio-group div. Example of HTML below:
<input type="radio" value="1" name="cleaner-select" id="cleaner-select-1" class="cleaner_selection ui-corner-left">
<label for="cleaner-select-1" class="cleaner-selection-box col-md-2 col-xs-12">
<div class="col-md-12 col-xs-12 center fivepxpad">
<button type="button" class="btn btn-default btn-primary" onclick="view_profile(1)"> View Cleaner Profile <span class="btn-icon-right icon-circle-right"></span></button>
</div>
<div class="col-md-12 col-xs-12 cleanerproducts">
<span class="icon green icon-leaf fontsize16"></span> Eco / Natural Products
</div>
<div class="col-md-12 col-xs-12">
<span class="icon icon-shield cleanerverified"></span> Verified
</div>
<div class="col-md-12 col-xs-12">
<span class="icon icon-location"></span> Close-By
</div>
</label>
This is placed inside a DIV below:
<div id="radio-group" class="center">
</div>
Using this JQuery
$('#radio-group').html(result[1]);
$('#radio-group').buttonset();
Current Errors:
When buttonset is called the values of all the radio inputs are removed. eg. changes from value="1" to just value. This didn;t previously happen, I know buttonset is causing this because when I remove $('#radio-group').buttonset(); the value stays just fine (no error in HTML).
When buttonset is applied to the parent div "radio-group" it receives ui-buttonset class as expected but nothing else happens, the input radio buttons are still visible, the colours aren't showing when selected and the labels stay white (meant to be a slight grey colour) but when the labels are clicked on the correct raido input is selected.
On our last update we joined a few CSS files and JS files together but kept everything in the same order that it was previously loaded in. This was to reduce the amount of calls we had to make and everything else is working fine so not entirely sure this is causing it. We also get no console errors.
Things I've tried:
- Changed $('#radio-group').buttonset(); to $('#radio-group').button();
- Called $('#radio-group').buttonset(); in document.ready and tried $('#radio-group').buttonset('refresh); when HTML changes
- $('#radio-group').buttonset('refresh); by itself
- Double checked all CSS and JS. (JQuery-UI .js and .css is included)
I'm about to try switching back to our old header and footer files (where more calls are made) to see if that fixes it but if anyone knows what is going on, any help / ideas / advice would be appreciated.
I can't seem to find anyone with a similar issue and I've been working in this for hours it's doing my head in. If you need anymore info let me know.