Search code examples
javascriptjquerylistviewdomjquery-mobile

jQuery mobile collapsed list view with search not working

I have created a listview in jquery with a listdivider with a filter. The filter works as expected but as soon as you collapse either of the list dividers, the search subsequently does not work at all, 

<!DOCTYPE html>
<html>
<head>

  <title>jQuery Mobile page</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="  <link rel="stylesheet" href="<%=request.getContextPath()%>/css/mobile/jquery.mobile.structure-1.3.1.min.css" /> 

  <script src="<%=request.getContextPath()%>/js/jquery-1.9.1.min.js"></script> 
  <script type="text/javascript">
    jQuery(document).bind("mobileinit", function () {
     jQuery.mobile.ajaxEnabled = false;
    });

    </script>
  <script src="<%=request.getContextPath()%>/js/mobile/jquery.mobile-1.3.1.min.js"></script> 
   <script>
   var hide=0;
   var dpwClone='';
    $(function(){
      $('[data-role="list-divider"]').click(function(element){
          $(this).nextUntil('[data-role="list-divider"]').toggle();
          $("#eServiceList").listview("refresh");
//      $(this).nextUntil('[data-role="list-divider"]').toggle();
    });

    $( "#eServiceList" ).listview( "option", "filterCallback", searchList);

    function searchList( text, searchValue, item ) {
           var result = text.toString().toLowerCase().indexOf( searchValue.toString().toLowerCase() );
           var show = false;
           var hide = true;

        if (result == -1 )
           return hide;

        return show;   
    };
   }); 
  </script>

 </head>
<body>

<div data-role="page">
    <div data-role="header">
        <h1>Problem nested list views</h1>
    </div>
    <div data-role="content">   
        <div class="content-primary">   
            <ul data-role="listview" data-inset="true" data-divider-theme="d" data-filter="true" id="eServiceList">
                <li data-role="list-divider" id="dpw" >

                        DPW
                </li>

                <li><a href="#" class="dpw">Inbox</a></li>
                <li><a href="#" class="dpw">Outbox</a></li>

                   <li data-role="list-divider" id="custo">

                        Customs
                </li>

                <li><a href="#" class="custo">Friends</a></li>
                <li><a href="#" class="custo">Work</a></li>
            </ul>
        </div>
</div>
</div>
<script>

</script>

</body>
</html>

Below is the JSfiddle link.

http://jsfiddle.net/jsfiddle_one/R8pZH/

Solution

  • Using .toggle() adds to the element an inline style attribute style="display: none;" or style="display: block;". List items are already enhanced with display: block; by jQuery Mobile. Hence, when using .toggle() - when it is visible again - the element will get display: block; twice, inline and in CSS style sheet.

    To overcome this problem, use .toggleClass() classes rather than inline styling. I fixed your problem by adding a class

    .hide { display: none !important; }

    and I used it with .toggleClass('hide');

    New code

    Using custom CSS classes to override existing CSS is safer, and keep in mind that for jQuery Mobile, it's better to end each property with !important to force override.