Problem with ons-navigator replace to page.

[minhnd]

Hi,

I have a serious problem with ons-navigator.

I have Page A and Page B.

I tried to push from page A to page B. In page B, I use replaceToPage(‘PageB’) ( delete page B and create new page B with new data). But sometime, the navigator create more than 1 page B, it did not delete the Page B, just create new page B. So I have more than 1 page B in ons-navigator.

Can you guys suggest me solution or this problem?

[munsterlander]

@minhnd Prior to pushing the page, in the same function call, just pop the page.

[minhnd]

Maybe you misunderstood me. What I want is:

PageA ----> Pust to Page B ----> Replace to page B ----> Replace to page B -----> Replace to page B -----> popPage to Page A. when I use replaceTOpage(‘B’) , I just change the data but keep the same page.

[munsterlander]

@minhnd Based on what you have stated, there is no need to keep pushing page B. Just change the data. Is there a specific reason you need to keep pushing it?

[minhnd]

For more detail, I have a list of product. I choose products to edit. Page B is an edit page. So I want to swipe left to edit the next product, swipe to edit previous product. I use replaceToPage to have the transition effect.

[Fran Diox]

@minhnd I don’t see any problem at all. It works here.

[minhnd]

@Fran-Diox The sample you sent me worked fine with Chrome Browser. But it did not work with Safari. It created a lot of page2 !

[Fran Diox]

@minhnd Thanks, we’ll check it out!

[minhnd]

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

[IliaSky]

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.

[minhnd]

@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?

[munsterlander]

@minhnd As per the documentation here: https://onsen.io/v2/docs/js/ons-navigator.html#methods-summary

All the methods allow options to be set including animations.

[Fran Diox]

@minhnd Maybe this is what you are looking for.

[IliaSky]

@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'});
navi.popPage();

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();
      }
      this._updateLastPageBackButton();

      return Promise.resolve(resolvedValue);
    });
}

[minhnd]

@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?

[IliaSky]

@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.

[minhnd]

@IliaSky I have added the new code. But it still created many page like this.

[IliaSky]

@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?