Not able to get .listview('refresh') and .trigger( “updatelayout”) working

Question

I'm using Ajax to retrieve data and populate my list. But I'm not able to get jQuery Mobile to add the classes needed to style my list, or refresh the list if I do a new search (old results is still in list).

I've found plenty of similar Q/A's here on Stack, but none of the solutions work. I've not implemented the entire solution found over at jQuery Mobile , but I believe this should work anyway?

Am I building the list wrong? I have a fiddle here

// HTML
<ul id="brandList" class="front" data-role="listview" data-inset="true"></ul>

// JS
var el = Part.mainSearchResult();

$(response.brands).each(function(){
    var brand = $(this)[0];
    var url = '/brand?id=' + brand.id;
    var li = $(el.brand).clone();

    $(li).find('a').prop('href',url);
    $(li).find('a').text(brand.name);
    $('#brandList').append(li);
});

$('#brandList').listview('refresh');
$('#brandList').trigger( "updatelayout");

Answer 1

The code in your Fiddle had a mistake, you had the UL in the CSS section.

Was in the CSS Section, not HTML:

<ul id="mylist" class="front" data-role="listview" data-inset="true"></ul>

Seems to be working and is adding the classes to the UL.

Updated JS Fiddle

EDIT:

You need to call $('#mylist').listview( "refresh" ); inside the test function

NEW FIDDLE