3

My control group (jquery mobile 1.4) renders perfectly when dynamically creating the radio group initially, but when I add another radio to it, the buttons are styled, but separated. When I reload the app, they are together again.

function showPlaces() {    
    $('#radio-group').empty();

    for(var i = 0; i < connections.length; i++) {
        $('#radio-group').append('<label><input type="radio" name="places" id="' + i + '" />' + place + '</label>');           
    }

    $('input[type=radio]').checkboxradio().trigger('create');
    $('#radio-group').controlgroup().trigger('create');
}

// The function is called when app starts, and again after I add another place

Some other things I've tried:

$("#radio-group").controlgroup("refresh");                                          
$('#radio-group').controlgroup('refresh');
$("[data-role=controlgroup]").controlgroup("refresh");
$('input[type=radio]').checkboxradio('refresh');

Also tried .controlgroup('container'), before the .append, but get "cannot call methods on controlgroup prior to initialization".

Here's the html:

<form>  
    <fieldset data-role="controlgroup" id="radio-group">
        <!-- Dynamically injected radio buttons go here -->
    </fieldset>
</form>
Joe's Ideas
  • 492
  • 6
  • 22

1 Answers1

4

You should .append() items into .controlgroup("container") inside for loop, and then enhance radio buttons .checkboxradio().

for(var i = 0; i < connections.length; i++) {
  $('#radio-group')
      .controlgroup("container")
      .append('<label><input type="radio" name="places" id="+i+" />Place</label>');           
}

$("#radio-group")
    .enhanceWithin()
    .controlgroup("refresh");

You dont even need to use .checkboxradio(), instead use .enhanceWithin() on parent container.

Demo

Omar
  • 32,302
  • 9
  • 69
  • 112
  • I get "cannot call methods on controlgroup prior to initialization; attempted to call method 'container'" – Joe's Ideas Jan 11 '14 at 08:56
  • @JoeLannen I'm getting no error. are you using the code in my answer with no additions? – Omar Jan 11 '14 at 09:16
  • yep same thing... hmmmm this ones been haunting me for awhile – Joe's Ideas Jan 11 '14 at 09:37
  • @joelannen, is controlgroup dynamic or static? – Omar Jan 11 '14 at 09:40
  • 1
    @JoeLannen it looks like you're doing it this way `$("#radio").controlgroup("container").append("elm").controlgroup("refresh");` this way you get an error, because `.controlgroup("container")` isn't a control group. check this demo http://jsfiddle.net/Palestinian/r4TEe/ – Omar Jan 11 '14 at 10:49
  • 1
    Omar you are a jqm master! Thanks for the fiddle demo, I appreciate it. The only thing extra I needed was to wrap in a
    , for some reason my checkboxes weren't changing on click unless wrapped in
    – Joe's Ideas Jan 11 '14 at 18:09