Question

I have some found some stange behaviour in jQuery Mobile that I can even repoduce on the demo website:

1. go directly to http://jquerymobile.com/test/docs/forms/textinputs/
2. enter something in a text input
3. click any link on the page and enjoy the ajax-y animation
4. go back using the browser’s back button

Result: The text entered in the text input is still there. This is what I want.

However, this breaks if you come from somewhere on the site:

1. go to http://jquerymobile.com/test/docs/forms/
2. klick on “Text inputs”
3. do steps 2 to 4 from above

Result: The text entered in the text input has disappeared. This is not what I want.

I tested this on Chrome for Desktop and the Windows Phone emulator, both show the same behavior. What can I do to always preserve the text entered in the text input? In my case this is a search box. I want the user to be able to refine the search terms after navigating back from the search results without having to enter everything again.

Answer 1

It’s because, when you come from docs/forms, ajax is disabled at the beginning. So, then, jQueryMobile disable dom-cache. You can force dom cache by adding this before your loading jquerymobile.js :

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

Edit :

My solution works, i just tried it :

• Go on my demo page ;

• Click on “Text inputs”

• Enter something in “Text Input:”

• Click on “Search input” on the left side (just some links works in my demo)

• Go back using the browser’s back button

Your text is still there !

(Note : This page show the originale version, with the problem, and so without domCache, to prove that i didnt change anything else when i duplicate jQueryMobile-Docs Pages to do my demo).