Injected radio controlgroup does not get styling
I'm trying to take a JSON response array and turn this in to a radio controlgroup.
I have the following function:
- function ControlView(parent, control_name, data) {
- this.control = control_name;
-
- this.container = $( '<form><fieldset data-role="controlgroup" data-type="horizontal" data-mini="true"></fieldset></form>')
- var option_char = 'a';
- for (var key in data['options']) {
- var input = $( '<input type="radio" name="radio-choice-h-2" id="radio-choice-h-6' + option_char + '" value="' + key + '"><label for="radio-choice-h-6' + option_char + '">' + data['options'][key] + '</label>' )
- input.appendTo( this.container.children() );
- option_char = String.fromCharCode(option_char.charCodeAt(0) + 1);
- }
- this.container.appendTo(parent).trigger("create");
- this.container.controlgroup("refresh")
-
- this.container.data('view_obj', this);
- }
Calling it results in this HTML:
- <form class="ui-corner-all ui-controlgroup ui-controlgroup-vertical">
- <div class="ui-controlgroup-controls">
- <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
- <input type="radio" name="radio-choice-h-2" id="radio-choice-h-6a" value="vcr">
- <label for="radio-choice-h-6a">HTPC</label>
- <input type="radio" name="radio-choice-h-2" id="radio-choice-h-6b" value="aux1">
- <label for="radio-choice-h-6b">Wii</label>
- <input type="radio" name="radio-choice-h-2" id="radio-choice-h-6c" value="cbl">
- <label for="radio-choice-h-6c">FiOS</label>
- <input type="radio" name="radio-choice-h-2" id="radio-choice-h-6d" value="CD">
- <label for="radio-choice-h-6d">BT</label>
- </fieldset>
- </div>
- </form>
The problem is that the result does not appear to be styled. It is just a row of radio buttons.
Is there something I need to call in order to trigger this?
Thanks,
Devan