kosbou
kosbou

Reputation: 3999

jquery mobile dynamic checkbox styling

i am in mobile app. I create a list of checkboxes and i am trying to style it with standard mobile look. Here is my code

var list = $('#Code'),
    items = [];
for (i = 0; i < len; i += 1) {
    row = resultflatname.rows.item(i);
    items.push('<input type="checkbox" name="code_'+ i +'" id="code_'+ i +'" value="' + row.amount + '" previous="' + row.pastpayments + '" barcode="' + row.barcode + '" todayp="' + row.todaypayments + '"/><label for="code_'+ i +'">' + row.period +'..........'+ row.amount+'</label>');
}
list.html('<div data-role="fieldcontain"><fieldset data-role="controlgroup"><legend>Checkbox Options:</legend>' + items.join('') + '</fieldset></div>').trigger('create');

and my html

<div data-role="page" id="displayflat">
    <div id="Code">

    </div>
</div>

but i receive simple checkboxes instead of mobile look. I change a little bit the code. Now if i copy paste the code from firebug inspect to html the checkboxes are styled correctly but the styling is wrong if i try to do the same from jquery

Upvotes: 0

Views: 2679

Answers (3)

Anthony
Anthony

Reputation: 5433

I have a fix for two problems:

"NOT_FOUND_ERR: DOM Exception 8 checkboxradio"

and

"Uncaught cannot call methods on checkboxradio prior to initialization; attempted to call method 'refresh'"

It appears that if your checkbox id and name attribute are not the same when using jQuery 1.7.1, you'll get one of the above errors. Took me 30 minutes of trial and error to figure it out.

You'll likely hit one of these two errors if you try .trigger('create') or .checkboxradio()

Upvotes: 0

Ruy Diaz
Ruy Diaz

Reputation: 3122

After appending your checkbox items, try calling .trigger('create') on the div with data-role fieldcontain as per this link

Upvotes: 1

Johan
Johan

Reputation: 35194

Target the checkboxes and trigger a refresh after you have added them:

$(':input:checkbox').checkboxradio("refresh");

Upvotes: 0

Related Questions