jQM 1.4 panel with dynamic radios

by Erik Zanker

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<div data-role="page" id="page1">
    <div data-role="header" data-position="fixed"> <a href="#listPanel" class="ui-btn ui-shadow ui-corner-all">Panel</a>
         <h1>My Page</h1>

    </div>
    <div class="ui-content" role="main"></div>
    <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>
</div>

JavaScript

var events = [
    "event1",
    "event2",
    "event3"];

$(document).on("pagecreate", "#page1", function () {

    $('#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();


});