Force reload component in Nativescript - nativescript

I want to re-create and animate the same view back when navigated to same page.
this.routerExtension.navigate(['/home']);
Currently if i am in home page and button is tapped in same page which fires the above code, the component is not reloaded. I want to forcefully reload and animate the same view into stack.

It is a bit of a hack, but I got around this by making two routes that refer to the same component, something like '/home' and '/home1', then alternating which one I used.
It would be nice if there was an option in routerExtension to do this.

Related

How to switch pages in the Xamarin Shell without a back button?

I want to make a home button at the top of the Shell-based APP.
(Referring to the Xanimals app.)
The purpose of this home button is to move to one of the specific Routined pages in the Shell.
The gotoasync() function adds the previous page to the navigation stack by default, and the Backward button is enabled.
I don't want the back button, I just want to move like when you press the flyout button in Shell structure.
Please help me.
You could try this method which switches to a different navigation stack; assuming the home view is registered with a route name of home in your AppShell.xaml
await Shell.Current.GoToAsync("//home");
Here's a reference to all route formats:
https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/shell/navigation#absolute-routes
Try the below method :
in your home button click event:
Shell.Current.CurrentItem.CurrentItem.Items.Add(Your new Page);
Shell.Current.CurrentItem.CurrentItem.Items.RemoveAt(0);

CKEditor (in a SPA) freezes when navigating back to the editor page

I'm trying to integrate CKEditor in a page of a SPA (Single Page Application).
CKEditor behaves correctly within the SPA page on the first visit, but not on next visits. For example, when pressing the backward browser arrow (to display the previous SPA page) and then the forward arrow (to display again the SPA page with CKEditor), CKEditor appears but the content has been erased and it's not reacting anymore. There is no carret when cliking on the text area. Also all API calls (such as setData() or resize()) have no effect anymore (whereas they were working on fist visit).
I presume CKEditor doesn't like its element to be removed from the DOM (that's what happens when switching to another page) and then be re-added to the DOM (that's what happens when visiting the page again).
EDIT ON July 5 2017
Thanks for your proposition to destroy CKEditor when leaving the page and to recreate it when navigating back, but this causes the lost of the editor state such as the the scrollbar position, the caret position, text selection, etc...
Ideally I would like to make it possible for a user to visit another page while he is in the middle of writing something in the editor (for example to check an information or copy a content from another page) and then to continue exactly where he was (no change on scrollbar, caret, selection,...) when he navigates back to the editor.
Is is possible?
Removing CKEditor just by removing its parent container like in your fiddle is not a good solution as CKEditor attaches some listeners to the DOM and by removing the container you are detaching those listeners which are not reattached then.
You should destroy the editor before removing from DOM and then recreate it. Remember that destroying happens in an async manner so to know when it is finished you may listen to destroy event.
Here is modified fiddle using destroy method (without handling destroy event which should be added).
EDIT ON July 10 2017
To preserve the state of the editor (scrollbar position, text selection, etc) between destroy - recreate, state of all this elements should be retained before destroying editor and then set after recreating it. It is doable, but requires some work and quite a lot of custom code.
Ideally I would like to make it possible for a user to visit another page while he is in the middle of writing something in the editor
Since you are creating a SPA application, for the above the better solution will be to use some floating/fixed container in which CKEditor is placed and which does not reload with rest of the page upon navigation (e.g. the same as Facebook chat works).
Also remember that recreating CKEditor takes some time (very short, but it may be still visible) so on every page navigation it will be visible for the user that something is happening with the editor even though its state does not changed.

navigation bar not show when i drag to show another page

first i use the PAGGING library
https://github.com/uacaps/PageMenu
i found that it's the problem , when i connect any button to show another controller it it navigate me to that controller but the navigation not shown , for example back button
i try many solutions and non of them work for example i try to make the menu manual but the back button show but not work
i create button and connect to this action
self.navigationController?.popViewControllerAnimated(true)
didn't work
You need to have a pushViewController first. Ensure that you are displaying your viewcontrollers through push.
self.navigationController?.pushViewControllerAnimated(true)
You do not need to code anything to display the previous controller when you have push.

Ordering issue in modal window

I have a problem with a component that loads in to a modal window. I am using the Alpha User Points system and it has a component that gives you a full list of yous site's users. It also gives you the ability to order by username, by points etc. If I use it outside of modal window it works fine. If I use it in to modal window, ordering don't work!!! When I put my mouse over table's headers, outside of modal window gives this...javascript:tableOrdering('aup.referreid','asc','');In to modal window I see this...javascript:tableOrdering('aup.referreid','asc','');?ml=1 Using Firebug, I remove this ?ml=1 and it works into modal also!!! So the question is, why in to modal window gives this ?ml=1, what is this? And how will I remove it?
Well here is the answer... I use the Modalizer extension of nonumber.nl. I was loading my component through modalizer's modal box, this is why I had this issue. So, if anyone use Modalizer to popup components and have the same problem with me, just go to modalizer's Plugin Manager, find the option Convert Links inside Window and disable it!!! But, after this, if you want to add link in to modal window and you don't want to show-up the whole front page but only the component or what ever this is, you have to add at the end of the link this &ml=1.

Firefox back button vs iframes

In Firefox if the window.location of an iframe is changed, this gets populated to the history of the top level window.
If the user now clicks the browser back button, the contents of the iframe will change rather than the browser going back to the previous HTML page.
This is totally wrong for some architectures.
Is there any way with JavaScript to prevent Firefox (3.x) from doing this?
(Please stick to just this question, not why/when/how iframes versus other techniques should be used.)
Use .location.replace
I have the same issue and was researching possible ways around it when I read this. I don't know if you solved the problem, but I think I'm going to use the unload event in the IFrame'd window to notify the parent window when it's unloaded.
If the iframe is closed by a 'valid' method, a variable is set at the parent to say the iframe is expected to unload
If the parent reloads / changes the src of the iframe a variable is set to say the unload is expected
If an unexpected unload happens in the iframe I assume it was the back button and update the parent page accordingly (e.g. jump another step back in the parent's history, or do something else).
The only ugly case here is if the parent page is unloaded and the iframe also throws unload - depending on how quickly the parent page changes you might get a race condition where the parent's iframe unload handler is or isn't fired.

Resources