CODEWITHSUNDEEP
javascriptjqueryjquery-mobile
algo1
algo1

Reputation: 115

Jquerymobile Styling the dynamically created List

I have extensively searched on google and stackoverflow for this and didn't find any solution.

I am dynamically creating nested collapsibles and in the innermost layer there is a list view .My collapsibles are getting stlyed but not the list. Comparing to other questions on the stackoverflow , this is diff as the multilevel hierarchy is generated while parsing the received json from the string. Please have a look at the code and help me to style the list elements.

   <div data-role="page" id="pageone">
    <div data-role="header">
     <h1>My items</h1>
       </div>



 <div data-role="main" class="ui-content">
 <div data-role = "collapsible-set"  id="set">

 <div>

Javascript:

<script>
var commodity;
var variety;
var grade;
var content;
var text;
var xmlhttp;
var jsons ='[{"Turmeric":[{"Bulb":["Grade 2","Grade 1"]},{"Finger":["Grade 1"]}]}]';

console.log(jsons);

var data = $.parseJSON(jsons);
var nextId = 0;
$.each(data, function(key, value){
    $.each(value, function(key, value){       //Runs for each commodity

        commodity = key;
        var data1 = value;

        $(document).on("pageinit", function() {
            nextId++;

            content = "<div data-role='collapsible' data-collapsed-icon='arrow-r' data-expanded-icon='arrow-d' id='setk'><h3> " + commodity + "</h3><p>";

            $.each(data1, function(key, value){
                $.each(value, function(key, value){
                    variety = key;

                    content = content + "<div data-role='collapsible' data-collapsed-icon='arrow-r' and data-expanded-icon='arrow-d' id='setk'><h3> " + variety + "</h3><p>"+
                    '<ul data-role="listview" id="noth">';

                    for(var i=0, len=value.length; i < len; i++){
                        grade = value[i];
                        content=content+'<li><a href="ext.html" rel="external">'+grade+'</a></li>';
                    }
                    content = content + '</ul>';
                    content = content + "</p></div>";
                });
            });
            content = content +"</p></div>";
            $("#set").append( content );//.collapsibleset('refresh');    
            $("#set").enhanceWithin();
        });   
    });             
});
</script>

Upvotes: 2

Views: 245

Answers (1)

Gajotres
Gajotres

Reputation: 57309

Working example: http://jsfiddle.net/eL9qL/

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>jQM Complex Demo</title>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" /> 
        <!--<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>-->
        <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>    
    </head>
    <body>     
        <div data-role="page" id="index" data-theme="a" >
            <div data-role="header">
                <h3>
                    First Page
                </h3>
                <a href="#second" class="ui-btn-right">Next</a>
            </div>

            <div data-role="content">
                <div data-role = "collapsible-set"  id="set">

                    <div>
                    </div>

                    <div data-role="footer" data-position="fixed">

                    </div>
                </div> 
                <div data-role="page" id="second" data-theme="a" >
                    <div data-role="header">
                        <h3>
                            Second Page
                        </h3>
                        <a href="#index" class="ui-btn-left">Back</a>
                    </div>

                    <div data-role="content">

                    </div>

                    <div data-role="footer" data-position="fixed">

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

JavaScript:

var commodity;
var variety;
var grade;
var content;
var text;
var xmlhttp;
var jsons ='[{"Turmeric":[{"Bulb":["Grade 2","Grade 1"]},{"Finger":["Grade 1"]}]}]';

console.log(jsons);

var data = $.parseJSON(jsons);
var nextId = 0;
$.each(data, function(key, value){
    $.each(value, function(key, value){       //Runs for each commodity

        commodity = key;
        var data1 = value;

        $(document).on("pageinit", function() {
            nextId++;

            content = "<div data-role='collapsible' data-collapsed-icon='arrow-r' data-expanded-icon='arrow-d' id='setk'><h3> " + commodity + "</h3><p>";

            $.each(data1, function(key, value){
                $.each(value, function(key, value){
                    variety = key;

                    content = content + "<div data-role='collapsible' data-collapsed-icon='arrow-r' and data-expanded-icon='arrow-d' id='setk'><h3> " + variety + "</h3><p>"+
                    '<ul data-role="listview" id="noth">';

                    for(var i=0, len=value.length; i < len; i++){
                        grade = value[i];
                        content=content+'<li><a href="ext.html" rel="external">'+grade+'</a></li>';
                    }
                    content = content + '</ul>';
                    content = content + "</p></div>";
                });
            });
            content = content +"</p></div>";
            $("#set").append( content );//.collapsibleset('refresh');    
            $("#set").enhanceWithin();
        });   
    });             
});

Solution:

You should use .enhanceWithin(); function if you want to enhance your content correctly. Remember, you are using two different widgets but you are enhancing only one of them. This function will enhance everything added dynamically. Of course this function works only on jQuery Mobile 1.4 +. If you are using older jQuery Mobile version just tell me and I will make a necessary change.

Upvotes: 2

Related Questions