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!

jody tate · Accepted Answer · 2011-02-15 00:36:01Z

15

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');
        }

answered Feb 15, 2011 at 0:36

jody tate

1,4061 gold badge13 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jonathan Hall · Accepted Answer · 2013-11-19 02:39:53Z

3

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

edited Nov 19, 2013 at 2:39

Jonathan Hall

80.5k19 gold badges162 silver badges206 bronze badges

answered Nov 19, 2013 at 2:17

sany

411 bronze badge

Comments

Guillaume Bois · Accepted Answer · 2011-08-31 15:04:36Z

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);}
    });
}

Miles Libbey · Accepted Answer · 2012-02-09 18:51:30Z

1

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>

edited Feb 9, 2012 at 18:51

answered Feb 9, 2012 at 17:56

Miles Libbey

1,6532 gold badges11 silver badges10 bronze badges

Comments

Spike · Accepted Answer · 2011-01-28 08:04:18Z

0

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>

answered Jan 28, 2011 at 8:04

Spike

5,1285 gold badges35 silver badges48 bronze badges

Collectives™ on Stack Overflow

jQuery Mobile .listview('refresh') not working

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related