Storing page settings in Angular - javascript

I'm probably going to get knocked because this is more of an architecture question then a coding question and I haven't tried anything. I'm trying to decide WHAT to try ...
I have a web page with a list of user data in an ng-repeat. Also on the page is a radio group and a select input with filtering options for the data. All of that works fine.
If the user clicks on a link that is in the repeated user data, they "drill down" to a details page (this is NOT a SPA). What's the best way to set things up so that when they select "Back" to return to the listing page the values from the radio group and select are restored? Query params? Local Data storage? What's the best "Angular" approach?

The "Angular way" is to create Single Page Applications (SPAs) and use WebSockets. If you must be old-fashioned, try ngCookies.
https://docs.angularjs.org/api/ngCookies

Related

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.

Is it possible for Angular.JS to save someone's previous activity?

I have an app I've been building that displays products from an array. Using Angular.JS, I can pull this array to generate on my view. In my view, a client can sort and filter the list to find exactly what they want. Is there a way to save those filters, so if they were to click an item, go to that corresponding page, then come back?
As of right now, it will always load all results without filters, even if a client has clicked a filter or two before hand.
Is there anyway to save their selections or previous activity?
There's more than one way to do what you want:
Using $cookies(https://docs.angularjs.org/api/ngCookies/service/$cookies);
Using localstorage( I use this module, it's very good - https://github.com/gsklee/ngStorage);
using $cacheFactory(https://docs.angularjs.org/api/ng/service/$cacheFactory), but with this option you will lose the data if user leaves the session;
In all cases, the idea is to save the filters and selection on the desired location and retrieve i when necessary.
hope it helps

Is it possible to use Javascript to temporarily store data while User adjusts, and then pass as Hash to Rails Controller?

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!

HTML using jQuery to send a postback?

I am creating a website for a clothing brand but am still getting started with my web dev work. I have an index page with several clothing items on it. When a user hovers over the picture of the item then a hover over effect comes into play and a small "View Item" appears over the item. When the user clicks this "View Item" text it opens a new page with that particular page's info.
The part I am struggling with is how I send the parameter to this item page as I will need some way of knowing what item was clicked. Can I write a jQuery function that will fire when the text is clicked and perform a .post() method to the item.php page passing along the item ID ?
So it would be something like
$.(document).ready( function() {
$("#itemText").click( function() {
$.post("item.php", parameters);
});
})
POST isn't the proper protocol for that. Use GET instead.
GET is vary easy to use with HTML links; it is what happens every time you click a link on a website. Say the page is "products." If the user clicked on product 1, than the URL for that page could potentially be "products/?id=1" (or products/1 if you are using mod_rewrite). The "id" variable with a value of "1" will be available to the PHP via $_GET['id']. With that variable, you can retrieve the proper information based on the id.
POST is for forms where users are submitting fields of data or images. http://html.net/tutorials/php/lesson10.php
If you are attempting to build a pure Javascript solution, then that is an entirely different matter. In that situation you would use Hash tags or HTML5 History API to change the URL. When the URL changes, Javascript is notified, and then whatever actions can occur. However, based on the fact that you specifically said "POST" I am assuming you are using a server-side language like PHP.
If you are opening a new page, you should not POST. If you must POST, you should POST then Redirect, although since you are not actually performing an action I recommend just sticking with a GET request. This way the newly opened page can easily be refreshed and shared by the viewer.
The most elegant way is to use rewrite rules or a router on your server so you can communicate which item to display, for example: http://example.com/item/1/
However you can also just use a GET parameter: http://example.com/item/?id=1
If you need to communicate to Javascript that will be executed on a page you can also use a hash: http://example.com/item/#1
There are several options using GET depending on how you display the item information, and what server-side technology you use.

Best ASP.NET dynamic user control load approach

I have a food menu ASP.NET Web app. I use a datagrid to display the menu items. When the user clicks an item in the grid, a user control opens up below the item to allow the user to enter item details and add the item to an order. The item detail user control in turn contains several user controls with RadioButtonLists, DataLists and TextBoxes. The RadioButtonLists and DataLists are populated from a database. The user should be able to open and close several items at a time, like Windows Browser with sub-folders.
I've tried doing this with strait ASP.NET AJAX using ScriptManger, etc.. I set the item detail user control Visible property to True, and populate the list controls during the OnPreRender event. This is slow and sort of complicated because of the ASP.NET page/control life cycle.
I've been looking into using JQuery requests to ASHX files or Page Methods on the server to generate the item detail controls with maybe RenderControl and sending the generated HTML back to JQuery.
Questions:
Am I on the right track?
Would this sort of approach work for rendering and sending back HTML that may be complex and long?
Would JQuery requests be more efficient than my current approach?
Can anybody point me in the right direction for references and/or examples?
Thanks for the bandwidth.
I found a lot of help that led to my solution at:
http://weblogs.asp.net/sanjeevagarwal/archive/2008/07/22/Dynamically-create-ASP.NET-user-control-using-ASP.NET-Ajax-and-Web-Service.aspx

Categories

Resources