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

Answer 1

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

Answer 2

My solution was to use no parameters in the listview method as in

<div data-role="page" id="playlist">
    <div data-role="header">
        <h1>my playlist</h1>
        <a href="index.html" data-icon="arrow-l">Back</a>
    </div>
    <div data-role="content"></div>
</div>

end then..

$('#playlist').bind('pageshow', function () {
    doOnCallBack = function(){
        $('#playlist').find('[data-role="listview"]').listview();
    }
    ajaxGet('${genSecureLink(action:'updatePlaylistTemplate',controller:'ajaxActionsPd',absolute:'true')}',$('#playlist').find('[data-role="content"]'),doOnCallBack);
});

here is my function ajaxGet:

function ajaxGet(url,target,doOnCallBack){
    $.ajax({
        url: url,
        error:function(x,e){handleAjaxError(x,e);},
        beforeSend:function(){$.mobile.showPageLoadingMsg();},
        complete:function(){$.mobile.hidePageLoadingMsg();doOnCallBack();},
        success:function(data, textStatus, jqXHR){target.html(data);}
    });
}

Answer 3

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 4

Spike's answer worked for me -- I was targeting the ul's parent div. I also needed to bind the ajax function to pagecreate -- that is:

<div data-role="page" data-theme="b" id="my-page">
    <div data-role="header">
        <h1>Podcast List</h1>
    </div>
    <div data-role="content">
        <ul id="podcastList" data-role="listview">
        </ul>
    </div>
</div>
<script>
$('#mypage').bind('pagecreate',function(){
  // instead of $(window).load(function(){
        $.ajax({
            type: "GET",
            url: "podcast.xml",
            dataType: "xml",
            async: false,
            success: parseXml
            complete: function() {
               $('#podcastList').listview('refresh');
            } 
        });
 });
</script>

Answer 5

Your code looks good to me... Looks almost exactly like what I have in my app.

Maybe the problem lies in your HTML? It should look something like:

<div data-role="page" data-theme="b" id="my-page">
    <div data-role="header">
        <h1>Podcast List</h1>
    </div>
    <div data-role="content">
        <ul id="podcastList" data-role="listview">
        </ul>
    </div>
</div>