1

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:

enter image description here

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.

enter image description here

Gajotres
  • 57,309
  • 16
  • 102
  • 130
SnareChops
  • 13,175
  • 9
  • 69
  • 91

3 Answers3

2

One thing you have to make sure : after appending all the content to your list view you will have to add the following code 

$("ul#albums-content").listview("refresh");

This is to update the styles and create any nested lists that are added.

Melvin Joseph Mani
  • 1,494
  • 15
  • 25
2

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.

Community
  • 1
  • 1
Gajotres
  • 57,309
  • 16
  • 102
  • 130
2

In the success function of your ajax call you need to call the refresh method for the listview element in order for the UI to be updated and rendered correctly.

http://jquerymobile.com/demos/1.2.0/docs/lists/lists-methods.html

Sammo
  • 71
  • 2