Dynamically add pages to jQuery mobile web app

Question

I have an MVC4 web app that needs 12 jQuery Mobile pages.

1. Welcome
2. Login

and then many others.

I want to add one page at time if the user request it,

1. What is the best approach to add pages dynamically to my project?

2. Where is the appropriate site to include the page scripts (that pages added dynamically)?

3. What exactly mean data-ajax="false" if it was included in a Html.ActionLink()?

At this time I have almost 90% of my app, but i'm having serious problems referencing some pages, some times all pages included in a view don´t render or don´t run the scripts.

Answer 1

I think you have the following options in organising JQuery Mobile pages:

(a) one HTML file with all the pages (divs with class="page")

This is the simplest approach and guaranteed to work however the file might become too large for a big project

(b) one main HTML file linking to child HTML files

From a UI standpoint, JQM by default uses "AJAX mode " when loading a child page, which makes transition as fluid as option (a). The drawback of this is that child pages are not fully loaded, ie, none of its includes or scripts are executed. On load, JQM parses the child page for the first div with class="page", extracts the div and adds it to the current DOM. Note that a child page cannot have more than one "pages" since only the first one will be loaded.

To do option (b) correctly, you could:

1. include all CSS, JS and run all init scripts in the main page or

2. Specify "data-ajax=false" or "rel=external" on your links. This forces JQM to fully reload the linked/child page, however with this approach you lose the fluid transition.

Answer 2

One method I have used in the past is to have a single main page which is all that loads into the browser.

The rest of the 'pages' are simply HTML chunks that are loaded into a 'content' div in the main page. Obviously there would be an initial 'page' which is the first HTML chunk that is loaded by default by the main page on initial load, but the remaining 'pages' are loaded as required (e.g. when the user logs in. clicks a link, etc.).

I used JQuery .Load() within the main page to to bring down the HTML chunks for each 'page' and load them into the 'content' div as required.

I found this very convenient as all of the scripts and styling could reside with each HTML chunk (as if for a full standalone page) and JQuery .Load() would take care of all the running of the scripts and application of styling.

On the MVC side, only the view for the main page included the full HTML page elements, and was structured to work as a 'container' for 'page' content. The rest of the views would contain only the relevant content for each 'page', and be structured to fit into the 'container' appropriately.