1

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();
Omar
  • 32,302
  • 9
  • 69
  • 112
Dave Krier
  • 55
  • 6
  • Why is this targetted as a Worklight question? This is "mobile in general"... – Idan Adar Feb 13 '14 at 17:52
  • 2
    The first example loads external content, the second one does not (it just shows/hides exiting content). http://api.jquery.com/load – Jasper Feb 13 '14 at 17:56
  • jQM uses Ajax, are you using jQM? – Omar Feb 13 '14 at 17:57
  • Is there a reason you don't want to just use the jQuery Mobile framework's system? It'll grab external links (as long as they are on the same domain) automatically... Then if the page already exists, it'll just show the existing layout rather than re-loading it. But these are options that can be changed. – Jasper Feb 13 '14 at 18:28
  • I understand this is a general mobile question, but then again Worklight is a mobile development tool. (Hence my Worklight Tag). There is a reason why I am asking this question. I found some strange behavior with regards to using the (show/hide) approach and how it renders the page (Not seeing the jquery stylesheet on some pages). The (.load) approach seems to resolve it. I can't seem to understand why the Worklight documentation directs you to use the (show/hide) approach. That's all.. Thanks for all your help.. – Dave Krier Feb 14 '14 at 15:22
  • Where does the worklight documentation point you to use show/hide? – Idan Adar Feb 14 '14 at 15:42

1 Answers1

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?

Community
  • 1
  • 1
Idan Adar
  • 44,156
  • 13
  • 50
  • 89
  • So.. Idan - In response to your comment. Is is ok if I use the .Load approach with a worklight app if I use one HTML page, but switch the DIV? Will I loose context with this approach? It does seem to solve my problem with regards to the stylesheet issue, but will it cause more problems than it's worth? – Dave Krier Feb 14 '14 at 15:38
  • It will solve the "losing context" issue, yes. There are similar approaches for when using other frameworks. It's up to you to decide how you load content, as long as you keep in mind that Worklight is a single page application and thus you cannot navigate away from it (for example by using href...) – Idan Adar Feb 14 '14 at 15:41
  • @DaveKrier, if your question is answered - please mark this answer as "Answered". – Idan Adar Feb 16 '14 at 05:38