CODEWITHSUNDEEP
javascriptjqueryhtmljquery-mobilecheckbox
Cethy
Cethy

Reputation: 551

Update visual styling of dynamically added checkbox in jQuery Mobile

I'm currently adding a bunch of checkboxes dynamically during the "pageinit" event, which I am able to both add and check successfully. The checkboxes are added by appending instances of the following stub to a "ul"-component:

<li>
<div class = "new-student">
    <img class="profile-img nav-ui-thumbnail ui-mini" src="../images/prof_img.gif">
    <!-- Block A -->
    <div id="grid" class="ui-grid-a ui-mini">
        <div class="ui-block-a ui-mini">
            <div class="ui-bar ui-bar-a ui-mini">
                <h2 class="name-student">Name</h2>
                <p class="attendingtime-student">00:00</p>
            </div>
        </div>
        <!-- Block B -->
        <div class="ui-block-b">
            <div class="ui-bar ui-bar-a ui-mini">
                <h2 class="pickuptype-student">null</h2>
                <p class="pickuptime-student">00:00</p>
            </div>
        </div>
    </div>
    <form>
        <!-- Attending -->
        <fieldset class="fieldset ui-overlay-shadow" data-role="controlgroup" data-type="horizontal" class="localnav">
            <input class="attendance0-student" name="checkbox-h-2a" id="checkbox-h-2a" type="checkbox">
            <label for="checkbox-h-2a">1</label>
            <input class="attendance1-student" name="checkbox-h-2b" id="checkbox-h-2b" type="checkbox">
            <label for="checkbox-h-2b">2</label>
            <input class="attendance2-student" name="checkbox-h-2c" id="checkbox-h-2c" type="checkbox">
            <label for="checkbox-h-2c">3</label>
        </fieldset>
    </form>
</div>

However; I am unable to update the visual styling of the checkboxes, which result in all checked boxes looking like this:

Incorrectly displayed checkboxes

I've tried calling ".checkboxradio.('refresh')" but it only results in an error (saying I can't call that method on a component that has yet to be initialized).

Please help!

Upvotes: 2

Views: 658

Answers (1)

Gajotres
Gajotres

Reputation: 57309

Regarding this:

I've tried calling ".checkboxradio.('refresh')" but it only results in an error (saying I can't call that method on a component that has yet to be initialized).

Usually when this kind of error occurs you need to do this:

$('#someId').checkboxradio.().checkboxradio.('refresh');

First call will initialize checkboxradio widget and second one will enhance its markup. But this is not case with checkbox widget, to enhance dynamically added checkbox you need to do this:

$('[type="checkbox"]').checkboxradio();

Without refresh parameter.

And here's a working example: http://jsfiddle.net/Gajotres/VAG6F/77/

There are of course other solutions, read this article if you are using older versions of jQuery Mobile up to 1.4 (mentioned functions are currently deprecated).

If you are using jQuery Mobile 1.4 and you are planing in using future versions then use this method:

$('.ui-content').enhanceWithin();

Read more about it here.

There's a third option, instead of pageinit use pagecreate event. Like pageinit it will trigger only once but unlike pageinit it triggers before jQuery Mobile enhances active page. So everything appended at this point will automatically become enhanced.

Upvotes: 2

Related Questions