Dynamic bootstrap List not showing nested list

Question

The following code will display a list of ReportGroups but will not display the list items under each ReportGroup when it is selected.

    type: "POST",
    url: "wsReports.asmx/GetReports",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (list) {
        var text = '';
        text += "<ul id='newList' class='nav navbar-nav side-nav' data-toggle='dropdown'>";
        $.each(list.d, function () {
            text += "<li><a href='#'>" + this.ReportGroup + "</a>";   
            text += "<ul id='rptList' class='collapse'>"
            $.each(this.Reports, function () {
                text += "<li><a href='#'>" + this.ReportName + "</a></li>";
            });  // end of each rptList
            text += "</ul></li>";
        });    // end of each newList
        text += "</ul>";

        $('#divSideBar').append(text);

    },   //end of success

If I make the class = collapse.in in the rptList then I can see the list but the ReportGroups will not collapse.

What type of data is being returned? [Are you encoding your data?](http://stackoverflow.com/questions/1219860/html-encoding-in-javascript-jquery) If not a quotation mark or special character could be messing up the output. Anyway you could reproduce the issue in a [JS.Fiddle](https://jsfiddle.net)? — crazymatt, May 17 '16 at 18:05

score 0 · Answer 1 · answered May 18 '16 at 17:38

I was not correctly displaying the html to create the dropdowms.

        type: "POST",
    url: "wsReports.asmx/GetReports",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (list) {
        // http://tutorialspalace.com/bootstrap-navbar/
        // how to add the classes to the list.
        var text = '';
        text += "<ul id='newList' class='nav navbar-nav side-nav'>";
        $.each(list.d, function () {
            text += "<li class='dropdown'><a href='#' class='dropdown-toggle' data-toggle='dropdown'>" + this.ReportGroup + "<b class='caret'></b></a>";
            text += "<ul id='rptList' class='dropdown-menu'>"
            $.each(this.Reports, function () {
                text += "<li><a href='#'  onclick='GetReport(" + this.ReportID +")'>" + this.ReportName + "</a></li>";
            });  // end of each rptList
            text += "</ul></li>";
        });    // end of each newList
        text += "</ul>";

        $('#divSideBar').append(text);

    },   //end of success

Dynamic bootstrap List not showing nested list

1 Answers1