jQuery Mobile - listview() with data-filter=“true” and ajax content

问题

This is my html:

<ul data-role="list-view" data-filter="true"></ul>

My JS loads the ul with data and then I call listview().

$('#page').live('pagebeforecreate', function(){
        // My Ajax code
    });
    $('#page').live("pageinit", function(){
        $('#page ul').listview();
    });

That works except the search bar at the top doesn't appear. What am I missing?

回答1:

You have

data-role="list-view"

When the right way is

data-role="listview"

that is why the search bar at the top doesn't appear.

回答2:

I think you need to use $('#page ul').listview('refresh'); instead of just $('#page ul').listview();. You need to refresh a jQuery-Mobile component when you update it via Ajax.

回答3:

You'd have to call:

$('#page ul').listview('create');

after you are done populating your list with jscript.

To refresh it's content (only after it's creation), you could call:

$('#page ul').listview('refresh');

see jqm documentation

回答4:

Instead of calling $('#page').live("pageinit", function(){ $('#page ul').listview(); });

Do the following:

  $('#page').live("pageinit", function(){
    init();
    });


<ul id="mylist" data-role="listview" data-theme="b" data-filter="true" >

</ul>

function init()
{
    type: "GET",
   $.ajax({
     url: "BirthdayInvitations.xml",
    dataType: "xml",
    success: function ParseXml(xml)
    {
         $(xml).find("event").each(function() {  
     $("#mylist").append('<li><a href="' + "#" + '">' +this.textContent + '</a></li>');
     }); 
     $("#mylist").listview('refresh');   
     }}); 

   }

This is working i tried it out and i am using in my application.

来源：https://stackoverflow.com/questions/8306645/jquery-mobile-listview-with-data-filter-true-and-ajax-content

标签

ajax

jquery

jquery-mobile