Question

I have a list like this

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

it looks good on startup and get a nice (working filter/search-bar).

But then I add some rows (li) to the list with an ajax call.

 $('#list').append('<li>item</li>');

Then I reload the list to get it to rerender the list with the nice JQM UI.

$("#list").listview();

My problem is that after this the filter/searchbar stops working.
(It is stil displayed but it is not filtering).

I have tried to add the whole list in the callback (putting a in the html and then readding the whole list (append(‘

Any suggestions on how to hook the search function back on again?

Answer 1

I found the solution here: jQuery Mobile – listview() with data-filter="true" and ajax content

First of all I had for some reason data-role=”list-view” instead of data-role=”listview”.

The second thing I changed was that I removed the document.ready() method and replaced it with two methods:

$(document).live( 'pagebeforecreate',function(event){
    // append stuff to UL
});
$(document).live("pageinit", function(){
    $('#list').listview();
});