CODEWITHSUNDEEP
ajaxjqueryjquery-mobile
Amir
Amir

Reputation: 2277

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?

Upvotes: 0

Views: 8177

Answers (4)

shyamshyre
shyamshyre

Reputation: 549

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.

Upvotes: 0

Pablo
Pablo

Reputation: 56

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.

Upvotes: 4

Leon
Leon

Reputation: 4532

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

Upvotes: 0

Pablo
Pablo

Reputation: 2854

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.

Upvotes: 0

Related Questions