I have made a pagination for a list by Bootstrap and Backbone. The list contains links for different pages. What is the best way to to "save" the pagination "page" when user goes to different page and comes back to page where the pagination is the pagination gets resetted to page one. I can't use hash because there are many bugs with window.history.back(). Are there any decisions? Or how can I use cookies?
The standard way to do this is to use routing; When you press the back button from browser you will be redirected to the last route; If you have a custom back button on the page, add on your page model last_page property. When you render the page set the route as url address.
Maybe you have problem with your application structure. BackboneJS used to write single page. So that, when you choose different page index, your page should not reload, only new data is applied to your table. You should start with this book http://addyosmani.github.io/backbone-fundamentals/
Related
There is a page with thumbnails. At the bottom there is have a "Show more" button that loads more thumbnails. A user can click on a thumbnail and re-direct the application into details. When the user clicks browser's "back" I would like him to land in the same position as before. How to achieve this without complex routing?
You can achieve something like this using angular-bootstrap-lightbox and the ui-bootstrap pagination. Both are Angular and use common resources
EDIT:
What you're looking for is something along the lines of scroll-sneak, you want to save the scroll position when you redirect to another page and load the last position when you redirect back.
since I could not find any angular directive to do so, you can either
get one and wrap it around a directive, most of them use jQuery
you can make your own.
for example, you can use js to define a queue array and store it in localStorage/sessionStorage, when you redirect "push" the current page location to the queue, when you redirect back, "pop" that last stored position.
Maintain Scroll Position of large HTML page when client returns
I wanna refresh the content in a page, for example like when you like a photo in facebook, you can notice the text change from like to not like and the number of likes increase or decrease.
I'm doing using a redirection to the controller, the problem is that the page go to the beginning and I don't want that. anyone know what I need to do to stay in the same part of the page and that the fields changes?
I have three pages: list, search, and favourites. I need to switch between pages while maintaining state.
I am not using the tabbar because it doesn't handle the back button. The app initializes to the list page. When users click on the search button I do a resetToPage() right now. I tried using popPage() then pushPage() but that brings me back to the previous page first then to the search page.
If I just do a popPage() then new pages get added to the stack which is not what I want. Is there an easy way to switch between pages without using the tabbar?
I'm building a dashboard/control panel app that is basically made up of two tabs (bootstrap) at the root level, called "dispatch" and "admin". Each tab has a good bit of its own multi-tiered navigation and functionality, and they don't need to directly interact with each other. The problem I'm running into is how to deep-link to sub-views within one of the tabs without losing the "state" of the inactive tab. To clarify, I can achieve this just fine if I don't worry about updating the URL, but when I try to add deep-linking, that's when I get stuck.
An example of the desired behavior:
When you click on the "Admin" tab, the route becomes "/admin"
Click on a sub-nav item, route becomes "/admin/foo"
Select 3rd-tier sub-level item, route becomes "admin/foo/thing1"
Click on the "dispatch" tab, route becomes "/dispatch"
Click back on the "admin" tab, route goes back to "admin/foo/thing1"
So basically, if you're at the "admin/foo/thing1" route in the middle of filling out a text field, then switch to another tab, then switch back, the text field should still be there just as you left it.
Like I said, the problem isn't switching from tab to tab, since by default the tabs just show and hide things on the page without reloading any views dynamically. I just don't know how to deep-link to a given tab's "bookmarked" position when you switch to it. The way I keep thinking of it is that clicking on a tab should only update the first segment of the URL(/admin or /dispatch), and then some sort of $watch function would update the remaining segments based on the last "location" within that tab. Would something like that work?
Also, I'm using ui-router to handle all my routing and states, so I have to factor that into how I'm going to handle the desired behavior.
Help?
I worked on both those topics (deep state reactivation and parallel states) and integration into ui-router. Grab my github fork of ui-router and build using grunt. Then, mark your two tab states as parallel: true and deepStateRedirect: true.
Git repo: https://github.com/christopherthielen/ui-router
Example plunker: http://plnkr.co/edit/YhQyPV?p=preview
Discussion: https://github.com/angular-ui/ui-router/issues/894
I would just save the current state in a variable, then either dynamically change the link of the tab to whatever the last subview was.
For example, if the user is on /admin/billing, the Admin tab would link to admin/billing. When they leave that tab, the /admin tab remains the same. If you are using ui-router, you can do this with ui-srefs. You could also just manually check the variable when the state changes, and route the user there from the controller.
I'm working in a ASP.NET MVC project that accesses an SQL database and allows the user to search and view the data. Let me describe it:
I have a view with a search filter. When I click in a search button in this view, the controller returns a partial view with a table with some data, which appears below the filter. Then, I can click in an actionLink of a row to go to another view with the details. In the Details view I have a "back to list" button.
When I click in "back to list", I want the view, that has the filter and the partial view, to appear exactly as it was before. How can I do this?
My "back to list" is an actionlink that goes to the view. The problem is that, when I click in "back to list", the partial view with the table doesn't appear because it is necessary to click in the submit button first. How could I force the submit button through the controller?
This isn't really a problem that is solved inherently with MVC. It's really just a state concern, where you need to persist the state of a page, and resume that state when coming back to it.
This can be solved through typical means of persisting state between pages:
1) Save your search criteria in the session, and retrieve them when returning to the page.
2) Pass your search criteria through the link to the details page, and then again on the "back to list" link.
And (as the comment below points out), you'll of course need to then use the values from the session/querystring to run the search again and render the search results to the view, just as you did when you originally performed the search.
The easiest way is open the link content in another tab... using Clic here
Client side option:
You could load the content of the link in another container <div>... hiding the one that holds the search results and filters. Then, when user clics "Back to search...", you just show the container with the search results and filters, and hide and clean the other container.
This code is not so hard, and you don't need to go to the server again.
If you are OK with reloading the page, #Jerard Rose, in his answer, explains 2 other approachs that involves re-loading the search results, querying again the database.
Values can be transferred between pages in many ways such as: Session, QueryString, Public property, Cookie, HTTPContext.
Perhaps you are calling a 'details' action to travel to the details page. What can you do is that,
1. When you go to the details page, store your search filter value and pass it to the details page. so that when you return to the previous page you can get back/pass the values again if needed.
2. Now if you click 'back to list' button pass the values that you already have for filtering to your desired action which is responsible for the partial view.
3. Do the same thing that you did while clicking on the 'Search' button in the action.
Hope this will help
Thanks