title: jQuery Mobile - Manipulating the DOM - Refreshing a page
body: <p>This whole jQuery mobile dynamic data (pulling data from the server) is driving me nuts. Why should it be this difficult to manipulate the DOM and the refresh the page?</p>
  
  <p>I have my page:</p>
  
  <pre><code>&lt;div data-role="page" id="intranet-holidays" data-title="HOLIDAYS" data-add-back-btn="true"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>In document.ready I have the following:</p>
  
  <pre><code>$( document ).delegate( "#intranet-holidays", "pagebeforecreate", function() {
     $('body').addClass('ui-loading');
     $.mobile.loadingMessage = "Loading Holidays...";
     $.mobile.showPageLoadingMsg();
     // calls getJSON to retrieve data from the web server
     loadHolidays();
  });
  </code></pre>
  
  <p>When my data returns back from the server I add collapsible DIVs into my page (intranet-holidays). </p>
  
  <p>Inside of the collapsible DIVs I have some ULs.</p>
  
  <p>I know my syntax is correct because I can grab the generated HTML, save it to a file, then display that file and it all shows correctly. Here is a screen shot:</p>
  
  <p><img src="https://i.stack.imgur.com/tTJ1M.jpg" alt="enter image description here"></p>
  
  <p>Here is what my dynamically loaded page looks like (not what I want):</p>
  
  <p><img src="https://i.stack.imgur.com/pRWw9.jpg" alt="enter image description here"></p>
  
  <p>I know that I can refresh a listview with the following:</p>
  
  <pre><code>$('#list').listview('refresh');
  </code></pre>
  
  <p>That works great for a list.</p>
  
  <p><strong>How do I refresh the page (that contains collapsible DIVs and those collapsible DIVs contains ULs)?</strong></p>
  
  <p>Yes, I want all the data in the page to be dynamic.</p>