jQuery Mobile multi-page template caching

Question

I have an app built with jQuery Mobile where all the pages are in a single HTML file. When I navigate to a page, fill out a form and then navigate away from it, I want the form data that I filled not to be there next time I go on that page. My question is, is this a caching issue? and if so how do I prevent it? I tried things like:

pageContainerElement.page({ domCache: false });

$(document).bind("mobileinit", function(){
    $.mobile.page.prototype.options.domCache = false;
});

but the data is still there whenever I go back onto the page

Answer 1

Everything you're experiencing is just how jQuery Mobile is intend to work. You have read documentation regarding caching and prefetching but at the same time you are missing bigger picture, mostly because you didn't read everything.

When working with jQuery Mobile caching has sense only if you are using multi HTML template. Lets take a look at your current state. You are using multi page template where every page is part of a single HTML page. In this case, initial HTML file is fully loaded into the DOM and it will stay there until page is refreshed or until you open some subsequent HTML file using rel="external" (which is equal to full page restart).

In any other case initial HTML page will stay it the DOM forever and you can't do nothing to prevent that. Basically you can't remove pages loaded into the DOM if they were part of an initial HTML file. Of course you can remove them forcefully but application will then suffer from history navigation problem and I don't want to advise that case.

You have two solutions:

1. Move that specific page to some other HTML file. In this case when you transition to some other page, from this specific page, it will be removed from the DOM.

2. Clean previous form data during pagebeforechange page event