I have a situation where I need to display two different components say A and B under same URL C. Currently, I' am displaying A which is a modal using Location service's go method which updates URL but doesn't activate Route to load appropriate components. This solution is working fine. The only problem related to this is that if user interacts with browser's back and forward buttons then the other component B mentioned in Route config is displayed which is not what I intended.
I only want to load B under same URL when user refreshes page. For example, if user clicks a button, then I' am loading A by updating browser's URL via Location service giving user the illusion that the URL is properly loaded. Now if at this point, users refreshes the page, I want to display B which is a completely different template.
Is there any way, where I can pass dynamic data in components while loading them without displaying dynamic data in URL?
Related
In my application, I have a multi-page form that lives on the URL http://localhost:3000/form. When I change pages in the form, the URL remains the same, but the state changes to render different views (pages of the form).
A new feature I want to implement is to allow the browser back button to switch views/pages (aka change state) in the multi-page form.
Is this possible? How can I achieve this?
Why exactly do you want to keep the same route? If a user wants to get back to the same state they were at via a deep link they would not be able to with this implementation would they?
If you want to use the same route you can at least use # routes to keep track of where in the form the user is.
Eg.
http://localhost:3000/form#step1,
http://localhost:3000/form#step2
then the back button would work to move them back a step.
my angular application consist of some common custom filters with different report pages.
User Can navigate from one page to another page and he can change filter for each page.
Need to add feature so common filters would maintain for each page.Whenuser navigated back to previous page it should display same filters that user selected in previous page.
For Above use case is it right to use ng-redux else how i can achieve this in angular 4
Please suggest best approach.
I assume by navigating from one page to another, you are basically routing to different routes. Therefore to have the information of your selected filter for each page, you can add that information to the routing parameter.
Something like this:
this.router.navigate(['/your_route_name',{parameterName: parameterValue}]);
And on the routed component, it can be received as such:
this.route.snapshot.paramMap.get('parameterName')
Or else you can have a service running globally between your routes, which is not recommended as it populates the global space unnecessarily.
Description
I'm using React.js with server side rendering using Next.js framework
I have "Search" page, which state is initialized using getInitialProps (loads data from API server), and "Object" page.
User can navigate from Search page to Object page, using simple <a> tag.
On search page user can filter data, each filter do new API request and recieve new data.
The problem
After filtering on Search page, user click on item and goes to Object page. Then user clicks browser Back button.
What is now - I got the same search page which was on first load without filtering. Can anybody explain how it is restored and what exactly is restoring?
What I need - I need restore html and state which was after filtering.
How can I achieve this?
I encountered a e-commerce website which does the following whenever a filter is applied on the product list page:
For example when you click a "subcategory = 2" (link with href="/productcategory/category1/subcategory2") on the product list page "www.example.com/productcategory/category1"
URI that is displayed in the address bar is changed to mimic the filter request without reloading the entire page. i.e. "www.example.com/productcategory/category1/subcategory2"
An ajax call reloads only a part of the page according to the filter applied i.e. product with subcategory = 2 are displayed.
But also when you enter "www.example.com/productcategory/category1/subcategory2" in the address bar a new page is reloaded as usual.
I am not able to achieve this particular behavior using rewrite rule because whenever I click on a link with href="www.example.com/productcategory/category1/subcategory2" it is redirected according to the rewrite rule and a entire new page is reloaded.
My question:
1. how is it possible to change the URL in address bar but not reload the page?
2. Is it possible to have a rewrite rule which only redirects a page only when you explicitly enter the url in the address bar and hit enter?
To update the url displayed by the browser, without reloading the page, you can use the JavaScript History API - examples here.
I'm not clear what you mean by the second part of your question, rewrite rules get applied when a request is received by the web server - the server doesn't know/care about how the request was triggered, but if you are using the History API to update the url in the browser then no requests get sent to the server, this is purely an in-browser operation.
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...