JQuery Mobile Latest 03 June 2011 Version - No back button

Question

It\'s the 3rd June 2011 and I\'m using JQuery Mobile\'s latest version.

My problem is that the back button has gone.

How can I get the back button to show up

Answer 1

I had a same problem though I have tried all steps above. I also found issues and solutions.

Issues: Back button is on the left of header and there may be buttons in this position already.

Solution: Move buttons to the right of the header by adding class="ui-btn-right" to buttons

Answer 2

Add this code

<script>
     $(document).bind("mobileinit", function() {
          $.mobile.page.prototype.options.addBackBtn = true;
     });
</script>

BEFORE you define

<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

Answer 3

As back button is now turned off by default, you need to turn it on before loading jQuery mobile (and after loading jQuery):

    <script type="text/javascript">
$(document).bind("mobileinit", function() {
      $.mobile.page.prototype.options.addBackBtn = true;
 });    
</script>   

Also, to prevent back button's sometimes popping up where it shouldn't be, put this:

data-add-back-btn="false"

to page containers on all pages where you don't want to see back button ever.

Answer 4

include data-add-back-btn="true" in header div tag

<div data-role="page" id="page1">
    <div data-role="header">
        <h1>First page</h1>
    </div>
    <div data-role="content">
        <p><a href="#page2">page2</a></p>
    </div>
    <div data-role="footer">
        <h4>Optional footer</h4>
    </div>
</div>
<div data-role="page" id="page2">
    <div data-role="header" data-add-back-btn="true">
        <h1>Second Page</h1>
    </div>
    <div data-role="content">  
        <p><a href="#page1">page1</a></p>
    </div>
    <div data-role="footer">
        <h4>Optional footer</h4>
    </div>
</div>

Answer 5

If you look at the jQuery mobile blog post in may, the back button is now off by default.

To reenable the back button simply add data-add-back-btn="true" to the page container:

<div data-role="page" id="page1">
    <div data-role="header">
        <h1>First page</h1>
    </div>
    <div data-role="content">
        <p><a href="#page2">page2</a></p>
    </div>
    <div data-role="footer">
        <h4>Optional footer</h4>
    </div>
</div>
<div data-role="page" id="page2" data-add-back-btn="true">
    <div data-role="header">
        <h1>Second Page</h1>
    </div>
    <div data-role="content">  
        <p><a href="#page1">page1</a></p>
    </div>
    <div data-role="footer">
        <h4>Optional footer</h4>
    </div>
</div>

Example of the back button on jsfiddle

Answer 6

If you're still not seeing it and your markup is all correct, Mark's comment is helpful:

assuming you navigated to another page

I wasn't seeing a back button on the page I was testing when adding the attribute:

data-add-back-btn="true"

It was because there was no browser history on that tab of my browser, thus no chance of a back button. If I navigated to the page I was testing from another page, then I would see the back button.