Monaca Onsen UI Discord Chat Github Repo

Problem with ons-navigator replace to page.

  • @Fran-Diox Thank you for your help ! I hope this problem can be fixed soon !

  • Actually I just checked the problem in safari with the implementation from master and I think it’s already been fixed. So maybe we can revisit the issue once again after we release RC.16 if it happens to have persisted somehow.

    Here’s a codepen where it should be working - if it’s not working for you please tell us.

    As for the cause of the issue - I guess safari is a little slow on removing its dom elements, so when our callback tries to remove the old page it finds the temporary mask in its place. And maybe some promise is being rejected as a result which is why we don’t get an error in the console.

    So that’s pretty much it - we’re calling _destroy on the mask instead of the old page. For now lets wait for RC.16.

  • @IliaSky I have checked your codepen and it worked correctly. Thank you very much for your information. By the way, is there any way that I can change the animation of replaceToPage similar with PopPage, now it is same with PushPage and do you have any information about when RC.16 will be released?

  • @minhnd As per the documentation here:

    All the methods allow options to be set including animations.

  • Onsen UI

    @minhnd Maybe this is what you are looking for.

  • @minhnd As @munsterlander mentioned - you can specify the animation options for replacePage the exact same way as for the other methods.

    navi.replacePage('somepage.html', {animation: 'fade'});

    Unfortunately though if you want to change the direction of the animation there is currently no easy way to do it. @Fran-Diox’s answer contains a custom reverse animator which would solve your problem, but it’s kindof big, so an alternative would be simply using popPage:

    var index = navi.children.length - 1;
    navi.insertPage(index, 'somepage.html', {animation: 'none'});

    And for the info about RC.16 unfortunately I am not really sure - we seem to have made some breaking changes in master currently, so it may take us some time before we fix them. If you want to use replacePage right now you could just add this to your app (the implementation @master right now):

    navi.replacePage = function (page, options) {
      return this.pushPage(page, options || {})
        .then(function(resolvedValue) {
          if (navi.pages.length > 1) {
            navi.pages[navi.pages.length - 2]._destroy();
          return Promise.resolve(resolvedValue);

  • @IliaSky Sorry but when I build my app with the version of onsenui in your codepen…It still have errors with replacePage. (master version). Can you take a look?

    0_1470220356625_Screen Shot 2016-08-03 at 5.30.10 PM.png

  • @minhnd The version which I used in the codepen is still RC.15 actually.

    I have just added the code which you can see in my last post. It seems that you haven’t added it, since I can see that the error is still coming from onsenui.js - if you have added it then the new code should be executed, not the one from onsenui.js.

    If you add the code from the last post (where navi should be your navigator) you should be fine.

    As for the other issue - you seem to be using ons-lazy-repeat and have forgotten to add the createItemContent method of your delegate object.

    Also on a sidenote - if you’re not focused on using slide-ios - I think the problem shouldn’t exist with say fade-ios, and also may look better if you want to have the animation in reverse since it’s basically the same in both directions.

  • @IliaSky I have added the new code. But it still created many page like this. 0_1470269922531_Screen Shot 2016-08-04 at 7.16.04 AM.png

  • @minhnd hmm… would you be able to reproduce it in a codepen, so that I can take a look at it?

    Also have you tried either the fade animation or the insertPage + popPage solutions?