I'm dynamically creating several vertically grouped radio buttons using jQuery mobile 1.0 for a multiple choice quiz.

When I paste this code from the JQM Radio Button Docs in it styles the controlgroup properly.

<fieldset data-role="controlgroup">
    <input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
    <label for="radio-choice-1">Cat</label>
    <input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2"  />
    <label for="radio-choice-2">Dog</label>
</fieldset>

When I dynamically inject my markup on pageshow() it injects the proper markup but it doesn't style the control group at all.

$.getJSON("assets/json/aircraft.json", function (data) {
    var maxQuestions = 10;
    var maxChoices = 4;

    var randomsorted = data.aircraft.sort(function (a, b) {
        return 0.5 - Math.random();
    });

    var quiz = $.grep(randomsorted, function (item, i) {
        return i < (maxQuestions * maxChoices);
    });

    var arr_quiz_markup = [];
    $.each(quiz, function (i, item) {
        var q = Math.floor(i / maxChoices);
        var c = i % maxChoices;

        if (c == 0) arr_quiz_markup.push("<div>Image for question " + q + " goes here...</div><fieldset data-role='controlgroup' data-question='" + q + "'>");

        arr_quiz_markup.push("<input type='radio' name='q" + q + "' id='q" + q + "c" + c + "' data-aircraftid='" + item.id + "' />");
        arr_quiz_markup.push("<label for='q" + q + "c" + c + "'>" + item.name + "</label>");

        if (c == maxChoices - 1 || c == quiz.length - 1) arr_quiz_markup.push("</fieldset><br />");

    });

    $("#questions").html(arr_quiz_markup.join("")).controlgroup("refresh");
});

I tried $("#questions :radio").checkboxradio("refresh"); but throws "cannot call methods on checkboxradio prior to initialization; attempted to call method 'refresh'".

My Live Quiz Demo (Sorry, jsfiddle doesn't have jQuery Mobile listed)

What am I doing wrong? How do I refresh this to properly get JQM to style the controlgroup correctly?

I'm dynamically creating several vertically grouped radio buttons using jQuery mobile 1.0 for a multiple choice quiz.

When I paste this code from the JQM Radio Button Docs in it styles the controlgroup properly.

<fieldset data-role="controlgroup">
    <input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
    <label for="radio-choice-1">Cat</label>
    <input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2"  />
    <label for="radio-choice-2">Dog</label>
</fieldset>

When I dynamically inject my markup on pageshow() it injects the proper markup but it doesn't style the control group at all.

$.getJSON("assets/json/aircraft.json", function (data) {
    var maxQuestions = 10;
    var maxChoices = 4;

    var randomsorted = data.aircraft.sort(function (a, b) {
        return 0.5 - Math.random();
    });

    var quiz = $.grep(randomsorted, function (item, i) {
        return i < (maxQuestions * maxChoices);
    });

    var arr_quiz_markup = [];
    $.each(quiz, function (i, item) {
        var q = Math.floor(i / maxChoices);
        var c = i % maxChoices;

        if (c == 0) arr_quiz_markup.push("<div>Image for question " + q + " goes here...</div><fieldset data-role='controlgroup' data-question='" + q + "'>");

        arr_quiz_markup.push("<input type='radio' name='q" + q + "' id='q" + q + "c" + c + "' data-aircraftid='" + item.id + "' />");
        arr_quiz_markup.push("<label for='q" + q + "c" + c + "'>" + item.name + "</label>");

        if (c == maxChoices - 1 || c == quiz.length - 1) arr_quiz_markup.push("</fieldset><br />");

    });

    $("#questions").html(arr_quiz_markup.join("")).controlgroup("refresh");
});

I tried $("#questions :radio").checkboxradio("refresh"); but throws "cannot call methods on checkboxradio prior to initialization; attempted to call method 'refresh'".

My Live Quiz Demo (Sorry, jsfiddle doesn't have jQuery Mobile listed)

What am I doing wrong? How do I refresh this to properly get JQM to style the controlgroup correctly?

• javascript
• html
• jquery-mobile

• 1 jsFiddle lets you "Manage resources" to add jQuery Mobile. See jsfiddle.net/elijahmanor/5xwE8 left nav try adding this url code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.js in YOUR jsFiddle – SarjanWebDev Commented Jun 21, 2012 at 3:14

3 Answers 3

Add this line

$("#quiz").trigger("create");

after

$("#questions").html(arr_quiz_markup.join("")).controlgroup("refresh");

This code snippet will force a rebuild of the quiz page so that jqm styles will be applied to the page contents.

You will get more information about the dynamic in this jQuery Forum thread.

The jQuery Mobile default styles will be applied once you use the following code. That's what I found and it's working for me.

$("input[type='radio']").checkboxradio().checkboxradio("refresh"); 

This works for me (I'm using jQuery Mobile 1.4.0):

HTML

<div id="locations" data-role="controlgroup"></div>

JS

$.ajax({
    ...
    success: function(data, textStatus, jqXHR) {
        // Hide loading message
        $.mobile.loading("hide");

        // Build page
        $("#location-page").trigger("create");

        // Clear another previos radio options
        $("#locations").controlgroup("container")["empty"]();

        // Read XML response
        var rows = $("Row", data);

        $(rows).each(function(index, value) {
            var locationId = $("LocationID", this).text();
            var locationName = $("LocationName", this).text();
            var $el = $("<label for=\"location" + index + "\">" + locationName + "</label><input type=\"radio\" name=\"location\" id=\"location" + index + "\" value=\"" + locationId + "\">")
            $("#locations").controlgroup("container")["append"]($el);
            $($el[1]).checkboxradio();
        });
        $("#locations").controlgroup("refresh");

        // Change to locations' page
        $.mobile.changePage("#location-page", {transition: "flip"});
    },
    ...
});