Jquery Mobile: How to style dynamically added list items when listview() function does not work?

Question

I am new with jQuery Mobile and with jQuery in general and have run into a problem. I have been populated a list using 2 AJAX calls (data from two sources). The second call is located within the first so that it always executed after it. The calls are identical apart from the source of data and are as follows:

HTML:

<ul data-role="listview" data-inset="true" data-theme="a" data-filter="true" id="allVideosList">  
    <li><a href="#">This item is styled properly</a></li>
</ul>

JavaScript:

var html = ""; 
var id = 0; 
var displayName = "name";
$.ajax({
    type:'GET',
    url: xxxx
    data: xxxx
    dataType: 'jsonp',
    success: function processResult(data) {
      ....
      html += '<li data-filtertext="' + resultData.name + ' ' + date + '"><a href="index.html?id=' + id + '">' + displayName + '</a></li>';
      $('#allVideosList').append(html);
});

Variables are defined within the ajax call but omitted here. The list created lacks any style, each item appears as a link. The function:

$('#allVideosList').listview('refresh');

or

$('#allVideosList').listview();

returns the error

$(...).listview is not a function

in the console. The function:

$('#allVideosList').trigger('create');

does not change anything.

If I print the variable html to the console, copy its contents, and add this to a list in a different page, style is applied properly. For example:

HTML:

<div data-role="content" id="list">
    <ul data-role="listview" data-inset="true" data-theme="a" data-filter="true" id="allVideosList">

    </ul>

JAVASCRIPT:

var html = "";
html = '<li data-filtertext="insert text here"><a href="index.html?id=146">Name</a></li><li data-filtertext="insert text here 2"><a href="index.html?id=147">Name 2</a></li>'
$("#allVideosList").append(html) 

works fine. How can I apply a style to the dynamically loaded list?

Answer 1

I do something very similar in one of my projects. I had similar trouble but this is the code that currently works for me...

$("#myList").append(myjsonobject.someListItems).listview("refresh");

As you can see, you can add the listview function call in the same line as your append call. Without more of your code, it's hard to tell if this will resolve your issue.