title: refresh a div using jquery mobile
body: <p>I am using phongap and jquery mobile to build an application which should use JSON to list the recent posts in a wordpress blog and then allow you to click the article and then be taken to a page which shows you the full post. 
  My code can list all the articles but the problem is that the code which is supposed to display the full article in a div is not working.
  I have the following code:</p>
  
  <hr>
  
  <pre><code>&lt;html&gt;       
  &lt;link href="jquery-mobile/jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css"/&gt;
  &lt;script src="jquery-mobile/jquery-1.5.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="jquery-mobile/jquery.mobile-1.0a3.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="phonegap.js" type="text/javascript"&gt;&lt;/script&gt;
  
  &lt;script&gt;
  function onBodyLoad(){    
      document.addEventListener("deviceready",onDeviceReady,false); }  
  
  $(function(){
      $.ajax({
          url: "http://blog.smartapplications.co.zw/?json=get_recent_posts",
          dataType: 'jsonp',
          success: function(json_results){
              console.log(json_results);
              // Need to add UL on AJAX call or formatting of userlist is not displayed
              $('#blogList').append('&lt;ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="e" data-count-theme="b"&gt;&lt;/ul&gt;');
              listItems = $('#blogList').find('ul');
              $.each(json_results.posts, function(key) {
                  html = '&lt;h3&gt;&lt;a href="#post_id_'+json_results.posts[key].id+'"&gt;'+json_results.posts[key].title+'&lt;/a&gt;&lt;/h3&gt;';
  
  
                  listItems.append('&lt;li&gt;'+html+'&lt;/li&gt;');
              });
              // Need to refresh list after AJAX call
              $('#blogList ul').listview();
  
              $.each(json_results.posts, function(key){
                      div_html='&lt;div data-role="page" id="#post_id_'+json_results. posts[key].id+'"&gt;&lt;div data-role="header"&gt;&lt;h1&gt;'+json_results. posts[key].title +'&lt;/h1&gt;&lt;/div&gt;&lt;div data-role="content "&gt;'+json_results. posts[key].text+'&lt;/div&gt;&lt;/div&gt;';
                      $('#content_blog').html(div_html);
                      });
  
          }
      });
  })
  
  &lt;/script&gt;
  
  &lt;/head&gt; 
  &lt;body onload = "onBodyLoad();"&gt; 
  &lt;div data-role="page" id="page"&gt;
      &lt;div data-role="header"&gt;
          &lt;h1&gt;Home&lt;/h1&gt;
      &lt;/div&gt;
      &lt;div data-role="content"&gt;   
          &lt;ul data-role="listview"&gt;
              &lt;li&gt;&lt;a href="#page1"&gt;Latest Articles&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;       
      &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;div data-role="page" id="page1"&gt;
      &lt;div data-role="header"&gt;
          &lt;h1&gt;Latest Articles&lt;/h1&gt;
      &lt;/div&gt;
      &lt;div data-role="blog_content" style="padding:0px;"&gt; 
      &lt;div id="blogList"&gt;&lt;/div&gt;
      &lt;/div&gt;  
  &lt;/div&gt;
  
  
  
  &lt;div id="content_blog" data-role="slider"&gt;  
  &lt;/div&gt;  
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>