Nativescript: Reload of current Page

[NathanaelA]

If I make some changes programmatically to the current page; is their a way to reset the page back to what was loaded easily. If I do a "frame.topmost().navigate("same-page");" then I get an additional page in my back stack. I don't see anything off of "Page" or "Frame" that would allow me to do a reload.

Or is their a way to navigate w/o adding to the backStack, or a way to pop the last entry off the backStack?

[emiloberg]

Frame module exposes stack() which you should be able to pop, just as is done internally.

[NathanaelA]

Attempting to _popFromFrameStack() then navigate('main-page') to load the new page appears to cause all sorts of weirdness (at least on Android). On the the main page the page disappears; and the app goes into a weird state of no page visible. You are either back at the prior app or desktop. Then attempting to reload the app causes it to crash as the app actually never exited properly.

Any other ideas on how I can cause the main page to reload without messing up the stack?

[emiloberg]

I haven't dived down into the frameStack at all, but shouldn't you pop the frameStack _after_ you navigated to main-page?

[NathanaelA]

Technically, If you pop the framestack after; then I'm pretty sure you are going back to the prior page that is in the queue which will be the modified version (the one I'm trying to reset).

However, I just tested this and I get the same results as above -- it doesn't like me doing a navigate then a popFromFrameStack any more than it liked a popFromFrameStack then navigate -- I get the exact same result as above where I'm dropped back in the prior application or desktop and my app is left in a weird state of no running window.

[NathanaelA]

I've worked out a partial solution for this for my realtime development system ( http://www.github.com/nathanaela/nativescript-livesync ) however, in all reality I would love to make this "perfect". So any other advise on this would be great.

[jkappel71]

I am having a similar issue. I have a splash screen that does some pre-initialization work in my app which navigates to the main screen when it's done. I'd like to pop that splash screen out of the back stack. I have tried popping it both before and just after the navigate command and see the same results as above.

Does anyone know how to pop a frame out of the back stack so that it can't be navigated back to?

[hamorphis]

When you navigate to the main screen include clearHistory: true in the NavigationEntry.

frame.topmost().navigate({ moduleName: "main-page", clearHistory: true });

The clearHistory option will be available with the 1.4.0 release due in a couple of days.

[hamorphis]

@NathanaelA You can also navigate to the same page with the clearHistory flag raised.

[hamorphis]

You can also prevent a single page from going on the back stack if you navigate to that page using the backstackVisible: false option on the NavigationEntry.

[NathanaelA]

I should probably make a note here, using clearHistory does not solve this issue. I want to reload the current page _without_ affecting history. So that way when I go back I go back to the prior page.

[bhavincb]

any updates?

[it3r4-pineda]

for anyone in the future whose looking for a plain and simple way to just reload the current page, you can use this frameModule.reloadPage();

assuming you have already declared the following:

var frameModule = require("ui/frame");

[dlcole]

frame.reloadPage() works fine on Android, but on iOS I get the error message,

JS ERROR TypeError: frame.reloadPage is not a function. (In 'frame.reloadPage()', 'frame.reloadPage' is undefined)

I'm trying to use backstackVisible: false, as a navigation option, but it seems to be ignored :-(
This is with everything current as of the date of this post.

[vivek-aecor]

Any Updates???

[sohail-kaleem]

For those folks who are trying to avoid those weird problems upon suspend/resume event.
The best option is to move your code from pageLoad event to navigatedTo event.
This will eliminate many weird issues also there won't be a need to refresh the page.

[crowmagnumb]

When I change my theme I need to reload the page so the css gets reinterpreted with the new values but none of the above works? Is there yet a proper way to just reload the current page. Actually, since the change is global I really want to reload all the currently open pages. If I have to programmatically "restart" the app that might be an OK solution as well. Anyway to do this?

[sohail-kaleem]

When I change my theme I need to reload the page so the css gets reinterpreted with the new values but none of the above works? Is there yet a proper way to just reload the current page. Actually, since the change is global I really want to reload all the currently open pages. If I have to programmatically "restart" the app that might be an OK solution as well. Anyway to do this?

I have implemented themes on my App using a different approach, First define all your themes css with respect to theme reference and a class to the Root page.
myTheme.css
.blue-theme .ok-button{
//all your definitions for blue theme goes here
}

on root page class
<Page class="{{ themeInUse }}">
</Page>
From the ViewModel of the root page bind the themeInUse to the user selected theme and that's it. Now all your page css will reflect as per the set theme. There is no need to refresh/reload the page.