jQuery Mobile - back button

Question

I am developing the application using jQuery Mobile 4.1.

In my app, I have two html pages like login.html and home.html. In the home.html have 3 pages. () like menupage, searchpage, resultpage.

The project flow is login.html ---> home.html. In home.html, menupage is displayed as a first page. If I choose the some option in the menupage it will move to searchpage and then resultpage. consider, currently I am in the resultpage. If I press the back button on the mobile browsers (iPhone-safari, Android-chrome) then it moves to the login.html.

But I want to display the searchPage. How to solve this one? is it possible to do this?

[Note : The pages should be in the single html page(home.html).

Answer 1

use the attribute data-rel="back" on the anchor tag instead of the hash navigation, this will take you to the previous page

Look at back linking: Here

Answer 2

Newer versions of JQuery mobile API (I guess its newer than 1.5) require adding 'back' button explicitly in header or bottom of each page.

So, try adding this in your page div tags:

data-add-back-btn="true" data-back-btn-text="Back" 

Example:

<div data-role="page" id="page2" data-add-back-btn="true" data-back-btn-text="Back"> 

Answer 3

try

$(document).ready(function(){
    $('mybutton').click(function(){
        parent.history.back();
        return false;
    });
});

or

$(document).ready(function(){
    $('mybutton').click(function(){
        parent.history.back();

    });
});

Answer 4

You can try this script in the header of HTML code:

<script>
   $.extend(  $.mobile , {
   ajaxEnabled: false,
   hashListeningEnabled: false
   });
</script>