CODEWITHSUNDEEP
jqueryajaxlistviewjquery-mobile
Pablo
Pablo

Reputation: 2854

Listview filter not filtering new items

With jQuery-Mobile, when I add new items to a listview component, they are not filtered when they should.

My html code is:

<div data-role="page" id="testPage">
  <div data-role="header">
      <h2>Test add item</h2>
  </div>
  <div data-role="content" id="content">      
    <ul data-role="listview" id="myList" data-filter="true">
      <li><h3>AAAA</h3></li>
      <li><h3>BBBB</h3></li>
      <li><h3>CCCC</h3></li>
      <li id="liBtn"><a href="#" onclick="addItem();">Add Listitem</a></li>
    </ul>
  </div>
</div>

And I have tested this:

function addItem() {
   $('#liBtn').remove();
   $('#myList').append('<li class="newItem"><h3>ZZZZ</h3></li><li id="liBtn"><a href="#" onclick="addItem();">Add Listitem</a></li>').listview('refresh');
   $('.newItem').hide().fadeIn('slow').removeClass('newItem');
}

$('#testPage').live('pageshow', function() {
    $("#myList").listview('option', 'filterCallback', 
        function( text, searchValue ) {
          var filter = text.toLowerCase().indexOf( searchValue ) === -1;
          console.log(text + ', filter:' + filter);
          return filter;
        }
    );
});

After adding some new items, when you search for a non-existing value (like 'XXXX') it indicates in the console that every element should be filtered. However, the new items are never filtered.

Anyone knows what is happening and how can I make the new items be filtered? Thanks in advance.

The example is here: http://jsfiddle.net/vuyuh/8/

Upvotes: 1

Views: 1047

Answers (1)

Kane Cohen
Kane Cohen

Reputation: 1800

jQuery function fadeIn adds "style: block;" property after it's executed, so that list element is always visible. Technically, listview should have dealt with it, but apparently it's not.

So, what you have to do is to remove style property after fadeIn on new list element happens

$('.newItem').hide().fadeIn('slow', function() {
        $(this).attr('style', null);
}).removeClass('newItem');

Updated jsfiddle: http://jsfiddle.net/vuyuh/10/

Upvotes: 3

Related Questions