What is the best approach for navigating between p

Question

What is the best approach for changing pages in a multipage mobile application?

I have seen it done both ways (as shown below). I can't seem to understand which one is the best approach. Are there differences between the two?

$("#nextPage").load("myapp.html", function(){
  alert("loaded next page!");
});

Vs..

$('#currentPage').hide();
$('#nextPage').show();

Answer 1

For the difference between what you've wrote in the question - see comment by @Japser, but in general:

I would say it depends on your app design, on "how far" you want to take it, on the framework you choose for developing it with (Sencha, jQuery Mobile, jQuery, Dojo, ...), etc...

If you "go simple", you can have 1 HTML file considered as your main page, and in it have a DIV which you will use jQuery's .load to replace its content with different content from other HTML files...

You can also use the jQuery Mobile approach for the same, which uses .changePage, etc... again, depending on what you actually want to do.

At the end, it depends on what you want to accomplish.
There is no one best approach.

---

And if you ever implement multi-page navigation in a Worklight-based project, it is highly important to remember that a Worklight application is a Single Page Application. You must not "leave" the Worklight context, or else you application will stop functioning. See more here: IBM Worklight 6.1 - Why is Cordova code not working when placed in a sub-page?