We Keep Coding

Keep applied filters on browser back and forward Angular 2

I have product listing page, where I do have all data to show user, if user is applying filters, I am filtering list on client side itself using Angular 2,
Now if user move forward to project details page and click browser back button, all applied filters vanished as it should be, But I need to implement so that on back button all applied filters should persist.
Solutions I am thinking: -
Approach : Whenever User apply filter we add that in URL and redirect.
Problem : On every URL redirect API's will be called.
Is there a better way I can approach this problem ?

Storing things in the URL as arguments is a good approach, since you don't depend on hidden state (global application variables) to build your view.
However I'd not intercept the routing component, but rather use Angular's support for structured URLs and filter the data in the onInit method or whenever it is available.

If you want the filter criteria being visible in the URL (and to be bookmarkable) use router parameters and redirect to the URL containing the updated parameters. If you use routerCanReuse() { return true; }, then the component is not even reloaded but justrouterOnReuse()` is called where you can acquire the updated parameters.
If you don't want the filter criteria to appear in the URL, use a shared service to store the parameters, then navigating doesn't destroy the parameter values. Ensure that the provider for the service is provide high enough (AppComponent for example) for it to not get destroyed when a component gets destroyed by routing away.

I had a similar problem with the added condition that, I had to redirect the user back to listing page with the filters applied when he used the save functionality.
The approach I used was to combing both a service and having filters in the URL parameters.
The reason to use both is,
You could enter the product detail page in 3 ways:
From Product Listing.
Directly from URL.
From some other, where you might have given the link.
And so you cannot just use this._location.back(); as you might not want to redirect to the last page in all cases.
So my approach was to store the last URL in a service, and in the detail component check if there is any stored URL.
An important thing here is to check and pop the stored URL on the ngOnInit() as the user might not always click on save.
Attaching the code to the service, it's fairly basic.
#Injectable()
export class ReturnHistoryService {
private _returnURL: string;
saveReturnURL(returnURL: string) {
this._returnURL = returnURL;
}
popReturnURL() {
let returnURL = this._returnURL;
this._returnURL = null;
return returnURL;
}
`
Make sure the provider is not per component.

How to login and enter into a different html page

I am new to backbone.js , I have a login page made in bootstrap and I also have a small validation done in a js file where it checks if the username and password is test when clicked on signin button, what I am trying to achieve now using backbone.js is once signin button is clicked with valid data it should take me to xyz.html file

when you receive your success message, in the callback just type
window.location='xyz.html'
It will forward there. Be aware that any javascript objects will be lost, so if you need to pass data to the next page, you can do it through cookies, or url parameters (window.location='xyz.html?data=cool,stuff,to,know' ) or by having xyz.html make a request to "the server" when it starts, and get some data.
if you want to do it the backbone way, you can do:
myRouter.navigate("/xyz.html", true)
but that will not actually forward you, it will just change the url and then call the handler for that "route" because what you are then supposed to do is to do an ajax call for an html template, or otherwise rebuild the current page differently. If you do actually want to end up on a different page then you SHOULD use window.location

How to send a GET request with a specific query string to my page using Jquery?

This code toggles the color of an element whenever you click on it. But how can I send a GET request with query string ?toggle=True on the first toggle and ?toggle=False on the second one?

Ow, I can see it appearing in Firebug, but not in the url of the page. Any idea why?
Making a request and changing the URI in the address bar are two different things unless you cause the browser to load a completely new page.
If you want to do that, then you should forget about using client side JavaScript and move your logic server side and use a regular link.
In the server side logic, the value of the query string argument would be used to determine the class of the div (which is used to set the style) and the href of the link (i.e. if it has True or False in the query string).
If you want to avoid loading a new page, then you are looking at two separate steps.
The first one you already have (the changing of the style using JS).
The rest gets more complicated…
First you need server side logic so that True/False in the query string will set up the initial state of the page correctly. This will be the same as the logic described for the previous method.
Then you need to update the URI so that it matches the one that would load the page in the state you are altering the current page into. This is done using the History API (pushState and friends). There are more details on the subject on this question.
If you want to notify the server of the change, then you'll need to use jQuery.get, as well as updating the page and changing the URI in the address bar. To be efficient, you should probably add an additional query string argument (so you can tell if it from Ajax from that a normal page load) and have the server return a simple acknowledgement rather than the whole HTML document when it sees that argument.

Just use jQuery's get method to do so or do it yourself in your toggle functions.

A pragmatic yet pretty basic solution may be to use a local variable as a counter.. If the counter is even, send True, if odd, send False.
Increment counter on each click :)

Passing objects from child to parent page

I have two web pages, parent and child. On click of add in parent I open popup and where i will enter the details and save. Upon save I would like refresh the data in parent Grid. Following are the approcahes i was thinking
Use Session varible on save and use it on parent.
Store the values in DB on child and retrive it.
Serilize the object in Child and assign that to partent hidden varible on refresh de-serilze on server and bind it to the grid.
I would like to know from the group what is the best way to do this. I was thinking of doing the third approcah?
I am using ASP.NET 4.0 and Jquery for popup window.

I would like to do it this way:
OnSave in child page wait for
server response and
if save is successful do
parent.grid.reload (this is very
generic but i hope you get the point)
if save is not successful you can
do some nice exception/error
handling on child page and ask again
for input etc

Best not to refresh the master. User will not expect that and may loose
some state on the master, for example filter/sorting.
Best use window to window communication with window.opener to directly tell master what detail was edited or inserted.

If you want a quick update to the parent window without reloading it, you can access/modify variables/functions in parent window's scope (provided they are on the same domain) with window.parent.somevar = 'x' or window.parent.someFoo(). But you would still need to make a server request from one of the windows in order to store it in DB.

In general (not specifically in asp.net) I would just have the popup send a "refresh from DB" signal in one way or another to its parent (with window.parent).
The advantage of this is that you make sure that the parent gets the actual data that was saved. Otherwise you would need the pop-up to check itself if the save succeeded, and if the object that it wants to send to its parent is actually correct.
Edit: Actually the pop-up should probably check for saving success as another answer says. Still I wouldn't have it do more than call a refresh method on the caller window, unless maybe that refresh is extremely costly.

Redirect to previous view and inject a javascript alert

I need to do the following:
I have a textbox, which appears in every page of the site, that allows to subscribe to a newsletter. This I've done already and the user is redirected to previous view after subscription.
I'd like to add a javascript alert to the page the user is returned to, something like "Thanks for subscribing". How can this be done?
Thanks in advance.
EDIT: Propably it's not clear from the post tags. I'm using ASP.NET MVC 2 Preview 1

If you are doing a HTTP redirect, then the page you will render needs to be passed some information so that it knows to include the javascript to open the alert box (adding an optional element to the page might be a nicer way to do this).
That information needs to be stored either in a browser cookie, or in a session store (which is keyed from a browser cookie). You can remove this once you've rendered your message, so that it is only shown the first time you visit that page after the redirect.