How to make list in jQuery mobile nested list?

Question

Can you please tell me how to make list in jQuery mobile? I am trying to make this type list as given in fiddle on pop up screen dynamically .

Here is the fiddle

In this fiddle I make two rows.In first row there is only p tag. But in second row there is nested collapsible rows. I need to make same thing in pop up screen. I am able to make first row. But In my second row contend is null why? Can you suggest where I am wrong?

fiddle

 $(function () {

        $('#test').click(function(){
            alert('d');
            createCommandPopUpTabs();
            $("#tabbedPopup").popup("open");


        });
    });
    var tabsHeader = [ "InputParameter", "basic"];
    var tabsHeader_basic = [  "XYZ", "Third Level",
         ];

    function createCommandPopUpTabs(){
        var header = "<h3 >dd</h3>";
        var commmand = 'dd';
        var button = '<button onclick="return submitCommand(&quot;'+
                '&quot;)" style="" class="donebtn common-button1">Save</button>';
        $("#commandInfo").append(button);

        $("#commandInfoheader").html(header);
        for ( var i = 0; i < tabsHeader.length; i++) {
            var headerId = tabsHeader[i] + "_tab" + commmand;
            var header = "<div data-role='collapsible' data-collapsed='false' id='"
                    + headerId + "'><h3>InputParameter</h3></div>";
            var content ;
            if(tabsHeader[i]=="InputParameter"){
                content = "<p>yes</p>";
            }else  if(tabsHeader[i]=="basic"){
                for ( var i = 0; i < tabsHeader_basic.length; i++) {
                    headerId = tabsHeader_basic[i] + "_tab" + commmand;
                    header = "<div data-role='collapsible' data-collapsed='false' id='"
                            + headerId + "'><h3>basic</h3></div>";
                    content += getcontend(tabsHeader_basic[i]);



                }
            }

            $("#tabbedSet").append(header);
            $("#tabbedSet").find("#" + headerId).append(content);
            $("#tabbedSet").collapsibleset("refresh");

        }
    }

        function getcontend(name){
            if(name=="Third Level"){
                return"<p>Third Level></p>";
            } if(name=="XYZ"){
                return"<p> second Level></p>";
            }
        }

Archon · Accepted Answer · 2014-07-26 07:43:32Z

1

There are errors in your code and logic. I will only go over a couple of them to hopefully get you on the right path:

In tabsHeader_basic array the Third Level has a space in it which you later use as an ID which makes it an invalid ID because you cannot have spaces in an ID.

From the HTML 5 Draft:
The value must not contain any space characters.

Also, the "basic" collapsible div needs to exist before you start adding the nested collapsible div. So this line needs to come out of the for loop
header = "<div data-role='collapsible' data-collapsed='false' id='"+ headerId + "'><h3>basic</h3></div>";

Go through the JSFiddle and compare your code agaisnt my changes.

Hopefully that helps! Let me know if you have any other questions.

answered Jul 26, 2014 at 7:43

Archon

1829 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Pallavi Sharma Over a year ago

great answer can you please tell why all row display with expand ?

Pallavi Sharma Over a year ago

mean "xyz", third lvel and basic all rows are expanded..!!

Archon Over a year ago

It's because of the data-collapsed='false' property on the divs. change them to data-collapsed='true'

Siva.G ツ · Accepted Answer · 2014-07-26 10:10:47Z

I have updated createCommandPopUpTabs() function.

Also removed space in Third Level on var tabsHeader_basic = ["XYZ", "ThirdLevel"]; Check the Updated Fiddle

function createCommandPopUpTabs() {
    var header = "<h3 >dd</h3>";
    var commmand = 'dd';
    var button = '<button onclick="return submitCommand(&quot;' +
            '&quot;)" style="" class="donebtn common-button1">Save</button>';
    $("#commandInfo").html(button);

    $("#commandInfoheader").html(header);
    $("#tabbedSet").html('');
    for (var i = 0; i < tabsHeader.length; i++) {
        var headerId = tabsHeader[i] + "_tab" + commmand;
        var header = "<div data-role='collapsible' data-collapsed='true' id='" + headerId + "'><h3>" + tabsHeader[i] + "</h3></div>";
        $("#tabbedSet").append(header);
        var content;
        if (tabsHeader[i] == "InputParameter") {
            content = "<p>yes</p>";
            $("#tabbedSet").find("#" + headerId).append(content);
        } else if (tabsHeader[i] == "basic") {
            for (var j = 0; j < tabsHeader_basic.length; j++) {
                var headerId1 = tabsHeader_basic[j] + "_tab" + commmand;
                var header1 = "<div data-role='collapsible' data-collapsed='true' id='" + headerId1 + "'><h3>" + tabsHeader_basic[j] + "</h3></div>";
                var content1 = getcontend(tabsHeader_basic[j]);
                $("#tabbedSet").find("#" + headerId).append(header1);
                $("#tabbedSet").find("#" + headerId1).append(content1);
            }
        }
        $("#tabbedSet").collapsibleset("refresh");
    }
}

Collectives™ on Stack Overflow

How to make list in jQuery mobile nested list?

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related