title: Parsing XML correctly with jQuery but CSS does not take effect
body: <p>First time playing with jQuery Mobile but have used jQuery a little bit. was hoping for some quick advice. </p>
  
  <p>I am parsing some xml in the head and writing the data as a list in a div with &lt;li&gt; tags. The list appears there but is not formatted with the default styling from jQuery Mobile. I'm sure its something I'm doing wrong but can't figure out what I need to do to apply the style or maybe I need to get the data outside of "ready". Here's my code. </p>
  
  <p>It's gotta be something so simple that i'm missing. If I hard code in the &lt;li&gt; tags in the HTML it works fine but if I use use .append() it shows no formatting for the list. </p>
  
  <p>Would REALLY appreciate any tips you might have. </p>
  
  <pre><code>&lt;!DOCTYPE html&gt; 
  &lt;html&gt; 
      &lt;head&gt; 
      &lt;title&gt;Chart&lt;/title&gt; 
      &lt;link rel="stylesheet" href="css/jquery.mobile-1.0a2.min.css" /&gt;
      &lt;script src="js/jquery-1.4.4.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/jquery.mobile-1.0a2.min.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  
  $(document).ready(function()
  {
    $.ajax({
      type: "GET",
      url: "xml/vc-data.xml",
      dataType: "xml",
      success: function(xml){
          // build country list
          var currentCountry = "";
          var currentRegion = "";
          $("#countries").html('&lt;ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b"&gt;&lt;/ul&gt;');
          $(xml).find("charts").each(function()
          {
              var country = $(this).find('country').text();
              var region = $(this).find('region').text();
              if(currentCountry != country) {
                  //countryList += "&lt;li&gt;&lt;a href='#'&gt;" + country + "&lt;/a&gt;&lt;/li&gt;";
                  $("&lt;li data-role='list-divider'&gt;&lt;/li&gt;")
                  .html(country)
                  .appendTo("#countries ul");
              }
              if(currentRegion != region) {
              $("&lt;li&gt;&lt;/li&gt;")
                  .html("&lt;a href='#'&gt;" + region + "&lt;/a&gt;")
                  .appendTo("#countries ul");
              }
              currentCountry = country;
              currentRegion = region;
          });
      }
    });
  });
  
  &lt;/script&gt;
  &lt;/head&gt; 
  &lt;body&gt; 
  
  &lt;!-- Start of first page --&gt;
  &lt;div data-role="page"&gt;
  
      &lt;div data-role="header"&gt;
          &lt;h1&gt;Charts&lt;/h1&gt;
      &lt;/div&gt;&lt;!-- /header --&gt;
  
      &lt;div data-role="content" id="countries" &gt;   
  
      &lt;/div&gt;&lt;!-- /content --&gt;
  
  &lt;/div&gt;&lt;!-- /page --&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <hr>
  
  <p>Hey. Thanks SOOO Much for this reply. I guess I was searching with the wrong keywords cause I just couldnt find this anywhere and have been stuck the past few days. I REALLY appreciated the help here. I was just about to move on to jqTouch as an option but would love to get this working. I think I'm almost there. </p>
  
  <p>I tried adding this:</p>
  
  <pre><code> $("#countries &gt; ul").page();
  </code></pre>
  
  <p>but it didnt affect anything. </p>
  
  <p>then I added: </p>
  
  <pre><code>$("#countries div &gt; ul").page();
  </code></pre>
  
  <p>which affected the link color but didnt style the rows at all with spacing, etc.</p>
  
  <p>I then did some more digging and found this in the documentation that I missed:</p>
  
  <blockquote>
    <p>If you add items to a listview, you'll
    need to call the refresh() method on
    it to update the styles and create any
    nested lists that are added. For
    example, $('ul').listview('refresh');</p>
  </blockquote>
  
  <p>So I replaced page() with this line and it worked gloriously. </p>
  
  <pre><code>$("#countries div &gt; ul").listview('refresh');
  </code></pre>