CODEWITHSUNDEEP
jqueryjquery-mobile
Juan Pablo Gomez
Juan Pablo Gomez

Reputation: 5524

dynamically modify data-filtertext in jquery filtered list

I have a filtered jquery list like this : 

<ul id="myFilteredList" data-role="listview" data-filter="true">
  <li data-theme="b"  id="Li0" data-filtertext="selected_"><a href="#">Li element 1 </a></li>
  <li data-theme="b"  id="Li1" data-filtertext="selected_"><a href="#">Li element 2 </a></li>
  <li data-theme="b"  id="Li2" data-filtertext="selected_"><a href="#">Li element 3 </a></li>
  <li data-theme="b"  id="Li3" data-filtertext="selected_"><a href="#">Li element 4 </a></li>
  <li data-theme="b"  id="Li4" data-filtertext="selected_"><a href="#">Li element 5 </a></li>
</ul>

attribute data-filtertext="selected_" can be changed programtically as this (data-filtertext="selected_ blocked_") 

<li data-theme="b"  id="Li4" data-filtertext="selected_ blocked_"><a href="#">Li element 5 </a></li>

using this code:

$('#myFilteredList').children('#Li4').attr('data-filtertext', 'selected_ blocked');
$('#myFilteredList').listview('refresh');

The problem is when I try to filter blocked elements it don´t show Li element 5, what I'm missing ?

Demo here: http://jsfiddle.net/SU6xY/

Steps to reproduce:

  1. Go to Demo.
  2. Type blocked at filter bar, the results show Lielement 2
  3. Press Alter Filter button, it changes li2 element filter to none and li4 element filter to blocked.
  4. Type again blocked at filter bar, it still shows Lielement 2 , it must show Lielement 4

It only works if the list are never filtered. If you try to filter and then apply new data-filtertext, the filter doesn't work.

Upvotes: 1

Views: 527

Answers (2)

Gajotres
Gajotres

Reputation: 57309

Lose:

$('#myFilteredList').listview('refresh');

You don't need it here, it is used to restyle a listview.

Without it it is working in my jsFiddle example: http://jsfiddle.net/Gajotres/5f3By/

If your content is added dynamically then modify data-filtertext after a listview refresh.

Upvotes: 2

Dan
Dan

Reputation: 1559

I'm not sure if this is the solution but you could perhaps try using the jQuery .data() method to change the data attribute's value?

http://api.jquery.com/data/

Upvotes: 0

Related Questions