title: JQuery Mobile Dynamic Listview Filter Not Showing
body: <p>I am new to jquery mobile and have somehow figured out how to successfully create a homepage and now a sub-page (labeled as "bible_studies") along with a <strong>list created dynamically through AJAX.</strong></p>
  
  <p>The list looks great and everything is working except for one thing... the filter is not showing up at all, even though I have data-filter set to true.  I have tried so many things I can't even see straight...  can anyone assist?</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Tetelestai Church Mobile | Home&lt;/title&gt;    
  &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" /&gt;
  &lt;link href="styles/mobile.css" rel="stylesheet" type="text/css" /&gt;
  &lt;script src="http://code.jquery.com/jquery-1.4.3.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"&gt;&lt;/script&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"&gt;
  &lt;style&gt;
      .ui-li-thumb, .ui-li-icon {
          left: 1px;
          max-height: 125px; 
          max-width: 125px;
          position: absolute;
          top: 0;
      }
      #wrap{margin-left:50px;}
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body id="home"&gt;
  
  &lt;!-- Start of first page --&gt;
  &lt;div data-role="page" id="home"&gt; 
  
  &lt;h2 id="banner"&gt;Tetelestai Church Mobile&lt;/h2&gt;
  &lt;div data-role="content"&gt;   
      &lt;ul data-role="listview" data-inset="true"&gt;
          &lt;li&gt;&lt;a href="#bible_studies"&gt;&lt;img src="../images/star.png" alt="Bible Studies" class="ui-li-icon"&gt;Bible Studies&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#events"&gt;&lt;img src="../images/events.png" alt="Events" class="ui-li-icon"&gt;Events&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#news"&gt;&lt;img src="../images/news.png" alt="Announcements" class="ui-li-icon"&gt;Announcements&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#map"&gt;&lt;img src="../images/map.png" alt="Times And Directions" class="ui-li-icon"&gt;Directions&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#contact"&gt;&lt;img src="../images/contact.png" alt="Contact Us" class="ui-li-icon"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  
  
  
      &lt;ul data-role="listview" data-inset="true" data-theme="e"&gt;
          &lt;li&gt;
              &lt;a href="http://www.tetelestai.org" data-ajax="false" rel="external"&gt;&lt;img src="../images/full_screen.png" alt="Full Site" class="ui-li-icon"&gt;Full Site&lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
      &lt;/p&gt;
  &lt;/div&gt;&lt;!-- /content --&gt;
  
  &lt;/div&gt;&lt;!-- /page --&gt;
  
  &lt;div data-role="page" id="bible_studies"&gt;
  &lt;header data-role="header" data-theme="b"&gt;
      &lt;h1&gt;Tetelestai Bible Studies&lt;/h1&gt;
  &lt;/header&gt;
  &lt;article data-role="content" id="bs"&gt;
  &lt;/article&gt;
  
  &lt;/div&gt;
  
   &lt;script type="text/javascript"&gt;
  
  //On document ready
  $(document).ready(function(){
  
      //-----------------------------------------------------------------------
      // 2) Send a http request with AJAX http://api.jquery.com/jQuery.ajax/
      //-----------------------------------------------------------------------
      $.ajax({                                      
          url: "../data/series.php",                  //the script to call to get data          
          data: "",                        //you can insert url argumnets here to pass
                                         //for example "id=5&amp;parent=6"
          dataType: 'json',                //data format      
          success: function(data)          //on recieve of reply
          {
  
              //--------------------------------------------------------------------
              // 3) Update html content
              //--------------------------------------------------------------------
              var list = $('&lt;ul data-role="listview"  data-filter="true" id="series"/&gt;');
  
              //Loop through each series
              $.each(data, function(key, val) {
  
                  //Create list item
                  $('&lt;li&gt;&lt;a href="#'+val.series+'"&gt;&lt;img src="../assets/video/'+val.series+'/mobile_list_image.jpg" alt="'+val.name+'" /&gt;&lt;div id="wrap"&gt;&lt;h1&gt;'+val.name+'&lt;/h1&gt;&lt;p&gt;'+val.description+'&lt;/p&gt;&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;').appendTo(list);
  
              })
  
              //Add list
              list.listview();
              list.appendTo('#bs');
  
          }
      });
  });
  </code></pre>
  
  <p></p>
  
  <p>
  </p>