title: Load each clicked post into a page
body: <p>I have the following code working but would like when I click on each posts, the post content to be displayed using either an external .html or within the default html a div page so that the content does not show the whole website contents:</p>
  
  <p>HTML Code:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Hope&lt;/title&gt;
  
      &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" /&gt;
  
     &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt;
  
      &lt;script src="css/style.css"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" /&gt;
      &lt;script src="http://code.jquery.com/jquery-1.9.1.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/script.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;div id="devotionpage" data-role="page"&gt;
      &lt;div data-role="header" class="sys_hd" data-position="fixed" data-id="sys_header" data-theme="c" &gt;
          &lt;h1&gt;Daily Devotional Messages&lt;/h1&gt;
          &lt;/div&gt;&lt;!-- header --&gt;
  
          &lt;div data-theme="c" data-role="content" id="devotionlist"&gt; &lt;/div&gt;&lt;!-- content --&gt;
  
          &lt;div data-role="footer" data-position="fixed" data-id="sys_footer" data-theme="c"&gt;
                      &lt;div data-role="navbar" &gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="#devotionpage" class="sys_ft"&gt;Home&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#devotionpage" class="sys_ft"&gt;Disclaimer&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;&lt;!-- navbar --&gt; 
          &lt;/div&gt;&lt;!-- footer --&gt; 
      &lt;/div&gt;&lt;!-- page --&gt;
  
  
      &lt;div id="articlepost" data-role="page" data-transition="fade"&gt;
      &lt;div data-role="header" class="devotion_hd" data-position="fixed" data-theme="c" &gt;
  
          &lt;div data-theme="c" data-role="content" id="articlecontent"&gt; &lt;/div&gt;&lt;!-- content --&gt;
  
          &lt;div data-role="footer" data-position="fixed" data-id="sys_footer" &gt;
                      &lt;div data-role="navbar" &gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="#devotionpage" class="sys_ft"&gt;Home&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#devotionpage" class="sys_ft"&gt;Disclaimer&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;&lt;!-- navbar --&gt; 
          &lt;/div&gt;&lt;!-- footer --&gt; 
      &lt;/div&gt;&lt;!-- page --&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>JS Code:</p>
  
  <pre class="lang-js prettyprint-override"><code>$(document).on("pagebeforeshow", "#devotionpage", function() {
      $(this).find(".ui-listview-filter input").val("").trigger("change");
      });
  
  $( document).ready(function (){
      var url = 'http://howtodeployit.com/category/daily-devotion/feed/?json=recentstories&amp;callback=listPosts' ;
      $.ajax({
          type: "GET",
          url: document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&amp;num=1000&amp;callback=?&amp;q=' + encodeURIComponent(url),
          dataType: 'json',
          error: function(){
              alert( 'Unable to load feed, Incorrect path or invalid feed' );
          },
          success: function(data ){
              var postlist = data.responseData.feed.entries;
              var html = '&lt;ul data-role="listview" data-filter="true"&gt;' ;
              for (var i = 0 ; i &lt; 6 ; i++) {
                  var entry = postlist[i];
                  html += '&lt;li&gt;';
                  html += '&lt;a href="' + entry.link + '"&gt;';
                  html += '&lt;div class="etitle"&gt;' + entry.title + '&lt;/div&gt;' ;
                  html += '&lt;div class="eauthor"&gt;' + entry.author + '&lt;/div&gt;' ;
                  html += '&lt;div class="epubdate"&gt;' + entry.publishedDate + '&lt;/div&gt;';
                  html += '&lt;div class="esnippet"&gt;' + entry.contentSnippet + '&lt;/div&gt;';
                  html += '&lt;/a&gt;';
                  html += '&lt;/li&gt;';
              }
              html += '&lt;/ul&gt;';
             $( "#devotionlist" ).append(html);
             $( "#devotionlist ul[data-role=listview]" ).listview();
  
          }});
      });
  </code></pre>
  
  <p>Thanks</p>