i am working in AngularJs and i have a problem.
When the user push the login button, the page go back to the previous page, but i only want go back if one of the routeprovider page and go to "/" route if teh previous page is another page. Actualy i use:
if (history.length > 1)
{
history.back();
}
else
{
$location.url("/");
}
How can i see the previous page url and compare it?
JavaScript allows navigation based on window.history, but it does not allow reading the actual history. So you cannot check the previous URL.
You may want to try document.referrer to check the previous URL (before entering the AngularJS app, I presume, as after entering you do not reload the page).
You may also build your history manually in AngularJS to see whether you have previously been navigating through your application: angularjs getting previous route path
$scope.$on('$routeChangeStart', function(next, current) {
... you could trigger something here ...
});
Please refere to $routeChangeStart of angular which might help you for your query.
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 need a way to go back to a previous page after the current page has been reloaded.
At the moment if I use my simple history -1 on the page that has been reloaded in jQuery it will send me back to the same (reloaded)page as is only expected.
Is there a way to identify that the page is the same page and therefore ignore it as a relevant option to go back to?
Here is the code I am using at the moment:
$(document).ready(function(){
$('a.back-link').click(function(){
parent.history.back();
return false;
});
});
Thanks,
Aidan
You could always use document.referrer to get the address of the page that originally referred you to your current page (location.reload() should not affect the referrer variable)
location.href = document.referrer;
A working example can be found here http://iamdevelop.in/referrer
Using your history.go(-1), you can simply specify a different number to go a different number of pages.
Try using:
window.history.go(-2);
This should then skip that 1 back page which is the same and go back to the page before that.
Source
I am using HTML and JavaScript to write Android APP, but I have a problem that when go back from current page to the previous page, the page is reloaded and the selection and setting when I made in the first goes to default.
For example: On the first page user can select country and city and then navigate to second page.
If user clicks on back button (which calls window.history.back(); or href="javascript:history.back(-1);")
, then all the selection he made are lost and default selections are shown.
It works fine in native browser of Android.
How to maintain state of selection?
Thanks in advance!
You need to make dummy history to disable history back button.
var originalHash = document.hash || "#dummyMain"
location.assign("#dummyBack")
location.assign(originalHash)
window.addEventListener("popstate",function(){
if(location.hash == "#dummyBack"){
window.history.pushState(null,null,originalHash)
}else{
originalHash = location.hash
}
});
The code above create dummy page history and checks if page transitions are occurred via history back button or not and if so,force page move to current page again to stop history back action.
Since You didn't put any code in the question,It's hardly possible to say it will work or not but I guess once you load this code,it should disable all page back action.
If you are using PC/Mac to use this site,please try to open developper tools/firebug javascript console and copy/paste the code and press history back button to see how it works.
I find a good way to maintain the data of previous page, which use localStorage store the data as key value before leaving this page and again when come back to this page you can get your data again from localStorage` and display it.
Because the data which is loaded by AJAX will be last on history back.
Hope this help someone may has this problem.
I'm attempting to rewrite a small part of user history as soon as they visit my angular application.
Currently I'm attempting to change the last history item to a certain page once the app loads, however instead of just changing the history, the current page/url also changes.
In my app.js where I define my routes for angular I also have a .run containing
history.pushState({}, 'Restaurants List', document.URL.match(/.+#\//).toString() + 'orders/restaurants')
this instantly will change my url from the intended target to the new history entry.
I've also tried using replaceState without any success.
A solution I've thought of is first changing the history then redirecting the user which works fine, but I want to avoid that additional overhead.
Is there any way to just add to the history without going to it so that if the user hits back it goes to a different page?
On my Single Page Application (Javascript (AngularJs) webapp), I'm displaying a paginated items list.
I'm displaying 10 items per page.
In order to retain the current pagination opened by the user at any time while this one navigates on other page, I put the current page number on browser's localStorage.
Here's an example of workflow:
The user goes to myItemsList.html.
He opens the page 2 involving the url: myItemsList.html?page=2.
Then, he goes to another page: myOtherPage.html.
He goes back to the link initially pointing to myItemsList.html, that displays directly thanks to localStorage the page myItemsList.html?page=2 in order to potentially continue his navigation.
Would it confuse the user, maybe expecting to see the page 1 as a new starting navigation.
If I display at the top of the list, a kind of label like "Page 2" in order to warn him that he's seeing the preceding portion of his navigation, isn't it UX-friendly?
Or should I completely avoid persisting current pagination?
Here's what could happen if I don't persist the current viewed page:
The user goes to myItemsList.html.
He opens the page 2 involving the url: myItemsList.html?page=2
He opens an item in this page (the "show" page), leading to: myItemsList.html?id=123
He clicks on the browser's back button, causing a refresh of myItemsList.html (since a Single Page Application). The current pagination (page 2) would be lost and the user would need to restart it in order to continue its items discovery.
This seems really touchy...
What strategy should I choose for a use case like this?
saving the progress through navigation is the expected behavior in UX design of SPA, so maintaining the page he was in the correct choice, and since it is a pagination it won't be an issue even if the user wants to go back to any page, it will only take a click.
First of all I would avoid using localstorage and use a service instead to persist ur page counter.
Secondly u dont need to persist pg counter to anywhere else but in a scope variable for refreshing to mext page data. You can even think about just adding to results similar to infinitite scroll use cases. But either way, u can use local scope variable for pagination.
Whether to go directly to last viewed page - is a more business decision and will depend on needs.
But u can very easily persist or remove persisted data using broadcast and watch and decide on persistence based on event listened to.
Hope thos helps ...
How about maitaining a sort of heirerachy in JS like this :
Suppose a user navigates to a section called Customer Search
customer_search.customer_display.page = 2
Where customer_search is the a subsection , customer_display is the view with pagination you are targetting .
menu.menu_items.page=7
Where menu is the subsection , menu_items is the view with pagination
Might work if your application is organized in a reasonably hierarchical manner .
Probably you could also maintain the page in $scope for that particular controller .
The URL should dictate the navigation.
When I navigate to your website, e.g. example.com, I expect to be on the first page.
When I navigate to a (bookmarked) page of your website, e.g. example.com?page=2, I expect to be on the second page.
When I hit the back button, I expect to be presented with the previous page exactly as it was when I left it. You don't need to refresh the entire page, just listen to the history events and update accordingly.
And I strongly believe that this question doesn't belong to stackoverflow...