CODEWITHSUNDEEP
listviewjquery-mobilefilter
mary
mary

Reputation: 174

jquery mobile listview refresh doesn't refilter jqm 1.4

I have a listview using the data-input property to provide a filter. After I dynamically change the listview, I call listview refresh. Even though there is still text in the filter input, the filter is not applied. You can see the problem in this fiddle:

http://jsfiddle.net/7Pqe9/3/

Here is the html that sets it up:

<div id="aPage" data-role="page">
    <div data-role="content">
        <form>
            <input data-type="search" type="text" id="aFilter" />
        </form>
        <ul id="aList" data-role="listview" data-filter="true" data-input="#aFilter">
            <li>aaa</li><li>bbb</li>
        </ul>
        <a data-role='button' href='#bpage'>test</a>
    </div>
</div>
<div data-role='page' id='bpage'>
    <div data-role="header">
        <a data-rel="back" data-role="button">Back</a>
    </div>
</div>

Here is the dynamic load and refresh that runs when you return to the page:

$(document).on('pagebeforeshow', '#aPage', function() {
    $('#aList li').remove();
    $('#aList').append($("<li>").append('aaa'));
    $('#aList').append($("<li>").append('bbc'));
    $("#aList").listview('refresh');
});

Filter, then click the test button, then go back and you'll see that the filter doesn't work. I've tried triggering a change function on the filter, but that doesn't work either. Any ideas how I can get the listview to filter again based on the input?

Upvotes: 1

Views: 1226

Answers (1)

mary
mary

Reputation: 174

Omar's last comment above worked. I didn't realize there was a separate widget that I should call refresh on.

$("#aList").filterable("refresh");

That keeps the existing filter and refreshes the list to reflect the results of the filter.

Thanks.

Upvotes: 1

Related Questions