Skip to content
This repository was archived by the owner on Oct 8, 2021. It is now read-only.
This repository was archived by the owner on Oct 8, 2021. It is now read-only.

Navigation from one page back to multi-page template #2406

Closed
@kalygulov

Description

@kalygulov

When going from multi-page template to a new single page and then back does not behave as expected.
For instance in the example below, if you click "show single page" link from Page 3 and try to go back, you would need to click back 2 times with no result and then after 3rd click you would be taken to Page 1 (beta 2 and 3).

<!-- index.html -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
    <script>
         $(document).bind("mobileinit", function(){
            $.mobile.page.prototype.options.domCache = true;
        });
    </script>
    <script src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js"></script>
    <title>Test</title>
</head>
<body>
    <div data-role="page" id="page_1" data-theme="b">
        <div data-role="header">
            <h2 class="ui-title">Page 1</h2>
            <a data-icon="arrow-r" data-role="button" class="ui-btn-right" data-iconpos="right" data-nav-name="#page_2" href="#page_2">Next</a>
        </div>
        <div data-role="content" id="form_1">
            Page 1 Content
            <a href="single.html">show single page</a>
        </div>

    </div>

    <div data-role="page" id="page_2" data-theme="b">
        <div data-role="header">
            <a data-icon="arrow-l" href="#" data-rel="back" >Back</a>
            <h2 class="ui-title">Page 2</h2>
            <a data-icon="arrow-r" data-role="button" class="ui-btn-right" data-iconpos="right" data-nav-name="#page_3" href="#page_3">Next</a>
        </div>
        <div data-role="content" id="form_2">
            Page 2 Content
            <a href="single.html">show single page</a>
        </div>

    </div>

    <div data-role="page" id="page_3" data-theme="b">
        <div data-role="header">
            <a data-icon="arrow-l" href="#" data-rel="back" >Back</a>
            <h2 class="ui-title">Page 3</h2>
        </div>
        <div data-role="content" id="form_3">
            Page 3 Content
            <a href="single.html">show single page</a>
        </div>
    </div>

</body>
</html>



<!-- single.html -->


<html>
    <body>
        <div data-role="page" data-theme="b">
            <div data-role="header">
                <h2>Single Page</h2>
            </div>
            <div data-role="content">
                Single Page Content
            </div>
            <div data-role="footer" data-position="fixed">
                <a href="#" data-rel="back" data-role="button" data-icon="arrow-l">Back</a>
            </div>
        </div>
    </body>
</html>

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions