Question

Can I embed one page (data-role="page") in another page like:

<div data-role="page"> <!-- outer page -->
  <div data-role="header"></div>
  <div data-role="content">
  <div data-role="page"> <!-- inner page -->
    <div data-role="header"></div>
    <div data-role="content">
        inner page content goes here....
    </div>
    <div data-role="footer"></div>
  </div> <!-- inner page -->
  <div data-role="footer"></div>
</div> <!-- outer page -->

When I tried like this, i didn’t see my content but outer header, footers displaying for
me.

Thanks,
nehatha.

Answer 1

No, you cannot. Pages are not meant to be embedding each other. May be you can probably write what are you trying to achieve by this?

You have two options.

1. Write your own transition logic, which will not be very difficult, you can say $(‘#content’).html(new html); on every button click and keep only one page.
2. use data-position=”fixed” for header and footer in jQuery mobile and use normal page, this way your header and footer will not move on scrolling, paginating.

Multi-page template structure: http://demos.jquerymobile.com/1.4.2/transitions/pages/