jQuery dynamic list styling

Question

I have the following code written

$(xml).find('list').each(function() {
  $("#content_groups ul").append("<li><a href='#membergroup' onclick='functionare(\"" + $(this).attr("name") + "\")'>" + $(this).attr('name') + "</a><input type='checkbox' name='checkbox-0' id='checkbox-mini-0' class='custom' data-mini='true' /></li>");
});
$("#content_groups ul").listview('refresh');

The result is not as I wished, namely the checkbox has no jquery css style at all. Can you please tell me what's the problem?

That's how the result looks:

I'm basically new to all what's jquery/javascript and I need it for my project only to display some results from an xml.

The id of your checkbox is not unique (always: checkbox-mini-0) you should change that. All checkboxes you append have the class custom, are there any css rules for that class? and what do you mean with "jquery css style"? — axel.michel, Jan 22 '13 at 16:06
@axel.michel yes, the id and class remained there from the sample code I've been using, sorry for that. When I said jquery css style I meant the default appearance a checkbox should have in jquery mobile, as here http://jquerymobile.com/demos/1.0a4.1/docs/forms/forms-checkboxes.html — Alex, Jan 22 '13 at 16:19

score 1 · Answer 1 · answered Jan 22 '13 at 16:06

Although I don't have enough information to solve the issue at hand, i'd like to explain that the current method doesn't implement the DOM in a clean way.

It is better to add all of your new html together into a var, and then at the end Append the newly created html.

var content_groups;
$(xml).find('list').each(function() {
  content_groups += "<li><a href='#membergroup' onclick='functionare(\"" + $(this).attr("name") + "\")'>" + $(this).attr('name') + "</a><input type='checkbox' name='checkbox-0' id='checkbox-mini-0' class='custom' data-mini='true' /></li>";
});
$("#content_groups ul").append(content_groups);
$("#content_groups ul").listview('refresh');

I know this doesn't truly solve your issue but it should decrease the amount of time that your site appears frozen in Internet Explorer.

score 1 · Accepted Answer · edited May 23 '17 at 12:12

1

First few things to consider.

$("#content_groups ul").listview('refresh');

will only style your list view and nothing more.

To style a check box you need to use a appropriate function like this one:

$("#checkbox-mini-0").checkboxradio('refresh');

Unfortunately this is not going to help you because jQuery Mobile can not style normal check box elements. If you use a standard check box your final result will be a normal check box.

jQuery Mobile check box looks like this:

<div data-role="fieldcontain">
    <fieldset data-role="controlgroup">
            <legend>Agree to the terms:</legend>
            <input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
            <label for="checkbox-1">I agree</label>
    </fieldset>
</div>

You can use this code and insert it into your listview li element (of course you still need to style it with .checkboxradio('refresh');) but this still is not going to help you because jQuery Mobile check box is never meant to bu used inside listview.

But you can create a custom check box inside a listview and here's my example how you can do that: https://stackoverflow.com/a/13634738/1848600

edited May 23 '17 at 12:12

Community

1
1

answered Jan 22 '13 at 16:19

Gajotres

57,309
16
102
130

2

thank you! I looked at your code from the other post and that's definitely what I am looking for. I will notice you how is it going as soon as possible! – Alex Jan 22 '13 at 16:47
I have updated my example with a correct picture, so take a look now. It is built to look like jQM check box. – Gajotres Jan 22 '13 at 17:07
OK, so this morning I had the time to test your solution and works very well for my project. Thank you once again. – Alex Jan 23 '13 at 09:02
I don't know actually how I close a thread on stackoverflow if I found my solution or how does it work? – Alex Jan 23 '13 at 09:03

jQuery dynamic list styling

2 Answers2