Dynamically create jQuery Mobile page via JavaScript after clicking

Question

My jQuery Mobile app consists of a single index.html page and contains only one page with a link on startup:

<div data-role="page">
  <div data-role="content">
    <a id="startPageLink" href="startPage">start</a>
  </div>
</div>

When the user clicks on the start link, I want to load the content for the startPage from my JSON api asynchronously. On the callback I would like to create all the required DOM elements for startPage via JavaScript and add the content to it. I have created a createStartPage(data) method for this.

What is the right way to implement such dynamically created pages, so that opening index.html#startPage also works? I think there should be a way to hook into $.mobile.changePage() to include custom loading/page-creation code, but I did not find anything. Or is there a better solution for this problem?

Answer 1

Here is my method for dynamically adding content to my Jquery Mobile websites:

1. First I create a "wrapper" data-role=page div like so:

   <div data-role="page" id="my_page_id">
   <div data-role="content">
       <script>
       $('#my_page_id').live('pageshow', function() {
           my_data_loading_function('my_page_id');
       });
       </script>
   <div id="my_page_id-content"></div>
   </div><!--/content-->
   </div><!--/page-->
   

2. Next I load data from an external source into a div tag located in my "wrapper" page:

   function my_data_loading_function(page) {
       if ($('#' + page + '-content').is(':empty')) {
           $.mobile.pageLoading();
           $('#' + page + '-content').load("my_external_script.php", function() {
               $.mobile.pageLoading(true);
               $('#' + page + '-content ul').listview();
               $('#' + page + '-content ul').page();
           });
       }
   }
   

Some Notes:

• $.mobile.pageLoading(); and $.mobile.pageLoading(true); show and hide (respectively) the Jquery Mobile loading spinner.

• if ($('#' + page + '-content').is(':empty')) { allows the user to navaigate away from the dynamically created page and then come back and not have to re-load the data until a full page refresh occurs.

• My dynamically created page included mostly a list so listview() makes the jquery mobile framework refresh the list selected to add the proper css, page() does the same to other page elements; however you may only need to use one or the other depending on your content (or none at all if its just plain text).

• I realize this isn't creating a whole page dynamically because the "wrapper" page is already hard-coded but if you want to add a whole new page you can probably use something like: (untested)

  $(document).append('<div data-role="page" id="my_page_id"><div data-role="content">FOO BAR</div></div>');
  $('#my_page_id').page();
  

If you really want to make it all dynamically created you can check for window.location.hash and create your data-role=page div with the id set as the window.location.hash.

Also I am using Jquery 1.6 and Jquery Mobile 1.0a4.1

I hope something in there can help someone out there :)

Answer 2

To me Jasper solution doesn't work but i've found this solution that look cleaner and work fine