Question

I am developing a PhoneGap app with jQueryMobile. My problem is the listview is not displaying correctly on the albums page, but is on the home page. I am using the same data-theme for both.

Question: Why is the listview on the second page not displaying correctly (background, font, icon)?

Research:

1. jQueryMobile documentation on thumbnail listviews (what I’m trying to accomplish)
2. jQueryMobile documentation on listview api
3. Google searched and found a tutorial on how to do this (no change)

Code for album page

    <div data-role="page" id="albums" data-url="albums" data-theme="a">
        <div data-role="header">
            <a href="#home" data-role="button" data-corners="true" data-shadow="true">Back</a>
            <h1>Albums</h1>
            <button id="albums-refresh">Refresh</button>
        </div>
        <div data-role="content">
            <ul id="albums-content" data-role="listview" data-inset="true"></ul>
        </div>
    </div>

jQuery function to dynamically populate the listview

Load: function () {
    $("#albums-content").empty();
    $.ajax({type: "GET", url: "https://itunes.apple.com/lookup?id=356541460&entity=album", data: {get_param: "results"}, dataType: "json", success: function (data) {$.each(data, function (index, element) {$.each(this, function (index, element) {if (element.wrapperType === "collection") {$("#albums-content").append("<li><a id='a-" + index + "' href='#album-details'><img src='" + element.artworkUrl100 + "' />" + element.collectionName + "</a>"); $("#a-" + index).bind('click', function (index) {Albums.AlbumID = index; }); }}); }); }});
}

PhoneGap Debug:

Album page Note that the purple background and orange text is not there, though you can see a faint hint of the listview drop shadow below the second album.

Answer 1

There’s an easy solution for this problem (next time look further into jQM documentation).

When object is dynamically created in the jQuery Mobile listview its markup also needs to be enhanced like this:

$('#some-listview').listview('refresh');

Basically every time dynamic content is added to jQuery Mobile page it needs to be manually enhanced. If you want to find more about this topic please take a look at my blog ARTICLE. Or you can find it HERE.