Question

I’m pulling JSON data fromlocalstorage and using grep to filter out the items needed based on a selected ID. I then take the filtered set and convert it ti “LI” items then append them to a UL container. The UL container has the data-inset attribute set to yes. When I apply listview(“refresh”) to the “UL” the inset look and feel is not applied (rounded corners on first and last items.

Here’s my code:

    var categoryId = 1;                 
    var data = JSON.parse(... data from localstorage...);

    //FILTER OUT DATA FOR THE SELECTED CATEGORY
    data = $.grep(data, function(el, i) 
    { 
        if (el.CategoryId == categoryId)
            return el;
    });

    //BUILD LI ELEMENTS FROM FILTERED LIST
    var categoryListItems = [];
    $.each(data, function(i, item) 
    {
        categoryListItems.push('<li data-category-id="' + item.CategoryId + '" data-id="' + item.ListId + '">' + item.ListName + '</li>');
    });

    $('ul#CategoryList li').remove();
    $('ul#CategoryList').append(categoryListItems.join('')).listview("refresh");

Looking at the resulting HTML, the CSS classes “ui-corner-top” and “ui-corner-bottom” are not getting applied after the refresh. These are the classes that round the corners on the first and last li element for the inset look and feel.

Any ideas as to why these classes are not getting applied?

Answer 1

Try to use this

$('ul#CategoryList').append(categoryListItems.join('')).listview("refresh", true);