Why does jQuery Mobile always keep the “original” page loaded in the DOM?

Question

I'm starting to use jQuery Mobile, and there's a behaviour that causes me a lot of doubts, mainly related to using IDs for elements.

My page has a menu to the left (a panel, with a unique ID like the docs say), and then header/content/etc, all inside a "page" div.

When I navigate to a different page, jQuery keeps the "original" page div that was loaded first with the page, in the DOM. If I keep navigating, other pages loaded in the DOM do go away, it always keeps the "active" page, and the "original" one.

• Why does it keep the original loaded?
• Can I avoid this? (for cache-breaking purposes)
• Doesn't this make my ID's (particularly the one for my menup) non-unique which tends to be frowned upon?

Thanks!
Daniel

Answer 1

The original is kept in the DOM both for caching, and for the transitions. Many of the transitions being done aren't possible without having both of the pages loaded at the same time. It may also result in a significant delay in the middle of the transition if they aren't both loaded at the same time during the transition.

As far as I know, you can't avoid it without making it a single-page application.

Yes, it does make duplicate ID's, therefore in jQM id's should probably be avoided.

You can however safely remove the extra pages after the next page has been transitioned to, but that of course ruins caching.

Answer 2

To remove the first page from the DOM, I use this:

$(document).one('pageshow', "div:jqmData(role='page')", function(event, ui){
    $(ui.prevPage).remove();
});

I don't know if that is recommended by the jQM devs, but it works well and solved a problem with another Library that failed to re-initialise when navigating back to the first page.

Answer 3

Here is a code snippet that will remove pages from the DOM after navigating away.

$('[data-role="page"]').live('pagehide', function () {
    $(this).remove();
});

As others have said, to select an element with a pageID, you have to take into consideration what the current active page is, which can be tricky when looking at the "next" active page. For instance, when trying to handle something in pageinit , jquery will not return that page as the active page. You can do something like this to get it.

$(':data(role="page")').live('pageinit', function () {
    var currentPage = $(this);
    ........
});