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

[Beta 1] clicking back button goes back twice #1893

Closed
alumni opened this issue Jun 22, 2011 · 4 comments
Closed

[Beta 1] clicking back button goes back twice #1893

alumni opened this issue Jun 22, 2011 · 4 comments

Comments

@alumni
Copy link

alumni commented Jun 22, 2011

Steps to reproduce:

  1. Create a page using the code at the end of the post
  2. Open the page in Firefox 5.0, Safari 5.0.5, Opera 11.11 or Internet Explorer 9
  3. Wait 2.5 seconds until the #home page is loaded
  4. Click on 'Page 1'
  5. Clicking the back button will take you to the start-up page, instead of the home page

Note:
Works in Chrome 14 dev, but not in the other browsers. If "javascript:go(-1);" is replaced with something else in the source, say "#", this will still happen.

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>cShareLoc Office</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
</head>
<body onLoad="setTimeout('$.mobile.changePage(\'#home\');', 2500);">

    <div id="startup" data-role="page" data-theme="a">
        <div data-role="content">
            <p id="loading_message">The application is starting...</p>
        </div>
    </div>

    <div id="home" data-role="page" data-theme="c">
        <div data-role="header" data-theme="b" data-position="fixed">
            <h1>Home Page</h1>
            <div class="ui-btn-right" data-role="controlgroup" data-type="horizontal" style="margin:0px;">
                <a id="home_settings" href="#settings" data-role="button" data-icon="gear" data-rel="dialog">Settings</a>
                <a id="home_logout" href="javascript:do_logout();" data-role="button" data-icon="arrow-r">Logout</a>
            </div>
        </div>
        <div data-role="content">
            <div data-role="controlgroup" data-type="horizontal" id="homebuttons">
                <a id="home_page1" href="#page1" data-role="button">Page 1</a>
                <a id="home_page2" href="#page2" data-role="button">Page 2</a>
            </div>
        </div>
    </div>

    <div id="page1" data-role="page" data-theme="c">
        <div data-role="header" data-theme="b" data-position="fixed">
            <div class="ui-btn-left" data-role="controlgroup" data-type="horizontal" style="margin:0px;">
                <a id="page1_back" href="javascript:go(-1);" data-role="button" data-rel="back" data-icon="arrow-l" data-direction="reverse">Back</a>
                <a id="page1_home" href="#home" data-role="button" data-icon="home" data-direction="reverse">Home</a>
            </div>
            <h1>Page 1</h1>
            <div class="ui-btn-right" data-role="controlgroup" data-type="horizontal" style="margin:0px;">
                <a id="page1_settings" href="#settings" data-role="button" data-icon="gear" data-rel="dialog">Settings</a>
                <a id="page1_logout" href="javascript:do_logout();" data-role="button" data-icon="arrow-r">Logout</a>
            </div>
        </div>
        <div data-role="content">
            <p>Page 1 content</p>
        </div>
    </div>
</body>
</html>
@pberanger
Copy link

Same issue here,

with $.mobile.page.prototype.options.addBackBtn = true;

or data-add-back-btn="true" on each container.
Tested on firefox 4.1 .

@scottjehl
Copy link

Fixed in c227535

@scottjehl
Copy link

Data-rel=back already handles the functionality you're trying to do in that href. Try using this attribute in combination with a functional href so that it works in C-Grade browsers. For example, if you're serving the anchor in the HTML source, we'd recommend populating the href with the actually HTTP referring page that the user just came from. (but mostly, we generate any back links with JS and use a # href).

@pberanger
Copy link

Thanks ! :)

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@scottjehl @alumni @pberanger