jQm ajax pages

jQm ajax pages

Hi,

I am doing a hybrid app. So I need to add pages dynamically. But for some reason it does not work.
Could you please check and help me fix the problem?  Here is the frame of the main page where I want to inject the jQm page.

index.html

  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
  6. <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
  7. <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  8. <script>
  10. $(document).ready(function () {
  11. $.ajax({
  12. url: "ajax_login.txt",
  13. dataType: "html",
  14. success: function(data) {
  15. $(document.body).html(data);
  16. $(document.body).trigger('create');
  17. }
  18. });
  19. });
  20. </script>
  21. </head>
  22. <body>
  24. </body>
  25. </html> 
jQM page that I want to insert (its just an example) 

  1. <div data-role="page" id="pageone">
  <div data-role="header">
    <h1>Welcome To My Homepage</h1>
    <div data-role="navbar">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Page Two</a></li>
        <li><a href="#">Search</a></li>
      </ul>
    </div>
  </div>

  <div data-role="main" class="ui-content">
    <p>My Content..</p>
  </div>

  <div data-role="footer">
    <h1>My Footer</h1>
  </div>
</div>