jQuery Mobile NavBar with back button of previous page

Question

On an iPhone when you have a NavBar at the top, there is a back button.

Rather than say "Back" it has the title of the previous page in it.

So you might be on say the "Checkout" page. The title of the NavBar would be "Checkout" and the button might say "Books".

Clicking on the button that says "Books" takes you back to the previous page.

How can this be accomplished in jQuery mobile without the need to code in the name of the back button as you may have gotten to that page from a different route?

edit

I know I can do this on the page;

<div data-role="page" id="pageViewChallenges" data-add-back-btn="true" data-back-btn-text="previous">

But that makes the buttons text "previous" instead of the name of the page.

Answer 1

U can use <a href="previuos_page.html" id="bkbtnid" data-icon="back">Books</a>

(If u r using external page)

and

<a href="#Id_of_previous_page" id="bkbtnid" data-icon="back">Books</a>

(When using Internal page)

This is simple settings to customise back button and if u want previous page title as back button then simply get the title of back button through jquery method and set in the back button title.IF u can get the previous page title then set it on pageshow event by getting the id of back button using jquery like this:

$('#MaterialAndQuantityDetails')
        .live(
                'pagebeforeshow',
                function() {
                    // page header Management
                    $('#bkbtnid').html("");
                    $('#bkbtnid').html(BackButtontext);
 });

And if u r thinking how to get the title of previous page then on previous "pagehide" write the code

var BackButtontext = document.getElementById('previous_page_header_id').value;

Here BackButtontext is global variable that is to be used to set the back button text.