Skip to content
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 opened this issue Sep 8, 2011 · 3 comments
Closed

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

kalygulov opened this issue Sep 8, 2011 · 3 comments
Assignees
@jblas

Comments

@kalygulov
Copy link

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>
@ghost ghost assigned jblas Sep 8, 2011
@jblas
Copy link
Contributor

jblas commented Sep 8, 2011

This was actually a bug that was introduced in Beta 2 when we decided that relative URLs should be resolved against the path for the current page. What's basically happening here is that our hashchange callback is only passing the hash for embedded pages to changePage(). So for example in this particular case it is calling changePage("#page3") which in turn gets resolved to single.html#page3, because single.html is the current page showing, when it should be index.html#page3.

The simple fix for this is to pass the entire location.href from the hashchange callback, that way there is no ambiguity.

@jblas
Copy link
Contributor

jblas commented Sep 13, 2011

@scottjehl @johnbender

Ok, turns out there were actually 2 problems. One was the problem I mentioned above, which was an easy fix. The 2nd was a little tougher to figure out, but when push-state is turned on, the hashchange event is not fired when doing a window.history.back() from an external URL to an embedded page.

I have a fix for both. I'm currently running the unit tests.

@jblas
Copy link
Contributor

jblas commented Sep 13, 2011

Landed the fix for this on the HEAD:

1a92be0

@jblas jblas closed this as completed Sep 13, 2011
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@jblas jblas

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@jblas @kalygulov