Injecting content into the DOM, changePage to content, update history in V 1.0a3

Injecting content into the DOM, changePage to content, update history in V 1.0a3

I wasted a lot of time on this today because of a lack of documentation or simply my inability to find that documentation so I hope this helps some others out.

I needed to be able to dynamically append content to the DOM, then switch to that content while updating history so that the back button works as expected. 

The thing that tripped be up was the assignment of a div data-url attribute  as opposed to previously just assigning an id to the div.

This is a snippet of the code that injects the html into the DOM ..

  1. var p = [];
  2. p.push('<div data-role="page" data-theme="b" data-url="details">');
  3.       p.push('<div data-role="header" data-theme="b">');
  4.   p.push('<h1>Project Details</h1>');
  5.       p.push('</div>');
  6.       p.push('<div data-role="content">'); 
  7.             p.push('<div id="a5_details"></div>');
  8.       p.push('</div>');
  9. p.push('</div>');
  10. $('body').append(p.join(''));

And here is the method to switch to that page ..
  1. $.mobile.changePage("#details","slide",false,true);

Hope that helps.