16

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?

Omar
  • 32,302
  • 9
  • 69
  • 112
Eric Franklin
  • 233
  • 1
  • 2
  • 5
  • You are generating checkboxes, that aren't checked. Then you are trying to refresh checked checkboxes. First try removing that .attr("checked",true) part. Also don't forget, that names and ids should be unique. – Damb Apr 14 '11 at 12:18
  • Yea i tried removing the attr() part of the statement but that didn't work either. Also removed the name and id from the input also to see if that helped - it didn't :( – Eric Franklin Apr 14 '11 at 12:21
  • Hmm... btw: is generating many fieldsets inside one parent fieldset correct? I haven't done that before. – Damb Apr 14 '11 at 12:27
  • Just following the documentation (what little of it they have). I tried replacing the internal fieldsets with divs to group the content, doesn't make a difference. – Eric Franklin Apr 14 '11 at 12:34
  • Just updated the original post to avoid any confusion... Weird, seems like a very common task – Eric Franklin Apr 14 '11 at 12:42
  • I posted another comment as an answer because of sourcecode. – Damb Apr 14 '11 at 12:50

6 Answers6

12

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

Omar
  • 32,302
  • 9
  • 69
  • 112
7

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

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

michele
  • 26,348
  • 30
  • 111
  • 168
7

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

Community
  • 1
  • 1
Damb
  • 14,410
  • 6
  • 47
  • 49
  • 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. – Eric Franklin Apr 14 '11 at 12:56
  • Ok, then I have found ppl using `Page()` for these problems. I am going to add few links to my answer. – Damb Apr 14 '11 at 13:06
  • Great, so we finally found solution ;) – Damb Apr 14 '11 at 13:54
  • .page() worked with the kast BETA 1 build, but this does not seem to work with the latest Beta 2 build..any ideas? – Adam Aug 23 '11 at 23:36
  • 2
    Can someone post a working example using the page() method? I'm still having issues with this same exact problem. – Nando May 17 '12 at 14:17
  • Hi I need another label for every row, How to do that – User Mar 20 '13 at 06:00
  • 1
    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. – Udo Klimaschewski Jun 24 '14 at 15:23
3

try 

$('input:checkbox').checkboxradio('refresh');
GSerg
  • 76,472
  • 17
  • 159
  • 346
joerg
  • 31
  • 1
1
        <!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();
Valeriy Kliuk
  • 456
  • 1
  • 5
  • 9
0

What work out for me was to remove the whole fieldset then replace place a new fieldset with the new item I wanted to add then I called the .trigger('pagecreate'); method on the whole page. This is not the most efficient solution but that is the only one that worked in my case.

Tono Nam
  • 34,064
  • 78
  • 298
  • 470