CODEWITHSUNDEEP
jquery-mobile
Adam Tuttle
Adam Tuttle

Reputation: 19824

Building a dynamic radio button list in jQuery Mobile, but not getting any click events

I'm using jQMobile 1.0, and building a list of radio buttons dynamically from json data returned from an API.

I've been able to make them appear (mostly) as expected by templating the contents of the fieldset out, with the same markup that is generated by jqMobile from static labels and radio buttons:

<script id="shows-list" type="text/x-jquery-tmpl">
    <div class="ui-radio">
    <input type="radio" name="activeShow" id="activeShow${showID}" value="${showID}">
        <label for="activeShow2" data-theme="c" class="ui-btn ui-btn-up-c ui-btn-icon-left ui-radio-off">
            <span class="ui-btn-inner" aria-hidden="true">
                <span class="ui-btn-text">
                    <h2>${showname}</h2>
                    <p>${opendate} &mdash; ${closedate}</p>
                </span>
                <span class="ui-icon ui-icon-radio-off ui-icon-shadow"></span>
            </span>
        </label>
    </div>
</script>

And here's the code that's using the template and updating the page content:

renderSettingsShowsList: function ( data ) {
    $("#showChooser")
        .empty()
        .append('<div role="heading" class="ui-controlgroup-label"><h3>Which show are you attending?</h3></div><div class="ui-controlgroup-controls"></div>');
    $("#shows-list")
        .tmpl( data )
        .appendTo("#showChooser .ui-controlgroup-controls");
}

With the exception of losing the rounded corners, the list appears as if it were generated normally, but the remaining problem is that nothing at all seems to happen on click. Normally I would expect to see the radio button selected and the label background color would change for more visual feedback on selection.

I've tried looking at the event handlers associated with the label, and there is a click handler directly on the label (as well as 2 bound to document), so I tried to save a reference to it and then re-attach it:

renderSettingsShowsList: function ( data ) {
    //save reference to existing click handler so we can re-apply it
    var clk = $("#showChooser label:first").data("events").click[0].handler;

    $("#showChooser").empty().append('<div role="heading" class="ui-controlgroup-label"><h3>Which show are you attending?</h3></div><div class="ui-controlgroup-controls"></div>');

    var newContent = $("#shows-list").tmpl( data ).find("label").each(function(){
        $(this).click(clk);
    });

    newContent.appendTo("#showChooser .ui-controlgroup-controls");
}

I've also tried running $("#settings").page() after the new markup is in place (on the last line of renderSetingsShowsList, but that doesn't seem to have any effect.

Is there a sanctioned method of doing what I'm trying to do that let's jQuery Mobile do its enhancements, or am I going to have to hack it together somehow?

Upvotes: 1

Views: 1314

Answers (1)

Adam Tuttle
Adam Tuttle

Reputation: 19824

This is the sort of "hack" solution I've come up with. It works, but I'd love to know if there's a better way.

renderSettingsShowsList: function ( data ) {
    $("#showChooser")
        .empty()
        .append('<div role="heading" class="ui-controlgroup-label"><h3>Which show are you attending?</h3></div><div class="ui-controlgroup-controls"></div>');

    $("#shows-list").tmpl( data ).appendTo("#showChooser .ui-controlgroup-controls");

    //assign click handler to new form controls to do everything we need it to
    $('#showChooser input:radio').click(function(e) {

        //mark all as not selected
        $("#showChooser input:radio").prop('checked', false);
        $("#showChooser label")
            .attr('data-theme','c')
            .removeClass('ui-btn-up-e')
            .addClass('ui-radio-off')
            .removeClass('ui-radio-on')
            .find(".ui-icon")
                .addClass('ui-icon-radio-off')
                .removeClass('ui-icon-shadow')
                .removeClass('ui-icon-radio-on');

        //style selected option
        var radio = $(this),
            label = radio.next();
        radio.prop('checked', true);
        label.attr('data-theme','e')
            .addClass('ui-btn-up-e')
            .removeClass('ui-radio-off')
            .addClass('ui-radio-on')
            .find(".ui-icon")
                .removeClass('ui-icon-radio-off')
                .addClass('ui-icon-shadow')
                .addClass('ui-icon-radio-on');

    });
}

Upvotes: 0

Related Questions