How to restore previous state of angular controllers - javascript

I need to keep controllers' state in angular ,for improving some user experiences, during user is visiting different pages.
For instance I have a list, which is created via a directive, and it has a pagination section, so imagine when a user go to page 20 and choose an item, they'll be redirected to the detail page, but when they click back button and return to the previous page they see the first page of the list which is not convenient and they expect to be on page 20 again.
I've come up with several options:
Using a dialog to display second page (item detail), so they can close that modal and return to the previous form without any change.
Redirecting users to the second page with a parameter in URL and then return them with that parameter to understand what page number they have been before.
Keeping some crucial variable globally to store controller state and using them when user comes back.
But I think there should be better ideas like keeping controllers' state during redirection.
Any idea would be appreciated.

Redirecting users to the second page with a parameter in URL and then return them with that parameter to understand what page number they have been before.
I prefer this because you get the added benefit of staying on page 20 when you do a page refresh. Options 1 and 3 do not give you this added benefit. Path params are also bookmark friendly.
Another alternative for you to look into that is almost as good is localstorage
or cookies. I dont think these options are better than your 2 though.

Related

Navigating back to Search Page with same state (JavaScript)

How do I, using JavaScript, retain the state of the search page, when a user clicks into a search result, but then goes back to the main search page.
e.g.
HTML:
https://startech-enterprises.github.io/docs/guides/data-analytics/data-analytics.html
There are 5 elements that determine what is shown on the page:
What tags are clicked in the three filter menus, on the side
What search term is typed into the search menu bar, at the top
The pagination page that is selected, at the bottom
Problem is that whenever I go into the search result, and navigate back to the main search page, the search page resets itself, so I have to re-enter the search criteria again - which can be quite annoying.
If I click 'back' in the browser, the search page state is retained, but the search script stops working. Also, using the 'browser' back button only goes back one 'link' - so if the user clicks on several links in any page (returned from the search), they have to press the 'back' button many times, to get back to the main search page - which again isn't ideal.
Any ideas on how to solve this? Would seem like a fairly common problem?
The site is purely static, (generated using Markdown and Jekyll). Site interactivity is set with Vanilla JavaScript, and SASS/SCSS.
Pls do help!
Many thanks in advance.
Sachin
UPDATE: This has now been solved based on the answers given below
You can simply do it by saving the data in users device . You can do it by using cookies or by localStorage. I prefer localStorage because users can deny cookies easily.
Like this-
localStorage.setItem("tags",tagItemsInAnArray);
And laterlocalStorage.getItem("tags");
You can use localStorage to keep the search filter data. The concept is to keep all filter data in an array and keep that array in the localStorage of the browser before any redirection. Here is an official documentation with implementation of localStorage.
Here is a demo:
//before redirection
let filterData = [];
localStorage.setItem("searchFilter", JSON.stringify(filterData));
//after page-load
let cachedFilterData= JSON.parse(localStorage.getItem("searchFilter"));
if(cachedFilterData.length>0){
//cache data exist
}
//when you need to delete cache
localStorage.removeItem("searchFilter");

how to get Previous Route in Angular 4 app

I have 2 routes defined as homepage and page1. I am going to page1 from homepage by this.router.navigation(with some queryparams).Now once i go to page1, i have some filters,which i can add to get particular data from api.Once i add those filter i change the page1 url by this.router.navigation(with some queryparams).After adding/deleting multiple filter , my url changes many times..Now i have a back button which upon click should navigate me to Homepage.
1.I have tried using history.back/location.back.But i have to click multiple times.(i see that navigationstart gets called multiple times)
2.i have tried a solution using rxjs pairwise
But i am not able to get the previous page(homepage).
3.This is just a situation.Basically i have to get the route of the preious page.I can't hard code the path in backFunc,Because this has to be generic for all of my other similar types of pages.I can come to page1 from any other page, and should be able to go back to the respective page.
Am i missing something very obvious , does Angular 4 provides any way to tackle this?
I'm slightly confused by the question but it should be as simple as just navigating to the homepage by using router.navigate. Failing that, try using https://angular.io/api/common/Location service's back function.
router.navigate has extra parameters like "replaceUrl".
If you set it to true (when you change query params), the browser will consider you don't change page. So an history.back will works.
Have a look at https://angular.io/api/router/NavigationExtras.
this.router.navigate(['/page1'], {replaceUrl: true, queryParams:{...}});

Ionic-1 Navigation

I am working on an Ionic-1 App. I am terrible confused in managing the back history of my app. Consider this scenario:
Start from home page then
Does a 3 step user registration process
After the end of user registration redirect to records page
Now clicking back button (hard or soft back) I want to navigate back to home instead of cycling through user registration process. There are other scenarios like this where back behavior needs to be modified. Are there any references around to implement back behavior systematically? Should I manually define view hierarchy tree structure and somehow figure out where in tree current view is and then go to parent?
As per my suggestion you should pass parameter say 'extraparams' in your url and set it value to 'home'.And on record page controller then make a function on back button say 'goBack()' where you can check if value of 'extraparams' is 'home' and then use $state.go() to navigate to home view.
If you can keep and maintain each and every section using state approach then you can redirect to home page or what ever the page you prefer to redirect to.In that way you have to implement back button like this way, $state.go('homeSate');
or if you can keep 3 steps(registration) as sub states and have try by injecting $rootScope to your controller in which allows you to access your parent(home).

jquery history.go() to a specific page after navigating to different pages

I have a scenario where I want to return to a specific page after I navigate to different pages. The scenario is that a user makes a search, gets the results in the same page. He can then make updates on the a specific result on a different page. I would like to create a link that can bring the user back to the search result page. I am trying to user history.go(specificnumber), but how can I get the variable specificnumber from when the user make its first search to the number of page visited or loaded after the search. Or am I in the wrong direction for the implementation?
Maybe I misunderstood your question but if you just want to go to a previous page you can use window.history.back();
Otherwise if you want to save all input data from user (to user) and use it to navigate next you can just use document.cookies or localStorage.

Clicking the browser Back button to return to an ajax page and have it look the same?

I've tried doing some research on the various jquery history plugins, but I can't find any examples for my situation, so I'm starting to think maybe what I'm trying to do is not possible.
We have a very complicated search page that updates with ajax. Users search using a ton of options, and they get back a list of results which they can sort, page etc. Then if they click on one of the results, it navigates them to another page to view the details. However, if they click Back they do not return back to how the page appeared after all the ajax and javascript updates. They see the search page with none of their results.
I was hoping that I could pull of something with adding a hash before they navigated away, or using one of the jquery history plugins to achieve something similar, so that when they clicked Back, it wouldn't RELOAD the search page, but would just show them their cached version (how it last looked when they clicked on one of the results).
From what I've seen, it looks like most of the examples I've found for ajax and back buttons use a hash value that tells the page how to arrange itself, even allowing for bookmarking the page that includes the hash. I think for me that would mean that I'd basically have to serialize everything in the search page into a hash value, which doesn't seem practical unless I am totally misunderstanding how it works.
Does anyone out there know if this possible?
There are at least 2 ways to do what you want:
"Classic" - store all user search options in cookie or in session, like "last search". So, when user navigates to search page during session, you can read cookie / session and show last search results with that options.
"Modern" way - use HTML5 history API - on each search form a search options object and push it in via history.pushState - when user navigate to other page and then presses "back", browser will use this state to perform a search.
If it's that complex, better you develop your own solution without any plugin. Just use location.hash to get and set hash value and store all form input elements and their values after hash like a querystring input1=a&input2=b
On every form submit update hash querystring
If user navigates back in history read hash value parse it and update your form fields and submit to get search results automatically.
you can check out SammyJS this is the plugin I used for ajax history. Hope it helps

Categories