dynamically modify data-filtertext in jquery filtered list

Question

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:

Go to Demo.
Type blocked at filter bar, the results show Lielement 2
Press Alter Filter button, it changes li2 element filter to none and li4 element filter to blocked.
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.

I don't know about your code, but in your question that's what you're missing: the jQuery. Can you show us what you're doing? — David Thomas
– David Thomas, Commented Dec 15, 2012 at 15:43

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

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.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Dec 15, 2012 at 15:52

Gajotres

57.3k16 gold badges106 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Juan Pablo Gomez Over a year ago

Tks, do you know why this happens?. If add some new elements to the list ('refresh') is not neccesary ?

Gajotres Over a year ago

You need to refresh after adding a new element, but change li attribute data-filtertext after a listview refresh.

Juan Pablo Gomez Over a year ago

Just an issue, it only works if none filter was applyed before the data-filtertext is changed?.. any other ideas ?

Dan · Accepted Answer · 2012-12-15 15:43:30Z

0

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/

answered Dec 15, 2012 at 15:43

Dan

1,5591 gold badge15 silver badges18 bronze badges

1 Comment

Juan Pablo Gomez Over a year ago

Tks for your help, but reading the api docs, it cant't help with my problem.

Collectives™ on Stack Overflow

dynamically modify data-filtertext in jquery filtered list

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related