collapsible list with collapsed items in jqm

Question

I want to dynamically create a list with collapsed items. if you expand an item you get several collapsed items which you can expand.

Here is what I have so far:

function loadTipps() {
    var categoriesURL = tippsURL+"?type=kategorien&callback=?"; // url for the categories
    $.getJSON(categoriesURL,function(data) {
        var collapsibleSet = $("#tippsDIV"); //div for the list of tipps
        $.each(data, function(key,value){

            //
            var tippListID = "tippslist"+value.id; // name for the current list
            var tippListIDdiv = "tippslistdiv"+value.id; // name for the current collapsible div

            //
            var collapsible = $('<div id="'+tippListIDdiv+'" data-role="collapsible"></div>');
            collapsible.append('<h2>'+value.name+'</h2>');

            var list = $('<ul id="'+tippListID+'" data-role="listview" data-filter-theme="c" data-divider-theme="d"></ul>');

            var tippURL = tippsURL+"?type=tipp&kat_id="+value.id+"&callback=?"; // url for the tipps of the current category
            $.getJSON(tippURL,function(data2) {
                $.each(data2, function(key2,value2){
                    //
                    var collapsible2 = $('<div id=data-role="collapsible">'+value2.text+'</div>');
                    var list2 = $('<li>'+value2.name+'</li>');
                    list2.append(collapsible2);

                    list.append(list2);
                    list.listview("refresh");
                });
            });

            collapsible.append(list);
            collapsibleSet.append(collapsible);
            collapsibleSet.trigger('create');
        });
    });

}

But this does not work as expected. I get the "first" list correct with collapsed items. But if I expand one of them I don't get another list with collapsed items. They behave just like a normal list item :/

Any ideas?

you call ajax on expanding a collapsible? – Omar Nov 12 '13 at 16:05 — Omar, Nov 12 '13 at 16:05

score 0 · Answer 1 · answered Nov 12 '13 at 19:28

The line:

var collapsible2 = $('<div id=data-role="collapsible">'+value2.text+'</div>');

has a problem with the id not being set correctly.

You can remove the list.listview("refresh"); line as the final collapsibleSet.trigger('create'); takes care of this.

For collapsible2, i think you need to append the H2 element:

var collapsible2 = $('<div id=data-role="collapsible">'+value2.text+'</div>');
collapsible2.append('<h2>'+value2.name+'</h2>');
var list2 = $('<li></li>');
list2.append(collapsible2);

You don't seem to be putting any list items into the inner collapsible...

collapsible list with collapsed items in jqm

1 Answers1