Back Button - 1.3.0 version

[caseman72]

I upgraded our site to the 1.3.0 versions and when you go back a page the site double transitions every time. I am not sure what is causing this so I created a plunkr to try to reproduce the problem - well when I click back (to the home page) I get an error:

TypeError: toPage.data(...) is undefined

This error doesn't happen in the app that does "double transitions" - I tried swapping things like jquery and angular but it still happens.

http://plnkr.co/edit/B3v8uaJTCwTsqRIVmxsy http://run.plnkr.co/1BD8wX933GDySh3H/

Click Page2 and then back to get the error ...

[caseman72]

I found the issue - I have code to look for the back button to the base href - when it happens all pages disappear (like the above examples) but without errors - I just "changePage" home to handle this event. Hopefully somebody will look at the above examples and say "why don't you do this..."

The changePage was using a slide transition and "fast" but made it look like double transitions - it's still not perfect but better the transition set to "none" and speed = 100;

Here's the code:

// refresh and back button weird things are handled here ...
//   TIP: url and '<div id="main" ...' dependencies!!
$(document).on("pagechange", function(e, data) {
  if ($.fn.page_not_found()) return;

  var loc_pathname = $.fn.page_name();
  var page_is_base = (loc_pathname === $.fn.base_href);
  var to_page = data.toPage.attr("id") || "";

  if (to_page == "main") { // #main is base - if not go there
    if (!page_is_base) {
      $("#main").fadeOut("fast"), window.location.replace($.fn.base_href);
    }
  }
  else if (page_is_base) { // we're on base but #to_page isn't correct select #main
    $.mobile.changePage($("#main"), {changeHash: false, transition: "none", reverse: true, speed: 100});
  }
  else { // we're on page /base/href/foobar/ and #foobar exists but #to_page isn't correct ~ this will cause you pain
    loc_pathname.replace($.fn.page_id_regex, function() {
      if (arguments.length > 1 && arguments[1] != to_page) {
        var url_page_dom = $("#"+ arguments[1]);
        if (url_page_dom.length) {
          $.mobile.changePage(url_page_dom, {changeHash: false, transition: $.fn.page_transition, speed: "fast"});
        }
      }
    });
  }
});

[tbosch]

Hi, your example above should work. Will work on this issue soon. Problem is, that jqm tries to load the #main page (from history back) within the current page (in the error case page2.html). This seems to be a bug in jqm itself, see the function $.mobile.getClosestBaseUrl().

Tobias

[caseman72]

Here's another bug with Back Button - same plunkr - I just added slidedown transitions: http://plnkr.co/edit/B3v8uaJTCwTsqRIVmxsy

Repo:

1. Home page - click page 2
2. Page 2 click page 3 - transition is slidedow
3. Click back - notice the transition is reverse - slideup
4. Click Page 2 again - transition is stuck on slideup
5. Click Page 3 - slideup

Expected:

1. Back reverses transition
2. Forward (after back) does normal (not reversed) transition

Actual:

1. Back reverse transition
2. Forward (after back) is stuck on reversed transitions

[caseman72]

Ok - I found and fixed the reverse problem:

Change line 1589 from this: var navConfig = newRoute.jqmOptions || {};

To: var navConfig = angular.extend({}, newRoute.jqmOptions || {});

Then pass it to the restoreOrSaveTransitionForUrlChange method - if you log the $history.urlStack - you will see that the jqmOptions all change with the navConfig changes. So all reverse value become true when you set navConfig.reverse = true - and the transition changes too ...

This change fixed the problem in our system.

[tbosch]

Hi, with the last commit the problem with the back button is working now (also in your plunk). Tobias

[tbosch]

Hi, now all problems are solved:

• no exception or double transition when going back
• correct transition when going back/forth multiple times.

Thanks for reporting! Tobias