Back button when pagination is used in table? - javascript

In my angular js application i am using pagination in user list page,through which i am getting ten users at a time from server,and clicking on second page another ten users and so on.Details of a users are listed in a table.Now when click on some user,profile of a selected user is open in another page. Now when i come back from user profile to user list my table is again start from current page one.
That's the issue i want when i come back from user profile , user list must be open from the page where i was.

There are some way that you can fix it.
I recommend you two way.
First:
Change hash in your url when your table page changed and detect hash when you come back to your page.
like this url
http://youraddress.com/subdirs#page=2
You can find how change and detect hash in this link: https://docs.angularjs.org/guide/$location
Second:
Open user page in ajax div with $http in angularJS.
https://docs.angularjs.org/api/ng/service/$http

Related

How to preserve previous HTML when back button clicked

I searched the related question but couldn't relate to my question.
I am developing one app with HTML & JQuery. One HTML page like "Catalog" will display the products dynamically (e.g. On page load will show 20 products & with "Load More" button will add another 20 products & so on). If user click on "View Details" link of product no. 45 then page will redirect to new HTML for detail view of the product. Not if user click on back button how to view "Catelog" HTML page as same as user leave before without any server call?
If anyone knows please share your idea or any plugins available?
Thanks..!!!
So. i have i have idea to implement, that you can Store Number of products loaded by user in javascript session storage. so like user views 60 products by clicking load more multiple times. so store the 60 value. and you can check id session storage has value already you can load more intially.
So User will return from product view it you will find session storage 60 is there and you can make it loaded again.
To Save Session Storage
Session Storage in js
So, If you want previous page with out server call , Simply use window.history.back(); on click event.
this is like "back button" in your browse.

About AngularJS pagination (I used localStorageService before but it wasn't the solution i wanted to apply)

First, Thank you for watching this question!
I'm newbie to angularJS and i'm trying to make pagination to be more flexible to use.
Below is my situation.
I made pagination function
It works as my intention
But, When i get into other page(leave list page which includes pagination function), and try to go back, the problem appears!
(Here is what i want to solve) I go back to list page by clicking backspace key or clicking back button on view. and the params i entered in list page is gone!
In multi page application, the url can be '/tt?aid=11&bid=22&cid=33', and i get into detail view page, and i can retrieve to '/tt?aid=11&bid=22&cid=33' by just clicking back button. but in angularjs, it goes back to list page with no params.
And below is what i tried to solve above problem.
I used local-storage-service
I used onPageUnload event(of browser)
I'm not sure if this best fits.
Store the page no.
When you click back to get that list, feed that page no.
page no can be stored in a scope variable.
Your pagination function should be able to give the list based on page no.

Restore page and state on browser back button

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?

How to handle pagination in Single Page Application?

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...

Recover page content when visiting back

I am building a small web site, and on one of the pages there is a d3.js/highchart visualization demo. The visualization is interactive, and can be modified by the user.
When the user leave this page and enter another html page by following a link in this demo page, the content of the page is not saved, and when he comes back, he has to modify the chart again. My question: is there any way to cache this demo page so that as long as the user does not close the browser page, it can be recovered?
My simplest idea is to have each client page a unique ID. So that I will save the status of the page when the user leaves, and when he comes back I can cover its content based on this ID. Then the question is how to implement this ID for client pages.
You can use History API here.
When a user changes the state of the chart, the page URL is updated with all the parameters needed for rendering the chart (via history.pushState call).
On page load you get the initial state (chart parameters) from the url and render the chart correspondingly.
A good thing with that approach is that you even can send such URL to another person, and they will see just the same customized chart.
You could also try storing the page state locally using either sessionStorage or localStorage (DOM Storage guide)
If you have two or more tabs I don't think there is a way to differentiate between then once they are closed. I would use Steve's idea about storing the ID in DB+cookie and when user come back to page I would provide them with a list of all their past modified charts based on cookie and DB query. Then they can choose which chart they want to reopen.
I can think of many ways to do something like this.
If it was me, I would simply store the users chart settings in a cookie, so when they navigate back to the page, you can simply read the cookie for the settings and use them to re-display the chart.
If you want to persists this longer, then send the settings to the server to be stored in a DB. The server can return a unique ID which is then stored in a cookie, or simple use the session cookie to associated the chart settings with a session.
An alternative which doesn't use cookies is to add chart settings to the 'back' url when you navigate away. When the user clicks to go back, the url contains the information necessary to restore the chart states. However, this doesn't work if they click the browser back button.

Categories

Resources