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

Closed
kalygulov opened this Issue Sep 8, 2011 · 3 comments

Projects

None yet

2 participants

@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>
@jblas jblas was assigned Sep 8, 2011
@jblas
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
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
Contributor
jblas commented Sep 13, 2011

Landed the fix for this on the HEAD:

1a92be0

@jblas jblas closed this Sep 13, 2011
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment