Response title
This is preview!
Move this topic
Replies(7)
It's not a bug. It's a documented limitation. It's not supposed to load more than the first page:
http://view.jquerymobile.com/1.3.2/dist/demos/faq/why-is-only-the-first-page-loaded.html
You can load all of the pages if you use data-ajax="false" or data-rel="external" on the link. However, this is far from ideal - all the JS and CSS will be re-loaded, and you will not get a transition.
I don't recommend using multi-page documents at all. The intention of a multi-page document is that your *entire* site or app should be contained in a single document. If this is not possible - because your app or site is not extremely tiny - then you should not use a multi-page document.
Since sites/apps tend to grow over time, it's likely you will eventually outgrow a multi-page document. It can be rather painful and costly to change an already-developed project from multi-page to single-page, so why not just start with single-page from the outset?
http://view.jquerymobile.com/1.3.2/dist/demos/faq/why-is-only-the-first-page-loaded.html
You can load all of the pages if you use data-ajax="false" or data-rel="external" on the link. However, this is far from ideal - all the JS and CSS will be re-loaded, and you will not get a transition.
I don't recommend using multi-page documents at all. The intention of a multi-page document is that your *entire* site or app should be contained in a single document. If this is not possible - because your app or site is not extremely tiny - then you should not use a multi-page document.
Since sites/apps tend to grow over time, it's likely you will eventually outgrow a multi-page document. It can be rather painful and costly to change an already-developed project from multi-page to single-page, so why not just start with single-page from the outset?
Leave a comment on watusiware's reply
Isn't it practically the same?
A single-page application in terms of a RIA (Rich Internet Application) is an interactive webpage that holds many divs or sections which will be hidden or shown.
I could ofcourse replace the 'multi-page' with these sections, but nothing would change to the length of the document. Next to this it would be the same aspect as multi-page, in a single HTML file.
Also, having this wont allow me to use the pre-defined transitions, so what would be the use of JQuery Mobile if I can't use it?
Correct me if I'm wrong or mistaken.
------
And is it possible to navigate to a multi-page using this way with ajax disabled?
$.mobile.changePage("Application/app.html", { transition: "slidefade", changeHash: false });
Leave a comment on Lars's reply
You are wrong and mistaken. I'd suggest you re-read the documentation carefully, with emphasis on the material on Ajax page loading.
You are missing something fundamental: jQuery Mobile manages the loading and unloading of pages from the DOM. it works the way you describe a "rich Internet application", (but only for pages - if you want to deal with parts of pages, then that is up to you to program). It does this transparently - you only need to use normal links or $.mobile.changePage.
That's not true. The transitions work whether you use single-page or multi-page. However, they do *not* work if you try to go between a single-page and a multi-page document, or two multi-page documents. jQuery Mobile wasn't designed to do that. It's meant that your site is either single-page or multi-page. If multi-page, the expectation is that the entire site needs to go in one multi-page. Thus, as a practical matter, it is suitable only for sites of a very few number of pages.
No.
JQM *cannot* do transitions with Ajax disabled. There's no way to do it. DOM reload is DOM reload, and browsers provide no means for doing a transition over a DOM reload.
You are missing something fundamental: jQuery Mobile manages the loading and unloading of pages from the DOM. it works the way you describe a "rich Internet application", (but only for pages - if you want to deal with parts of pages, then that is up to you to program). It does this transparently - you only need to use normal links or $.mobile.changePage.
Or, you could simply use single-page documents, as the vast majority of successful JQM sites do.I could ofcourse replace the 'multi-page' with these sections, but nothing would change to the length of the document. Next to this it would be the same aspect as multi-page, in a single HTML file.
Also, having this wont allow me to use the pre-defined transitions, so what would be the use of JQuery Mobile if I can't use it?
That's not true. The transitions work whether you use single-page or multi-page. However, they do *not* work if you try to go between a single-page and a multi-page document, or two multi-page documents. jQuery Mobile wasn't designed to do that. It's meant that your site is either single-page or multi-page. If multi-page, the expectation is that the entire site needs to go in one multi-page. Thus, as a practical matter, it is suitable only for sites of a very few number of pages.
I already answered that.And is it possible to navigate to a multi-page using this way with ajax disabled?
No.
JQM *cannot* do transitions with Ajax disabled. There's no way to do it. DOM reload is DOM reload, and browsers provide no means for doing a transition over a DOM reload.
Leave a comment on watusiware's reply
Thanks for your feedback watusiware, it is truly appriciated.
However, I am going to create an large application which means i'll be using something between 20-50 pages.
In this article I have read, its stating that it should be a bad practicee because it will use more loading time for each transition.
Next to this, I'll have to start using cookies because the data being retrieved should be stored somewhere, and these values are lost when a page is reloaded. (Or there is another method i'm not aware of).
Anyway, I'll test it, once again - thanks for your feedback :)
I'll await a new reply for this last question and i'll mark your comment as the best answer :).
Leave a comment on Lars's reply
@watusiware, what do you think about creating pages dynamically once user is directed from index.html to app.html? Would you go for such a solution? coding instead of 50 html pages?
Thanks.
Leave a comment on Omar's reply
Lars, the author of that article has used some confusing terminology. The JQM documentation is at least consistent if, admittedly, confusing:In this article I have read, its stating that it should be a bad practicee because it will use more loading time for each transition.
- Multi-page (or "multi-page template") - A single document which contain multiple pages. If you use this, this single document should normally contain your *entire* site or app.
- Single-page (or "single page template") - Multiple documents, each of which contain a single page. jQuery Mobile manages the loading/unloading of pages in the DOM. As the user navigates the site, JQM loads pages from the server, and then removes them when they are no longer needed.
The author of that article uses slightly different terms:
- Multi HTML Page Template (same as what JQM docs call "single page template")
- Multipage template (same as JQM "multi page template")
The terminology in the docs is a poor choice to start with, and must be terribly confusing especially for non-native English speakers. There is also confusion over "page" vs "document", where "document" has a very precise meaning in HTML that is often missed. I can easily see readers thinking that "multi-page template" means that you have several HTML documents comprising the site, when it is the opposite.
Other than the terminology confusion, the article is fairly accurate. I would agree with most of the plusses and minuses.However, there are some "bads" disguised as "goods". This is listed as a "good" for "multipage template":
What is left out here is that the word "only" should be added:Suitable for relatively smaller applications and situations where you know the capabilities of your target platforms including presence of JavaScript support, thus making it a great solution
A 50-page application is not a "smaller application"Suitable only for relatively smaller application
This deserves a bullet point in the "bad" list.
-----
I've seen a lot of fallacious arguments in favor of multi-page templates arguing the advantage of not having to load from the server for every page change. What they ignore is that you can have your cake and eat it too using single-page templates.
data-dom-cache and data-prefetch allow you to retain pages in the DOM after the user has left the page, as well as to pre-load pages that the user might likely transition to in the future. They allow you to do exactly what many developers are attempting to do by mixing single-page and multi-page templates, but do so in a much more elegant and less troublesome way.
(The very slight difference between this and multi-page is that if you use data-prefetch, the pages will be fetched in multiple HTTP requests, rather than one. But I can only see this as a plus in a mobile environment - its a win-win, because the first page is seen sooner. Nobody is going to wait for 50 pages to download in one document. You will lose your user right on the home page.)
I'll reiterate that the vast majority of successful JQM sites/apps use a single-page template.
Thanks, you have been a great help in giving advice and explaining my good and wrong decisions.. i've learned something, hehe.
Thanks again.
----------
marked as best answer btw.
Leave a comment on watusiware's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to Lars's question
Statistics
- 7 Replies
- 2866 Views
- 0 Followers