Question

I have a listview in my jQuery page and I dynamically add content to it when data is loaded via. The ‘sometext’ is something I have downloaded after the page has first been drawn.

listString =  '<li><a href="#">'+sometext+'</a></li>';
            $("#friends_list_view ul").append(listString);

and the HTML is:

<div data-role="content" data-theme="b">

    <div id="friends_list_view" class="content-primary" data-theme="b"> 
        <ul data-role="listview" data-filter="true">
        <li><a href="#">TEST</a></li>

        </ul>
    </div>  
</div>

So originally I have no list items when the page is loaded, and then I shove them in later.
But when I do that, it doesn’t style according to my stylesheet. The control still works, i.e. the data filter is able to search properly, but the list elements just look like hyperlinks when they should look like styled buttons. The ‘TEST’ li styles properly, as expected.

How do I fix it so that it is styled properly? Or, did I do something else wrong along the way?

Sorry for my noobness 🙂

Answer 1

Check the documentation here. Check the bottom section for updating a list.

You need to do the following:

$("#friends_list_view ul").listview('refresh');