title: Refresh jQuery mobile listview after ajax
body: <p>I am trying to refresh a jQuery mobile list view after an ajax post, I have been trying to use the .trigger("create") to do this like so:</p>
  
  <pre><code>&lt;div data-role="content"&gt;
  
  
  &lt;div id="linksHolder" data-role="controlgroup" data-type="horizontal"&gt;
      &lt;a id="most-played" href="#" data-role="button" data-mode="mostplayed"&gt;Most Played&lt;/a&gt;
      &lt;a id="latest-added" href="#" data-role="button" data-mode="latestadded"&gt;Latest Added&lt;/a&gt;
      &lt;a id="featured" href="#" data-role="button" data-mode="featured"&gt;Featured&lt;/a&gt;
  &lt;/div&gt;
  
  @Html.HiddenFor(model =&gt; model.Mode)
  &lt;ul class="video-list" data-role="listview" data-divider-theme="a" data-inset="true"&gt;&lt;/ul&gt;
  
  &lt;/div&gt;&lt;!-- /content --&gt;
  
  
  &lt;script class="videoTemplate" type="text/x-jQuery-tmpl"&gt; 
      &lt;li data-theme="c"&gt;
          &lt;a href="${LinkToVideo}"&gt;
              &lt;img src="${ThumbnailPath}" alt="video 1" /&gt;
              &lt;div class="title"&gt;${Title}&lt;/div&gt;
              &lt;div class="description"&gt;${Description}&lt;/div&gt;
              &lt;div class="additional-details"&gt;
                  &lt;b&gt;Category:&lt;/b&gt; ${Category}&lt;br /&gt;
                  &lt;b&gt;Contributor:&lt;/b&gt; ${Contributor}
              &lt;/div&gt;
          &lt;/a&gt;
      &lt;/li&gt;  
  &lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
      DrawPageContent();
  
      // function to redraw the page content with the mode passed
      $(document).on("click", "#linksHolder a", function () {
              //alert("Inside link");
              var mode = $(this).attr("data-mode");
              $("#Mode").val(mode);
              DrawPageContent();
      });
  
      // Renders the JSON data into HTML and displayed through a jQuery template
      function DrawPageContent() {
          var mode = $("#Mode").val();
          var jsonUrl = "/mobile/GetVideos?mode=" + mode;
  
          $.ajax({
              'async': false,
              'global': false,
              'url': jsonUrl,
              'dataType': "json",
              'success': function (data) {
                  // Render the videos using the template
                  $(".video-list").html($(".videoTemplate").tmpl(data));
                  $(".video-list").trigger("create");
              }
          });
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>I also tried using $('.video-list').listview('refresh'); but this didn't work either. It is refreshing the JSON data fine, but it is not applying the jquery mobile CSS classes, thus I am losing the listview styles. Any thoughts??</p>
  
  <p>Thanks</p>