0

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?

user3294779
  • 593
  • 2
  • 7
  • 23
  • Which JQM version are you using? – Omar Apr 30 '14 at 20:15
  • I'm using version-1.4.2. – user3294779 Apr 30 '14 at 22:27
  • Is the panel internal or external? Are you sure you want to use pageshow event, it will run every time any page is shown, so you might be adding duplicate radio buttons... – ezanker Apr 30 '14 at 22:46
  • possible duplicate of [Dynamic controlgroup and checkboxes unstyled](http://stackoverflow.com/questions/5663033/dynamic-controlgroup-and-checkboxes-unstyled) – Omar May 01 '14 at 00:01
  • You should append elements to `$("#facebookgroup").controlgroup("container").append(elements);` and then refresh controlgroup. – Omar May 01 '14 at 00:03
  • @Omar any idea why this isn't working: for(var i=0 ; i' + '').trigger('create'); $('#facebookGroups').controlgroup('refresh'); } I tried placing the refresh both inside and outside of the for loop to no avail. – user3294779 May 24 '14 at 00:05
  • Read this http://jqmtricks.wordpress.com/2014/01/21/controlgroup-add-items-dynamically-jquery-mobile-1-4/ – Omar May 24 '14 at 07:03
  • Doesn't work. I can get the radio buttons to work correctly in jsfiddle but it doesn't carry over to the actual app. http://jsfiddle.net/m72rk/ – user3294779 May 24 '14 at 18:30
  • it works http://jsfiddle.net/Palestinian/m72rk/3/ `.trigger("create")` is deprecated. – Omar May 25 '14 at 17:16
  • Like I said earlier it does not work in my actual app code, with or without trigger('create'). See ezanker's answer for a working solution. – user3294779 May 27 '14 at 16:22

1 Answers1

0

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

ezanker
  • 24,628
  • 1
  • 20
  • 35