Jquery mobile: several data filters showing

Question

I am trying to create a listview control in jquery-mobile that has the ability for certain list items to expand and show child items. My goal is that this list can be filtered, and the jquery-mobile data-filter = "true" attribute is enough. Unfortunately, it seems to be inherited from <ul> and <ol> inside, and I get some filter controls. Is there a best practice to prevent this type of inheritance in jquery? Using jquery to remove extraneous form tags is a hack that works, but I would rather do it as designed.

Here is a quick example:

<div data-role="content"> <div class="choice_list"> <h2>Select an item</h2><br /> <ul data-role="listview" data-inset="true" data-filter="true"> <li><a>Item</a></li> <li data-role="collapsible"> <h3>Super Item</h3> <ul data-role="listview" data-inset="true"> <li><a>Sub Item</a></li> </ul> </li> </ul> </div> </div> 

Check out this JSFiddle for an example: http://jsfiddle.net/harlomic/SsJjS/3/ .

Answer 1

You can use CSS to hide two of the three filter inputs:

 /*hide all of the search filter forms*/ #test .choice_list form.ui-listview-filter { display : none; } /*show just the first search filter form*/ #test .choice_list form.ui-listview-filter:nth-child(-n+3) { display : block; } 

Here is a demo: http://jsfiddle.net/SsJjS/5/

Note that test is the identifier of the page on which the list views are found, and choice_list is the class of the container element in your list views.

Answer 2

I also ran into this issue with nested lists in JQM.

I messed it up and if you remove data-role = "listview" from your extra <ul>, which will solve your problem, however, you will lose your JQM style, and that’s not what you are looking for. We all want to have a smooth layout and style from JQM.

JQM needs to fix this, as I also feel that this could be a mistake, as I did not find anything in the docs about it.