I'm dynamically adding radio buttons to fieldset with the following code:
$(document).on( "pageshow", function( event, data ){
for(var i=0 ; i<events.length ; i++){
$('#facebookGroups').append('<input type="radio" name="radio-choice-3" id="' + events[i] + '"/>' + '<label for="' + events[i] + '">' + events[i] + '</label>').trigger('create');
}
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});
This is the div that's being populated:
<div data-role='panel' id='listPanel' data-display='overlay' data-position='right'>
<fieldset data-role="controlgroup" data-mini="true" id="facebookGroups">
<legend>Facebook Events:</legend>
</fieldset>
<a href="#homepage" data-rel="close" class='panelButton'>Close panel</a>
</div>
The data is being filled and formatted properly, but they're not acting like radio buttons should be. I am able to select any number of them at the same time. I need to only be able to select one at a time.
Does anybody know what's going on here?
Try this:
$('#facebookGroups input').remove();
var radios = ''
for (var i = 0; i < events.length; i++) {
radios += '<input type="radio" name="radio-choice-3" id="' + events[i] + '"/>' + '<label for="' + events[i] + '">' + events[i] + '</label>';
}
$('#facebookGroups').append(radios).enhanceWithin();
The first line removes any inputs previously added to the controlgroup.
The for loop constructs a string with all the inputs to add.
The last line appends all the inputs and then calls enhanceWithin() to initialize the checkboxradio widgets.
Here is a DEMO
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments