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.