Reputation: 3999
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
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
Reputation: 3122
After appending your checkbox items, try calling .trigger('create') on the div with data-role fieldcontain as per this link
Upvotes: 1
Reputation: 35194
Target the checkboxes and trigger a refresh after you have added them:
$(':input:checkbox').checkboxradio("refresh");
Upvotes: 0