I have a LIST view that shows a set of items. In this view the user can select the items.
Then I have a DETAILS view that shows the details about the selected items.
The application moves from LIST view to DETAILS view changing the location. The selected items are passed as URL parameters (for example /cars/ids=1,2,3).
Putting the ids in the URL lets the user bookmark the URL of DETAILS view and see the elements when he opens the bookmarked URL again.
The DETAILS view has a back button that lets the user go back to the LIST view. When the user go back to the LIST view I want that previous selected elements are shown as selected.
How to pass back the selected items from DETAILS to LIST?
I see two solution:
Keep the selection state in a service. When the application is open using the DETAILS view URL, the controller set the selected items in the service taking them from the URL.
Using the same mechanism used for moving from LIST to DETAILS: put the selected items in the URL as parameter. Then the LIST controller retrieve it from the URL.
Which solution is better?
First off I think both of your solutions might work.
1) is sensitive to the user doing a page reload
2) it's good generally but beware if the amount of data grow in the url
Ultimately it's a matter of taste more..
Do you want the user to bookmark a listpage with selected ids? If not then I would like to introduce a third possible solution
var parameters = [ id1, id2, id3 ];
// set in detail view
localStorage.setItem('params',JSON.stringify(parameters));
// to retrieve in list view
var selectedParameters = JSON.parse(localStorage.getItem('params'))
This way you don't have to worry that the user does refresh on page..
Best of luck..
Related
I'm developing a React js app with some components, two of them are : ItemList and ItemDetails.
ItemList renders a list of predefined items, which can be filtered by their name.
When you click on an item in the list , you will be redirected to another page containing ItemDetails component and it shows you some details about the item.
when you use the back button on the details page , you will go back to the list page, but the filter will be gone.
What can i do to restore the filter?
I know a way of doing so is by using React Context but i don't know when i should empty the context.I want the filter to be restored if only if the browser back button was used to redirect to ItemList.
Is there a generic way to do so?
My project is a site with multiple sub pages. You should use the website like this:
Page 1: Choose some elements from a list. Save your selection.
Page 2: For each element you've chosen, set two parameters. Press on a button in order to calculate a score.
Page 3: Choose from three different options to export your result.
The navigation bar contains links to these sub pages.
I'd like to enable/disable the navigation items based on the user's progress. For example, you shouldn't be able to reach the export page if you haven't visited the other two pages previously.
At the moment I try to do it like this: I enable/disable the items based on the content of localStorage (more precisely the existence of an array. this is what I use to save the user's selection on page 1). This works pretty good, but I have one problem: If I leave the page and come back some time later, the array is still in the localStorage, which means that all menu items are enabled. I could delete on the last page, but what if the user tries to re-visit a previous page to modify his input?
Is there a better way to do this?
Greetings
you can do it with the help of jquery:
put condition according to your local storage and apply the following code:
$("#button").click(function () {
$("#item").attr("disabled", "true");
});
I would give the user the option to start a new progression (something like a button that clears the array) and that way to let him decide if he wants to change the previous progression or start a new one.
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
I want to know what is the best way to store and retrieve datas only after clicking the back button Browser ?
In my case, you have a list of items (different for each categories I have on my website) that appends in angularJS with the ng-repeat directive, and you can filter these items by clicking on the checkbox inputs. Obviously, each checkbox has a specific value corresponding to a filter.
When the user click on an item, it redirects you to an article (such as a blog post).
May be the user doesn't like this blog post so he clicks on the back button of his browser to go back to the item list.
But for now, I don't store checkbox tags that have been checked before and the items filtered.
I try with localStorage and sessionStorage in JS but datas are too persistants with this method.
I could make a trick like retrieving the datas if the REFERER matches with a specific url pattern, but it seems to be too tricky..
So any of you has a better idea ?
Thanks in advance.
You can use the state object for this purpose. This one is accessible via history.state and will change when a user navigates to somewhere. It will also be restored when using back button etc. It is can be seen as a storage object that is linked directly to the url.
At a high level, building an application that allows User to request Items from other Users located in the same county as the requesting User. User and Item are both models with associated databases.
On the request page, I'm trying to build 3 components.
1) A map that shows
A marker for each other User
When clicked on, the marker displays a popup that lists the Items that that User has. The requesting user can click on each Item to add it to the list of Items s/he would like to request
2) A set of search fields that allows the requesting user to filter the markers for Users and Items on the map, for example, perhaps by dates_available.
3) A "cart" (not literally since this is not about e-commerce) that shows the Items the requesting User has currently added, with a final submit button. Note, dates_available should not only be a search field, but also part of this Request
A not perfect example is this screenshot from Getaround:
I'm pretty new to coding in general, so always want to think through plugins, APIs, shortcuts, etc. The below is just for reference, but if you have comments on how to implement this better, PLEASE do tell me! Right now, I am currently thinking of using:
For the map:
Openlayers.org
Gmaps.js
For the search (which is really a filtering capability):
Ransack gem (https://github.com/activerecord-hackery/ransack)
THE KEY QUESTION
For the "cart" and the click Item to add to "queue" part, I realize that while I can do this in Rails purely, it might be less of a positive UX experience since the page would constantly re-render every time a new item were added, not to mention it'd potentially result in excessive pings to the database or records to be created. I'm thinking of using Javascript to basically make the "cart/queue" a staging area for temporary storage, where the User populates it with whatever Items s/he wants and edits as needed, but it's not until the final submit click that the entire group of Items is passed as a Hash to the Rails Controller to be saved.
Now, since I don't really know JS very well, any resources on how to do this (easy plug-in solutions, other considerations I may have missed) or if it's not possible (in which case pray tell) would be greatly appreciated.
Thanks!
You may try Javascript localStorage.
localStorage.myTempValue = "my temp value";
or
localStorage("key", "value");
You can store object:
var person = { name: "xxxxx", age: 35 };
localStorage.Person = person;
Hope my answer may trigger an idea in you!