0

I'm not sure I understand what's possible with multi-page templates in JQM so I need a bit of help. I'm using version 1.4.5.

Let's say my app has only two pages (Page A and B) generated by a multi-page template. It takes the server several seconds to generate each page because they require many database calls and data processing. Currently, this multi-page template is generated by a single script on the server, index.pl.

Both pages are accessed by the user through a navbar. Page A is the first page in the template so it's visible to the user first.

To speed up the app, I want the HTML for Page B to get generated and fetched from the server only after the user taps the navbar menu item for Page B.

After Page B loads, the user should now be able to switch between pages instantly since the content for both pages are loaded into the DOM.

What is the proper way of accomplishing this desired result?

Do I tie the navbar tap on Page B to an ajax call and inject the server response into Page B? This seems kludgy.

I'm thinking I'm missing something fundamental about JQM but I'm not sure what. Can someone help?

SERVER-SIDE SCRIPT PSEUDOCODE: 

<!-- PAGE A -->
output <div data-role="page" id="page_a">

output <div data-role="navbar">
  output <ul><li><a href="#page_a">Page A</a></li><a href="#page_b">Page B</a><li></ul>
output </div>

output <div role="main" class="ui-content">
          generate_html_page_a();
output </div>
output </div>

<!-- PAGE B -->    
output <div data-role="page" id="page_b">

output <div data-role="navbar">
  output <ul><li><a href="#page_a">Page A</a></li><a href="#page_b">Page B</a><li></ul>
output </div>

output <div role="main" class="ui-content">
          generate_html_page_b();
output </div>
output </div>
StevieD
  • 6,925
  • 2
  • 25
  • 45
  • 1
    Why don't you use single page template instead? – devconcept May 08 '15 at 15:53
  • Yeah, I've decided that's probably the route I'm going to take. I'm new to jquery mobile so not sure what having a multi-page template buys me. I guess just fewer files to manage? – StevieD May 08 '15 at 19:31
  • Here's a good post on this: http://stackoverflow.com/questions/14144437/jquery-mobile-multiple-html-files-vs-multiple-page – StevieD May 08 '15 at 19:37

1 Answers1

0

For your architecture the best approach is single page template but you can use the pagecontainer API to load any page programmatically.

$(":mobile-pagecontainer").pagecontainer("load", "about.html", { role: "dialog" });

Check the jQM docs for more information.

devconcept
  • 3,665
  • 1
  • 26
  • 40