Question

According to the jQuery docs calling

pageContainerElement.page({ domCache: true });

will cache a particular page programmatically. However, as correctly pointed out by this github issue, this will not work if called after the pagecreate event.

From the main page of my app a user can get to another page where there is a form that they can put information into. On this form is a button for a modal popup that the user can select certain tags from. When this modal closes and the user is returned to the form, it is reset because the page has been removed and re-added.

One thing I can do is cache the page with the form so the data isn’t cleared. The only way to do this programmatically is

function cachePage() { $('#tags').closest('div[data-role=page]').page({ domCache: true }); }
$(document).on('pagebeforecreate', cachePage);

assuming #tags is only an element on the page I’d like to cache. However, I now cannot uncache the page and have it get cleaned up by jQM.

I’m wondering if I’m approaching this problem correctly, and if so, how to handle this page caching and disabling. If I’m not handling it correctly, how can I get it so that my form is preserved and I can still get information to the form from a modal popup or additional page?

Edit

One thing I recently discovered is that jQM will keep one ‘root’ page in the DOM followed by whatever other pages it loads on the surface. If I add data-ajax='false' to all links that go to forms, they should be safe to use with any modals that are called on them. Furthermore, submissions on them can be done with the same data-ajax='false' to redirect to another page without the title bar’s back button returning to the form.

Is this a better approach than either caching the form page or storing the form data in JavaScript and repopulating the form when it is loaded?

Answer 1

If you have a pseudo-page that you know you want to persist in the DOM, add the data-dom-cache="true" attribute to the pseudo-page element. Docs: http://jquerymobile.com/demos/1.1.0/docs/pages/page-cache.html

If you want to remove a pseudo-page in the DOM that has been cached, use .remove():

$('#some-page').remove();

In addition to the elements themselves, all bound events and jQuery
data associated with the elements are removed. To remove the elements
without removing data and events, use .detach() instead.

Source: http://api.jquery.com/remove/

Once you remove the pseudo-page from the DOM, jQuery Mobile won’t be able to find it and will grab a new version from the external document the next time you navigate to the pseudo-page.