1

I have built a mobile application using HTML5 & jquery mobile, I just need to go back to first page each time the back button is pressed.

Let's say I have these pages:

  • Main
  • Product
  • Search
  • Search Result
  • About

Let's say I go:

Main --> Search --> Search Result --> Product, then I went to About page.

When going back, the history would be (if I'm on About page):

About --> Product --> Search Result --> Search --> Main

What I need is to go back directly to Main page each time I press back page and not to go through the history.

I tried to search for this in the last couple without any luck, and it is stopping me from finalizing my app.

I was trying for days to search for answer I came to this code:

jQuery(document).ready(function($) {

  if (window.history && window.history.pushState) {

    $(window).on('popstate', function() {
      var hashLocation = location.hash;
      var hashSplit = hashLocation.split("#!/");
      var hashName = hashSplit[1];

      if (hashName !== '') {
        var hash = window.location.hash;
        if (hash === '') {
            window.location = 'index.html#mainScreen';
        }
      }
    });

  }

});

but still no luck

I also got this code:

$(window).on("navigate", function (event, data) {
  var direction = data.state.direction;
  if (direction == 'back') {
    window.location = 'index.html#mainScreen';
  }
});

It is going back to the mainScreen page if the direction is back, but it showing the last page before going back to the main page.

Omar
  • 32,302
  • 9
  • 69
  • 112
ili
  • 23
  • 1
  • 4
  • http://stackoverflow.com/questions/17594413/js-or-jquery-browser-back-button-click-detector – el3ien Nov 17 '14 at 18:35
  • @billthelizard this is a nice question that would benefit others using JQM. Honestly, you won't find it in docs. However, you could dig really deep into JQM code and do some experiments in order to reach a solution. I'm voting to reopen :) – Omar Nov 17 '14 at 18:54
  • There is a much better solution using JQM events. Hopefully your question gets reopened, until then, read about `pagecontainerbeforechange`. – Omar Nov 17 '14 at 19:09
  • I will, thank you Omar :) – ili Nov 17 '14 at 19:12
  • Update your post with what you have tried and failed. – Omar Nov 17 '14 at 19:27

1 Answers1

1

For any navigation-related issues, always lean on pagecontainerbforechange event. It is an event that fires before changing pages; it is a popstate, hashchange and navigate all in one event.

This event fires twice on each page change, first time it returns toPage as a string, and second time as an object. To alter toPage value, it should be a string, so you need to do changes on first time it fires.

Also, it returns options object which can tell you the direction of navigation options.direction, whether forward or back.

$(document).on("pagecontainerbeforechange", function (e, data) {
    if (typeof data.toPage == "string" && data.options.direction == "back" && data.prevPage[0].id == "aboutPage") {
        data.toPage = "#mainScreen"; /* redirect to main page */
        data.options.transition = "flip"; /* optional */
    }
});

In the code above, you need to make sure that:

  1. toPage is a string
  2. options.direction is back
  3. prevPage is the page you want to redirect user from when back button is hit

Demo

Omar
  • 32,302
  • 9
  • 69
  • 112
  • thank you Omar, that worked for me, I'm making more tests on my android phone. thx again. – ili Nov 18 '14 at 16:47
  • I tried this solution in my project with multi html, but doesn't work. It stays in the same page. – rdon Oct 16 '15 at 08:32
  • @rdon post a question with your code and you want to achieve, I will help you out. – Omar Oct 16 '15 at 09:10
  • ok @Omar, here is my question: [link](http://stackoverflow.com/questions/33168187/jquery-mobile-multi-html-go-back-to-first-page) – rdon Oct 16 '15 at 10:27