Dynamic controlgroup and checkboxes unstyled

javascript dynamic jquery-mobile checkbox

29,332

Solution 1

First try their own static demo code:

<div  data-role="fieldcontain">
                <fieldset data-role="controlgroup">
                    <legend>Choose as many snacks as you'd like:</legend>
                    <input type="checkbox" name="checkbox-1a" id="checkbox-1a" class="custom" />
                    <label for="checkbox-1a">Cheetos</label>

                    <input type="checkbox" name="checkbox-2a" id="checkbox-2a" class="custom" />
                    <label for="checkbox-2a">Doritos</label>

                    <input type="checkbox" name="checkbox-3a" id="checkbox-3a" class="custom" />
                    <label for="checkbox-3a">Fritos</label>

                    <input type="checkbox" name="checkbox-4a" id="checkbox-4a" class="custom" />
                    <label for="checkbox-4a">Sun Chips</label>
                </fieldset>
            </div>

They are using just one fieldset as I mentioned in comments.
If this works, then adjust your script to generate the same markup dynamically and then refresh them

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

If this will work with their code, you will know that you have error in markup. If not, there is an error with that refresh function. (I know it's not final solution but you have to do a bit of debugging sometimes :)

Edit:
Found similar problems, solved by using Page()
JQM FAQ
SO Question

Solution 2

When appending checkboxes or radio buttons to a controlgroup dynamically, you deal with two jQuery Mobile widgets, .checkboxradio() and .controlgroup().

Both should be created/updated/enhanced/styled with jQuery Mobile CSS once new elements are added.

The way to achieve this is different in latest stable versions and RC version, but the methods are the same.

jQuery Mobile 1.2.x - 1.3.x (stable versions)

After appending checkbox / radio button to either a static or dynamic controlgroup, .checkboxradio() should be called first to enhance checkbox / radio button markup and then .controlgroup("refresh") to re-style controlgroup div.

$("[type=checkbox]").checkboxradio();
$("[data-role=controlgroup]").controlgroup("refresh");

Demo

jQuery Mobile 1.4.x

The only difference here is elements should be appended to .controlgroup("container")

$("#foo").controlgroup("container").append(elements);

and then enhance both controlgroup and all elements within it, using .enhanceWithin().

$("[data-role=controlgroup]").enhanceWithin().controlgroup("refresh");

Demo

Solution 3

try with $("#<id of fieldset controlgroup>").trigger("create");

http://jsfiddle.net/YKvR3/36/

Solution 4

try

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

Solution 5

        <!DOCTYPE HTML>
    <html>
    <head>
        <title>checkbox</title>
        <link rel="stylesheet" href="jQuery/css/jquery.mobile-1.0a4.1.min.css" />
        <script type="text/javascript" src="jQuery/js/jquery-1.6.1.min.js"></script>
        <script type="text/javascript" src="jQuery/js/jquery.mobile-1.0a4.1.min.js"></script>
        <script type="text/javascript">
             var myArray = [];
             $(document).ready(function() {
                // put all your jQuery goodness in here.
                myArray[myArray.length] = 'Item - 0';
                checkboxRefresh();
             });

             function checkboxRefresh(){
                var newhtml = "<fieldset data-role=\"controlgroup\">";
                newhtml +="<legend>Select items:</legend>" ;
                for(var i = 0 ; i < myArray.length; i++){
                    newhtml += "<input type=\"checkbox\" name=\"checkbox-"+i+"a\" id=\"checkbox-"+i+"a\" class=\"custom\" />" ;
                    newhtml += "<label for=\"checkbox-"+i+"a\">"+myArray[i]+"</label>";
                }
                newhtml +="</fieldset>";
                $("#checkboxItems").html(newhtml).page();

                //$('input').checkboxradio('disable');
                //$('input').checkboxradio('enable');
                //$('input').checkboxradio('refresh');
                //$('input:checkbox').checkboxradio('refresh');

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

                $('#my-home').page();
             }

            $('#bAdd').live('click', function () {
                myArray[myArray.length] = 'Item - ' + myArray.length;
                checkboxRefresh();
            });
        </script>
    </head>
    <body>
    <div data-role="page" data-theme="b" id="my-home">
        <div id="my-homeheader">
            <h1 id="my-logo">checkbox</h1>
        </div>

        <div data-role="content">

            <div id="checkboxItems" data-role="fieldcontain"></div>

            <fieldset class="ui-grid-b">
                <div data-role="controlgroup" data-type="horizontal">
                    <a id="bAdd" href="#" data-role="button" data-icon="plus" >Add new item</a>
                </div>
            </fieldset>

        </div>
    </div>
    </body>
    </html>

It works just ones for me. Any idea why?

The Answer for me is:

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

View more solutions

29,332

Author by

Eric Franklin

Updated on October 08, 2020

Comments

Eric Franklin over 3 years
So I'm trying to load dynamic content straight into my checkbox container (group_checkboxes)
```
<div id='group_checkboxes' data-role="fieldcontain">

</div>
```
This is the statement I'm running to populate the container:
```
$('#group_checkboxes').append('<fieldset data-role="controlgroup"><input type="checkbox" name="' + $(this).find('data').text() + '" class="custom" /><label for="' + $(this).find('data').text() + '">' + $(this).find('label').text() + '</label></fieldset>');
```
The checkboxes are all populated but the jQuery style is not applied.

According to the docs all I need to do is call this function to update the checkbox style...
```
$("input[type='checkbox']").checkboxradio("refresh");
```
That doesn't work though... Any idea what I'm doing wrong?
Eric Franklin about 13 years

Ok, tried that example... those 4 checkboxes load up fine (with the appropriate style). Its the ones that are dynamically loaded which are not styled. (modified the append query to just put in an input and a label now). Running the refresh statement does nothing.
Damb about 13 years

Ok, then I have found ppl using Page() for these problems. I am going to add few links to my answer.
Eric Franklin about 13 years

Great... that did it. Thanks for all the help mate :)
Damb about 13 years

Great, so we finally found solution ;)
Adam almost 13 years

.page() worked with the kast BETA 1 build, but this does not seem to work with the latest Beta 2 build..any ideas?
Nando about 12 years

Can someone post a working example using the page() method? I'm still having issues with this same exact problem.
User over 11 years

Hi I need another label for every row, How to do that
Udo Klimaschewski about 10 years

Omar's answer should be set as the accepted answer, $("[type=checkbox]").checkboxradio(); and its friends works like a charm - just give no parameter to the checkboxradio() function.