jquerymobile back button is not showing on header

Question

I am trying to make a mobile site in MVC, i am new to jquerymobile, i copied the following code from JQM tutorial and paste it in a View in MVC

<div data-role="page" id="home">

  <div data-role="header">
    <h1>Home</h1>
  </div>

  <div data-role="content"> 
    <p><a href="#about" data-role="button">About this app</a></p>    
  </div>

</div>

<div data-role="page" id="about">

  <div data-role="header">
    <h1>About This App</h1>
  </div>

  <div data-role="content"> 
    <p>This app rocks! <a href="#home" data-role="button">Go home</a></p>    
  </div>

</div>

My problem is, that it shows the back button on header in the demo from where i copied the code but when i run this in , the back button is not there can any body tell me, why this happened?

Answer 1

Try putting the following attibute on your "page" div:

data-add-back-btn="true"

e.g.

<div data-role="page" id="home" data-add-back-btn="true">

Answer 2

EDIT:
OK JQM does have that feature but by default it is disabled, however you can enable it by setting addBackBtn to true, or adding the data-add-back-btn="true" attribute to the page div.

http://jquerymobile.com/demos/1.1.0/docs/toolbars/docs-headers.html - adding back buttons.

In general if you want a back button you just use the data-rel="back" attribute, and if you want it displayed in the header then you need to add it there.

<div data-role="page">
<div data-role="header"> 
 <a href="#" data-rel="back">back</a> <h1> Title of page </h1>
</div>
<div data-role="content">
   </div>
<div data-role="footer"><h1>Footer </h1></div>
</div>