New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

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

Comments

Projects
None yet
2 participants
@kalygulov

kalygulov commented Sep 8, 2011

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

This comment has been minimized.

Show comment
Hide comment
@jblas

jblas Sep 8, 2011

Contributor

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.

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

This comment has been minimized.

Show comment
Hide comment
@jblas

jblas Sep 13, 2011

Contributor

@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.

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

This comment has been minimized.

Show comment
Hide comment
@jblas

jblas Sep 13, 2011

Contributor

Landed the fix for this on the HEAD:

1a92be0

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