dynamic cache page jquery mobile

Hi i am new for jquery mobile. I gt three page inside my apps. page1.html->page2.html->page3.html. I need to preserve page1's textbox value when page2.html back to page1.html.

After i googling, i get the answer

    $(document).bind("mobileinit", function () {

    $.mobile.page.prototype.options.domCache = true;

});

How i back my page

history.go(-1);

go to next page

$.mobile.pageContainer.pagecontainer("change", url, {
    allowSamePageTransition: true,
    transition: 'none',
    showLoadMsg: false,
    changeHash: true

})

But nw is my problem when page2 back to page1, then page1 go to page2 , page2 textbox value will keep preserved also. Is it possible that when i click back button then textbox value will be preserved, but when i click next button then pages will be refresh?

Solution

You are doing it all wrong, you should have read everything about cashing.

When page cashing is turned on you still have a option to decide which page will have it turned on and which one will not get cashed.

All you need to do to prevent second page cashing is to add attribute data-dom-cache="false" to your second page data-role="page" div container, and that is that.

Working example:

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>jQM Complex Demo</title>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" /> 
        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <script>
            $(document).bind("mobileinit", function () {
                $.mobile.page.prototype.options.domCache = true;
            });     
        </script>
        <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>    
    </head>
    <body>     
        <div data-role="page" id="index" data-theme="a" >
            <div data-role="header">
                <h3>
                    First Page
                </h3>
                <a href="second.html" class="ui-btn-right">Next</a>
            </div>

            <div data-role="content">
                <input type="text" value="" id="sdfsd"/>
            </div>

            <div data-role="footer" data-position="fixed">

            </div>
        </div> 
    </body>
</html>

second.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>collapsible demo</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>

    <div data-role="page" id="page2" data-dom-cache="false">
        <div data-role="header">
            <a href="index.html" class="ui-btn-left">Back</a>
            <h1>jQuery Mobile Example</h1>
        </div>
        <div data-role="content" class="ui-content">
            <input type="text" value=""  id="dffsd"/>
        </div>
    </div>
</body>

</html>