发表新帖
发表新帖

Dynamic controlgroup and checkboxes unstyled

后端 未结
关注
6 1227
走了就别回头了
走了就别回头了 2020-11-27 22:03

So I\'m trying to load dynamic content straight into my checkbox container (group_checkboxes)


         


        

                      

              相关标签:
6条回答
  • 故里飘歌
    2020-11-27 22:42

    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.

    0 讨论(0)
  • 自闭症患者
    2020-11-27 22:43 
            <!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();
    0 讨论(0)
  • 南笙
    2020-11-27 22:48

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

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

    0 讨论(0)
  • 南笙
    2020-11-27 22:49

    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

    0 讨论(0)
  • 清歌不尽
    2020-11-27 22:50

    try 

    $('input:checkbox').checkboxradio('refresh');
    0 讨论(0)
  • 离开以前
    2020-11-27 22:56

    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

    0 讨论(0)
 看不清?
提交回复
热议问题