When working with the jQuery Mobile first thing to think about is what kind of page template should I use. I have already talked a little bit about this topic in one of my previous posts . Now I have a want to clarify this part of a story a little bit more.
To make a story short (I am not going to talk about page architecture, everything you need to know can be found in a previous link).

Note: If this tutorial was helpful, need further clarification, something is not working or do you have a request for another Ionic post? Furthermore, if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here, again leave me a comment below. I'm here to help you, I expect the same from you. Feel free to comment below, subscribe to my blog, mail me to dragan.gaic@gmail.com, or follow and mention me on twitter (@gajotres). Thanks and have a nice day!

PS. If you want my help, if possible (even if it takes you some time to do that), create a working example I can play with. Use Plunker for AngularJS based questions or jsFiddle for jQuery/jQuery Mobile based questions.


Multi HTML page template

This template is where one jQuery Mobile page is placed inside a single HTML page.


  • Smaller and lighter, each data-role=”page” is inside a separate HTML file and page structure is much more modular.
  • Can become even smaller if every subsequent HTML page is stripped from HEAD content, or anything that isn’t data-role=”page” div. Unfortunately in this case fallback if JavaScript is not supported is out of question.
  • DOM size is relatively small. The only first page is permanently loaded into the DOM. Any other page will also be loaded into the DOM but at the same time it will also be removed when not used actively, basically each time you move from it.
  • Better fallback if JavaScript is not supported. Works great in desktop browsers after a page refresh, mainly because every HTML page has an existing HEAD content. This also allows your app to behave like normal web app especially because AJAX can be turned off.

vs bad

  • Consumes more bandwidth as each page navigation generates a new request. When moved from every page will be permanently removed from the DOM, unless caching is turned on.
  • Navigating back to a previously loaded page will again generate a fresh request.
  • Initial page load is fast, but subsequent page loads are slower than in a multipage template. This can cause problems during page transitions, more so on mobile devices. Desktop browsers don’t have this issue.
  • Much more suitable for desktop browsers than mobile browsers. Also suitable for larger applications, again this is a problem for mobile devices.
  • Pageinit event will be triggered each time page is visited (for those who don’t know this an event that replaces document ready in jQuery Mobile and thus it should run only once). Which consequently causes problems with multiple event binding.
  • Can’t use more then one data-role=”page” inside any subsequent HTML page, only initial one can have more then one page.

Multipage template

This is a template where one or more jQuery Mobile pages are part of a single HTML file.


  • Since all pages are already loaded; no additional requests are generated for navigating between pages.
  • First load is slower as the file size is larger, but subsequent page navigation is faster, thus making transitions much more smooth. Almost native-like smooth, emphasize on almost.
  • Suitable for relatively smaller applications and situations where you know the capabilities of your target platforms including the presence of JavaScript support, thus making it an excellent solution for a hybrid app. It works much better as a Phonegap app then multi-HTML template.
  • The “page” data-role element is required.

vs bad

  • Heavier. All the pages are in a single HTML file. Large applications with many pages will increase the DOM size.
  • Needs JavaScript support as Ajax Navigation is used.
  • Multiple page containers are present, and only the first one is shown when page loads.
  • Using data-ajax=”false” for internal pages ignores the data-transition attribute, by default slide is used
  • Heavily styled pages can become sluggish on mobile devices.

Who Am I?

Between working as a senior Java developer in one of the largest insurance companies in the world and traveling, in my free time, I work as a professional mobile development adviser. I'm also a major jQuery Mobile supporter back at StackOverflow and a forum moderator at the official Ionic Framework forum.

Blogs worth reading

If you're here looking for information related to the Ionic Framework, you will also like these blogs:

  • Léo

    Creating a mobile website, I chose multiple HTML files because it was more convenient to maintain, the files were lighter therefore more readable. Your article made me rethink about it. Plus, it should be used to create mobile apps with PhoneGap, I will most likely switch back to a single HTML file with multipage.
    Thank you.

  • Jose

    I’m bulding a web app, i created my structure with a multihtml pages, but i’m having problems with the basic fixed nav bar in the footer (using basic a ref tags like this – home)

    I have a login page which validates the user via ajax (not reloading the page to check if the credentials are correct). Once i validate the user, it navigates to main.html and i call a function that retrieves user associated info (like personal details, age, phone etc.) stored in a json array and displayed in list view.

    When i want to link to another page, which also calls for dynamic content, it will not load the content, not even by calling the function inside the body tag inside the new page.

    I fixed it by giving the the links of the fixed nav bar the “data-ajax=false” property, it loads the dynamic data without problems. But when i run the app as a web app on the iphone (adding it to the home screen) this property causes the app to open the links in a new safari window.

    What would you advice would be to solve this problem?

    – Using the multipage template?
    – Calling all external data on login (so no new calls to the database are made on page transition) – refreshing the content with a pull to refresh (if needed)?

    i read there’s a new .navigate method in jquerymobile 1.3 but don’t know how to implement it on a basic navigation

    I’ve been stuck with this for a while now. I cant find the solution within the documentation and can’t believe how common this problem is, and not addressed clearly anywhere.

    I appreciate any help that you could give me.

  • You should mail me directly and we will fix your problem in no time.

  • zia

    i like your website color, look & feel too good from india chennai……

  • I just want to thank you for your excellent tips, you saved me a lot of time while figuring out why a “page within a secondary page” didn’t work fully. Best wishes.

  • Dmitry Isakov

    “Can’t use more then one data-role=”page” inside any subsequent HTML page, only initial one can have more then one page.” – but what about using dialogs and popups?!

    • I don’t know to be honest, I haven’t used this framework in a long time.

  • buckthorn

    Thanks for these articles. I am building one of these “multi” pages, and would like to be sure that I am understanding your recommendations correctly.. Each section contains a form with one field. There are about 20 of these. All but two are very short and simple, so figure that these can be loaded with the initial page load . The other two contain large select lists, and are not used all that much. so I am thinking of including these as external html files that get loaded only as needed via ajax. Does this make sense? Thanks.