How to implement ons-back-button refresh in Onsen 2 RC5?

[CNaik]

Hi Team,

In beta 2.7, we used to refresh page using ons-back-button attribute refresh=“true” when user comes back to a page via back button of another page.

But struggling doing same in v2 RC5. Have tried options as mentioned on https://onsen.io/v2/docs/js/ons-back-button.html without success. Could you kindly let me direct to any sample if exist OR give a hint to right direction?

Regards,
CNaik.

[Fran Diox]

@CNaik Hi! Those attributes were removed before RC. The easiest way to do this is: document.querySelector('ons-back-button').options = {refresh: true};. If this does not work please let us know.

You can also overwrite backButton’s functionality:

document.querySelector('ons-back-button').onClick = function() {
   document.querySelector('ons-navigator').popPage({refresh: true});
};

Edit: options.refresh was removed in v2.3.0. You can refresh your view on prepop event instead.

[CNaik]

Hi Fran,

I tried this solution but it has one problem. It works fine for first time but throws error in second attempt. The same happens even when I set just ons-button and called popPage manually with refresh option set.

If you follow this pattern -> Page 1 -> pushPage -> Page 2 -> click Back with refresh option set -> Page 1 -> pushPage -> Page 2 -> click Back with refresh option set -> ERROR (given below)

Let me know if I am missing anything.

Regards,
CNaik.

[Fran Diox]

@CNaik No, you were not missing anything :sweat_smile:

https://github.com/OnsenUI/OnsenUI/commit/7e3a2bd6e7e12cabeb7639f666c6c32687447bd4

The page name was undefined after the first refresh. This part was modified recently to implement React support and I guess there could be some bugs like this. Thanks for reporting!

0 frandiox committed to OnsenUI/OnsenUI

fix(ons-navigator): 'popPage' with 'refresh' parameter.

[CNaik]

Hi Fran,

Thanks for the confirmation and a quick fix. Is it anyway possible to get latest build distribution files? I used to get it in your old version of website but couldn’t locate this time as it’s redesigned.

Regards,
CNaik.

[Fran Diox]

@CNaik Looks like we don’t have the nightly build right now after changing the web page. Anyway, you can modify onsenui.js rc.5 with this last commit. I think it’s in line 15878. Replace_this3.name with _this3.pages[index].name and it will probably work :)

[CNaik]

Hi Fran,

Yes, it worked. Though it’s in line 16407 in my case. It was a single instance and hence I replaced it without hesitation. :smiley:

A quick last question in this matter. Why can’t we access ons-back-button in controller using var attribute. We use var to access properties/methods of some other controls but didn’t work for ons-back-button. Is there any specific reason?

Regards,
CNaik.

[Fran Diox]

@CNaik The Angular binding does not implement var for ons-back-button since before it was useless. Now that we can change options and onClick perhaps we should add it :)

[CNaik]

Ah ok…

Yes, that would be better.

Regards,
CNaik.

[CNaik]

Hi Fran,

This solution is not working in one more case.

Here is the pattern: Page1 -> pushPage(page2) -> Page 2 (set back button refresh flag in ons.ready()) -> pushPage(page3) -> Page 3 -> popPage (from api callback with refresh option true) -> Page 2 (ons.ready() gets called and set back button refresh) -> click Back button -> Page1 -> BUT it doesn’t refresh, shows old content. ons.ready() is not called when checked in debug.

Kindly let me know if I am doing anything wrong or need to take different way.

Regards,
CNaik.

[CNaik]

Hi Fran,

I encountered another limitation while trying to solve above problem using normal ons-button executing navigator.popPage().

In pattern I mentioned in previous post, Page1 is brought from Page0 using pushPage() having data in options. Now when coming back to Page1 from Page2 using popPage() with refresh option set, there doesn’t seem to be anyway to get those data back. The data option is not available in popPage(). I think it would be better if you guys allow data in popPage() too.

Let me know if there is any alternative exist.

Regards,
CNaik.

[munsterlander]

@CNaik So your response has got my thinking on a few things and hopefully either you or @Fran-Diox can maybe answer this. I have seen quite a few devs asking about passing data to popups, pages, etc. Why not use a closure (or less ideal nested functions) or a namespace (my preferred method depending on the task at hand) so that data is persistent without fear of losing it? It would be scoped properly and be accessible thus no worries for pushPage or popPage.

[CNaik]

@munsterlander thank you for your reply.

Could you direct me to a sample if you have any?

For dialogs and popups we use the scope so single controller works for a page and its dialogs/popups. But the problem is with navigation pages.

The another possibility I came across googling is to share data via service but we wanted to avoid references in service.

Regards,
CNaik.

[munsterlander]

@CNaik The simplest examples would be:

Namespace:

var myScope = {}; // global Object container
myScope.value = 1;
myScope.increment = function() { myScope.value++; }
myScope.show = function() { alert(myScope.value); }

myScope.value=6;
myScope.increment();
myScope.show(); // alerts 7

To use a closure, which is a more tidy way of doing nested functions with some additional arguments thrown in about proper JS, but I digress:

var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();

add();
add();
add();

// the counter is now 3

https://www.sitepoint.com/javascript-closures-demystified/

I assume (forgive me) that basically you are wanting to capture user defined data on the pages, if so the above methods can provide that. Each has their place and some will argue that each is a best practice and others that neither is a best practice due to being attached to the global scope. I however assert that everything is ultimately attached to the global scope and what we really are talking about is GC. So, with namespace and closure GC does occur or can manually be called.

[CNaik]

@munsterlander thanks a lot for the explanation.

Still I would wait for @Fran-Diox to answer on passing data options in popPage(). If they think it’s useful and implement it then I would use it as it would be more neat and clean way I believe.

Regards,
Chintan.

[CNaik]

@Fran-Diox whenever you get a moment kindly look at my earlier comment in this chain ( https://community.onsen.io/topic/434/how-to-implement-ons-back-button-refresh-in-onsen-2-rc5/11 ) and let me know your thought.

Regards,
CNaik.

[Fran Diox]

@CNaik ons.ready just waits for app initialization (sort of DOMContentLoaded event), what means it’s only useful at the beginning of the app and not 10 min later when you push a new page. For this last scenario, please use page lifecycle events.

Also, if you want to report an issue like that, please make an example where it can be reproduced in Codepen or any other web. I’d recommend to make it in Onsen UI Tutorial app and then export it to Codepen with 1 click.

About the data object for popPage, well, we may add it to popPage at some point but at least for now it’s only available for pushing methods.

[CNaik]

@Fran-Diox thanks a lot for your reply.

For now, we have taken different approach. we are passing a callback function in data option while pushing page and calling it on back button if data gets changed to update specific part of data and UI.

Regards,
CNaik.