jQuery Mobile .listview('refresh') not working

Question

I'm building a mobile web app with jQuery Mobile and I have a problem. I am using jQuery to parse an XML file and create list items. It builds the list, then apppends that list of <li>s to the <ul> on the page. I read that in order to get the list to be styled correctly you have to call .listview('refresh') after you append the data to refresh the list so that jQuery Mobile can set correct styling to the list.

My problem is that the list never refreshes. It keeps getting styled incorrectly. Am I doing something wrong? Is my code correct? FYI, I have tried all kinds of variations of .listview(), .listview('refresh'), etc.

CODE:

<script type="text/javascript">
  $(window).load(function() {
    $.ajax({
      type: "GET",
      url: "podcast.xml",
      dataType: "xml",
      async: false,
      success: parseXml
    });
  });

  function parseXml(xml) {
    var podcastList = "";
    $(xml).find("item").each(function() {
      podcastList += "<li class='ui-li-has-thumb ui-btn ui-btn-icon-right ui-li ui-btn-up-c' role='option' data-theme='c'><img src='" + $(this).find("itunes\\:image").attr("href") + "' class='ui-li-thumb'><h3 class='ui-li-heading'><a href='" + $(this).find("enclosure").attr("url") + "' class='ui-link-inherit'>" + $(this).find("title").text() + "</a></h3><p class='ui-li-desc'>" + $(this).find("itunes\\:subtitle").text() + "</p></li>";
    });
    $("#podcastList").append(podcastList);
    $("#podcastList").listview('refresh');
  }
</script>

Thanks!

Answer 1

I ran into this problem with code looking similar to yours. My solution was to place the refresh into the $.ajax "complete" option.

        complete: function() {
            $('#list-id').listview('refresh');
        } 

Answer 2

$("#podcastList").trigger("create");