CODEWITHSUNDEEP
jquery-mobile
Christopher
Christopher

Reputation: 453

JQuery Mobile listview lose search filter functionality after ajax call

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?

Upvotes: 1

Views: 2125

Answers (1)

Christopher
Christopher

Reputation: 453

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

Upvotes: 1

Related Questions