I am using the skipLocationChange property with true value so I can hide the URL in the browser. It is working fine. But for one of my features, I am using CanDeactivate guard so I can warn the user to save changes before leaving the current page. I am just displaying one pop-up to take confirmation from the user. If the user clicks on "OK" then he is navigating to the target page without any issue also the URL is also hidden in the browser.
But If the user clicks on the "Cancel" button then he is staying on the same page but the problem is here current page URL is getting appended to the base URL in the browser. Which I don't want. I just want the URL to be hidden with the cancel case too.
I am also attaching the link to a sample project created using stackblitz:
https://stackblitz.com/edit/angular-ivy-uqq8sg?file=src/app/app.component.html
Steps to produce an issue in sample project:
Open the user-details page by clicking on the user-details link.
Fill out the user details form and click on the page-one link then it will show a confirmation window click on cancel.
User will stay on the same page but it will also append the user-details URL in the browser.
Note: This question Router guard skip location change does not give the answer to my question because that using canActivate guard, not the canDeactivate guard. In canActivate guard we use router.navigateByURL method where we can set skipLocationChange to true value but in canDeactivate guard for canceling navigation we don't use a router.navigateByURL method
Thanks in advance.
The code is taken from here
What I changed:
In the component, return pure value, not observer so in the guard I can use it directly
return true; //return of(true)
In the guard, navigate by router service instead of just return false/true
this.router.navigate([state.url], { skipLocationChange: true });
Forked stackblitz
Related
When I am navigating to component then I am using this code
this.router.navigate(['', ROUTE_CONSTANTS.CONTRACT, ROUTE_CONSTANTS.CONTRACT_EDIT, {selectedContract: btoa(JSON.stringify(selectedContract))}]);
this brings to edit page now there is cancel button on edit page and that should bring to previous page
this.router.navigate(['/', ROUTE_CONSTANTS.CONTRACT],{
queryParamsHandling: 'merge'
});
everything works well, but while navigating from cancel button in browser url previous url path with all parameters are still there like this :
http://localhost:4200/contract/edit;selectedContract=eyJuYW1lIjoiMTBmZWIxIiwidmVyc2lvbiI6InYxIiwiZW52aXJvbm1lbnROYW1lIjoiaW50ZWciLCJlbnZpcm9ubWVudElkIjoiZjBmOGNiYTAtY2U0MS00ODQ5LWFjZjEtMjkxODRlMmE2N2M1IiwiZW52aXJvbm1lbnRUeXBlIjoiTm9uLVByb2R1Y3Rpb24iLCJleHRlcm5hbElkIjoiMWJiNDgyNTQtODJiMS00ZWFlLWFlMjAtOTE0NTAxOTNlYzdkIiwiZGVzY3JpcHRpb24iOiJ0ZXN0MSAxMGZlYjEiLCJhc3NldFR5cGVJZHMiOlsiY29yZS5iYXNpY2FyZWEiLCJjb3JlLmJhc2ljc2l0ZSJdLCJtb2RpZmllZE9uIjoiMjAyMi0wOC0wMSAwNjozMjoxMi4zMiIsImluZGV4IjoxLCJzdGF0dXMiOjEsInN0YXR1c1RleHQiOiJPREFUQV9DT05UUkFDVC5TVEFUVVMuT
I want to remove
/edit;selectedContract=eyJuYW1lIjoiMTBmZWIxIiwidmVyc2lvbiI6InYxIiwiZW52aXJvbm1lbnROYW1lIjoiaW50ZWciLCJlbnZpcm9ubWVudElkIjoiZjBmOGNiYTAtY2U0MS00ODQ5LWFjZjEtMjkxODRlMmE2N2M1IiwiZW52aXJvbm1lbnRUeXBlIjoiTm9uLVByb2R1Y3Rpb24iLCJleHRlcm5hbElkIjoiMWJiNDgyNTQtODJiMS00ZWFlLWFlMjAtOTE0NTAxOTNlYzdkIiwiZGVzY3JpcHRpb24iOiJ0ZXN0MSAxMGZlYjEiLCJhc3NldFR5cGVJZHMiOlsiY29yZS5iYXNpY2FyZWEiLCJjb3JlLmJhc2ljc2l0ZSJdLCJtb2RpZmllZE9uIjoiMjAyMi0wOC0wMSAwNjozMjoxMi4zMiIsImluZGV4IjoxLCJzdGF0dXMiOjEsInN0YXR1c1RleHQiOiJPREFUQV9DT05UUkFDVC5TVEFUVVMuT
while coming back on contract route
I tried approaches based on this link : How to update previous page URL in Angular
But still I am not able to do so
I have a line of code:
location.href = 'payments/basic.php';
It works fine, but a user can simply press the Esc key to cancel the operation. I tried to use an event listener to prevent the Esc key from being pressed, but it only works while the user is on the initial page. As soon as they are being redirected, it stops working and they can quickly press the Esc key or the big X beside the address bar in their browser to cancel the redirect.
Is there a way I can completely prevent that?
Edit:
The reason I want to do this is that upon login, they are automatically sent to the index page. I have a flag in my DB which checks if a user has made payment. And then on the index page, I have a little script that queries the DB to check if the flag is true or false. If it's false, they are immediately notified that they are being redirected to make their payment. If at this point of redirection, they cancel, they will be able to remain on the Index page without payment.
I think the only way to prevent the Esc key from stopping navigation is to not navigate away from the original page at all. Instead of doing
location.href = 'payments/basic.php';
make an XHR or fetch request to basic.php, and populate the current document with the results, instead of loading an entirely new document - just like how a SPA works.
(You will almost certainly want to make some changes to basic.php - eg, have it return easily-parseable JSON containing the data to populate the page with instead of an HTML document)
Regarding the edit
upon login, they are automatically sent to the index page
If at this point of redirection, they cancel, they will be able to remain on the Index page without payment.
If you're trying to prevent access the the original page, then just don't serve the original page until you've checked the flag in the database. Don't serve the index page to begin with until you've validated the user's credentials. If they aren't authorized, redirect them in PHP (not in JS) to the payments page. No need to mess with the user's escape key.
Why not do it the other way around?
Default to the payment page, if payment is already made, then redirect to index. lol.
i am facing a situation where the navigation calls just keep stacking as can be seen in the picture bellow.
This is a problem specially because when i call the logout function it just stack another navigation entry and therefore user could use the back button to see previous screens.
Is there a way to clean the navigation entry history?
Set clearHistory to true
// Upon logout, navigate to Login / whichever component you like with `clearHistory` flag
this.$navigateTo(Login, { clearHistory: true });
I am working on a website, where url parameter gets updated based on user action, according to which I update the webpage without refreshing.
Consider the scenario of E-commerce where url changes when user clicks on filters and then updated products gets displayed.
Now the problem is, when user clicks on Browsers's back button the browser goes back to previous url-parameter, but page did not gets changed. I want to change the page also based on url parameter that gets changed after back button clicked.
I have tried this solution:
$($window).on('popstate', function (e) {
// Update the page also
});
The problem with this code is, this gets fired as url changes, means it does not care about if browser back button is clicked, or url is changing using the jQuery. So if I am changing url based on user interaction, the popstate callback will be called and my custom function also. To update the page I am using https requests, so http api gets called two times.
Is there any way to check if only "Back button" is clicked?
I would recommend you to change your design a litle bit and trigger all content updates (the product list in your case) by listening to url changes, not only url changes caused by the back button. So instead of triggering any re-rendering on click events, let these buttons be regular link to the url that represent your content and trigger the functionality from the popstate event.
This is how all MVVM-frameworks like Angular.js, Backbone etc are designed and meant to be used.
By doing this it will also be so much easier for you to maintain the application in the long run.
Good luck!
You can do this with sessionStorage! Below is the relevant part of an answer I always refer to for stuff like this https://stackoverflow.com/a/45408832
sessionStorage is a storage type like localStorage but it only saves your data for the current tab.
Session storage can be used like this.
sessionStorage.setItem('key', 'value'); //saves the value
sessionStorage.getItem('key'); //gets the saved value
performance.navigation.type is the browser is the variable that hold users navigation info.
if(performance.navigation.type == 2){
//User is coming with back button
}
So to put it all together, you can set/update a sessionStorage item as part of the callback of the click event for your filter, then performance.navigation.type to check if they used the back button to load the page and apply the data!
I am displaying a warning dialog box whenever user tries to navigate from current page without saving data on current page. Its working fine now I want to call a function (Spring controller, its kind of java function which handled URL mappings ) when user clicks on Ok (in warning dialog box) and then he should get redirectd to desired page.
Let me try to make it simple (Its confusing for me also):
User is on registration page, he/she made some changes and didn't save it.
Now user clicked on any other link for example he clicked on About Us link.
Now I want to execute my spring controller.
After execution of controller user should get navigated to About Us page.
For this I need to save value of clicked hyperlink and pass it to my spring controller.
So how can I store URL of clicked link (URL of About Us page in above example) ?
PS: I will really appreciate if anybody can edit my question to make it easier to understand.
if you use jQuery, you can attach an event handler to onclick to all links in the page and once clicked the handler should save the href attribute to some variable. then create a onbeforeunload event listener on your window, where you can use the value however you want, call your controller or save the value in a cookie or something.
Are all the links on the page pointing to your spring application? If there are no external links anywhere (pointing to external resource) - then you could write a simple Filter where you can save the requested page into the session.
Otherwise, if there are links to external resources - you would need to rewrite them from www.external.com to www.my.com\MagicController?requestedPage=www.external.com. Controller will save the link and send a redirect in HTTP header to the requested page. This is a common practice - even google does that (check out the google search result links for how it will look like).
Added: Weird, but google does that only on some rare occasions, so you probably won't be able to find an example there.
Don't require to preserve the href of selected tab.Do one thing attach same javascript function with each tab and pass the "this" as parameter of function.
Function of the javascript is
function Attach(ele)
{
// 1. Find the handle of selected tag and store in the variable.
ele=$(ele);
// 2. Find the value of href
var href=ele.attr("href");
// 3. Perform server side operation you want.
// 4. redirect to another page.
window.location=href;
return false;
}