Back button problem after redirect in jQuery Mobile

Magento Mobile theme by jQuery mobile is quite easy to get started but there are some issues in jQuery mobile library what is not easy to control at all. Today I will tell you one of popular issue what make the back button of browser doesn’t work after redirect using javascript.

Back button problem after redirect detail

The problem happen when you want to redirect a page to another page in jquery mobile and then user have no way to get back to previous page, what we need to navigate to previous page via back button. Here is the way you usually use to redirect a page to a extenal page

[code lang=”js”]

window.location.href = "page2.html";

[/code]

And the problem happen, you have no way to get back with back button of browser.

Solve the back button problem in jQuery mobile redirection

We have 2 ways to solve this issue

[ordered_list style=”decimal”]

1. Capture the navigation event and control the previous page manually
2. Re-use the click event of jquery mobile for A tag

[/ordered_list]

The option (1) will make the problem much more complex since we have to control the previous and the next page history. jQuery mobile already control them for us via external rel of tag a. Let ‘s implement a hidden a tag to handle the event like this.

[code lang=”xhtml”]

<a id="hidden-redirection-tag" href="#" rel="external" style="display:none;">hidden link</a>

[/code]

And then handle the redirection by javascript to click the external A link

[code lang=”js”]

$("#hidden-redirection-tag").attr("href", "page2.html");
$("#hidden-redirection-tag")[0].click();

[/code]

Now the javascript will redirect current page to page2.html and you can feel free to click back button to get back the previosu page or next page.