title: How to get load html with Ajax and jQuery
body: <p>I'm using jquerymobile.  I have a page that gets the latest posts with a click on a refresh button.</p>
  
  <p>I can't get any html from viewposts.php to show up in the #test div.</p>
  
  <pre><code>$("#refresh").click(function(){        
              $.ajax({  
  
                 cache: false,
                 url: "mobile/viewposts.php", 
                 success: function (html) {
                      $("#test").append(html);
                      $("#test").fadeOut(1000);
                      alert(html);
                  }
  
  
              }); 
  </code></pre>
  
  <p>I have tried with dataType: 'html', and type: 'POST', and GET.<br>
  Tried with $("#test").html(html);</p>
  
  <p>The fadeout works. The alert is blank.</p>
  
  <p>The view posts page gets the latest posts from the DB.  I'm also echoing some random html in the viewposts.php.</p>
  
  <p>I'm able to do an ajax call and get the html if i don't use jquery.  The problem is that way the html thats returned doesn't use the jquerymobile stylesheet so it just looks like plain text. </p>
  
  <p>I'm new to this. </p>
  
  <p>Please help.</p>
  
  <pre><code>&lt;div data-role="page" id="readBlogPage"&gt;
      &lt;div data-role="header"&gt;
          &lt;h1&gt;Read Blog&lt;/h1&gt;
      &lt;/div&gt;
      &lt;div data-role="content"&gt;
          &lt;!--&lt;button onclick="ajaxFunction()" data-theme="b" data-role="button" data-iconpos="left" data-icon="refresh" &gt;Refresh&lt;/button&gt;--&gt;
  
          &lt;fieldset class="ui-grid-a"&gt;
              &lt;div class="ui-block-a"&gt;&lt;a href="#createNewPostPage" id="cancel" data-role="button" data-rel="dialog"&gt;New Post&lt;/a&gt;&lt;/div&gt;
              &lt;div class="ui-block-b"&gt;&lt;button id="refresh" data-theme="b" data-role="button" data-iconpos="left" data-icon="refresh" type="submit"&gt;Refresh&lt;/button&gt;&lt;/div&gt;
          &lt;/fieldset&gt;
  
          &lt;!--&lt;button onclick="ajaxFunction()" data-theme="b" data-role="button" data-iconpos="left" data-icon="refresh" id="refresh" type="button"&gt;refresh&lt;/button&gt;--&gt;
          &lt;ul data-role="listview" data-theme="d" data-inset="true" id="ajaxout"&gt;
  
  
  
          &lt;/ul&gt;
          &lt;div id="test" &gt;asdfsadfsd&lt;/div&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Viewposts.php echoes a bunch of lines like this</p>
  
  <pre><code>echo "&lt;li&gt;&lt;h3 style=\"margin:0px;\"&gt;" . $ row['post_title'] . "&lt;/h2&gt;" . $row['post_content'] . "&lt;p class='ui-li-aside'&gt;Lat: ". $row['lat'] ."&amp;nbsp;&amp;nbsp;Lon: ". $row['lon'] ."&amp;nbsp;&amp;nbsp;" .$row['post_date'] . "&lt;strong&gt;&lt;/p&gt;&lt;/li&gt;";
  </code></pre>
  
  <p>This is the response header in firebug</p>
  
  <pre><code>Response Headers
  Date    Sun, 03 Jul 2011 17:38:20 GMT
  Server  Apache/2.2.3 (Red Hat)
  X-Powered-By    PHP/5.1.6
  Cache-Control   max-age=0
  Expires Sun, 03 Jul 2011 17:38:20 GMT
  Content-Length  0
  Connection  close
  Content-Type    text/html; charset=UTF-8
  X-Pad   avoid browser bug
  </code></pre>