best way to implement location.path in angularjs - javascript

As I know, this is to visit a route and pass param to the url
$location.path('/home').search({key:'value'})
This is to clear every param and url and visit the route, history is keep
$location.search('').path('/home');
How about don't keep the history? Like transactional flow, once the user paid, you don't want to let the user to be able to go back. I know there's history service but I think there's more simpler way to do it. I tried to use valina javascript redirect method but it reloaded the entire page which is inconsisten for my SPA.

You can call
$location.search('').path('/home').replace();
and it will not create an extra record in the back-history of the browser.
See documentation here.

Related

Remove ability to edit data if person refreshes page / visits from another tab?

imgur has an interesting feature where
you can create a post using https://imgur.com/upload
after the upload finishes, you will be redirected to the post's page where you can edit the title as much as you want. If you refresh the page / visit it in another tab--the ability to edit the title is gone.
How is Imgur doing this?
My guess is cookies are involved somehow, but I'm not sure.
With PHP, you can use $_SESSION to achieve this
With JS, you can use localStorage to achieve this
With JS, you can use URLSearchParams to achieve this
with next/react, you can use useState to achieve this
On Create save the id of the editable resource, on Render if it matches enable edit and reset the saved editable id.
You can fake the redirect, which means showing the edit page and putting the view page into the URL
on redirecting, set a cookie: https://remix.run/docs/en/v1/api/remix#redirect
return redirect(`resource/$id`, {
headers: {
"Set-Cookie": `editable:$id`,
},
});
Then, use the Cookie API to check that cookie.
you can check for the navigation type. see the answer from #Илья Зеленько on https://stackoverflow.com/a/53307588/14250290
the types you're looking for are reload and back_forward you probably want to have something happen in the backend happen as well to prevent a malicious user.
Another option would be to send a token from the backend when a post is made and in order to edit a post that exact token would need to be sent back. Just don't save the token in anything that persists and on a refresh or new tab it'll be yeeted.
If you do not want to use cookies or session than one way to achieve this is by using useState. update the state when post is created/upload to true(initially false). When user will refresh the page then that state will automatically be false because the component is rendered just now.
Note:- If you do not want to use state you can use redux also to achieve this solution.
After that use that state or redux state to to enable/disable the ability to edit the post.

Store link in localstorage before Laravel auth middleware redirect

I'm creating an invitation link for a laravel application, once a user clicks on the link or tries to access the link I want a path of the link to be stored in localStorage. This is what the link looks like https://example.com/{task_id}/{random_task_link}, I want the random_task_link to be stored in the localStorage. I have a code to do it using js but that is not the case. I used the code below to ensure that the user is logged in before they can access the link page
public function __construct(){
$this->middleware('auth');
}
Now the localStorage code won't work because the page gets redirected before it is accessed. The main purpose of storing the link in the localStorage is to make sure that when a user clicks on the registration link the random_task_link is still available for future use.
Is there any way to get the link in the localStorage before the redirect takes place? Please help me I'm new to laravel. Thanks
i dont get your points there are lots of ways and points where you can store the data in localStorage
first when you are creating the url save at the same time in the localStorage
second make another middleware and call it before the auth middleware or apply just on some specific route
third take this auth middleware to route level and even if grouped you can use Route::post('login', 'LoginController#login')->**withoutMiddleware**(['auth']); for this function and do whatever you wants to do

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.

Ember router resume on reload

I have an ember.js router based application with an interesting quirk. Since the router documentation is rather sparse, I'm not sure if this is a feature or a bug or an un-intended consequence of some of my code elsewhere.
When I reload the page containing the app in my browser, the App jumps to the route of where I last was. I have the routes serialized as a hash. So an example would be I'm on app.html#/users/1/details and I delete the hash and add a random query variable app.html?reload=randomnumber and load the page. As soon as ember loads, it is adding the #/users/1/details back to that address.
Is this a feature/consequence of ember, or is it some junk that I wrote. I haven't found anything that I wrote that could be causing this so far.
If it is an ember feature, is there a way to disable it?
What are you calling "reload", exactly?
Ember cannot keep any state in your browser when route is serialized using a hash. It has nothing to see with Ember: when reloading the page, the whole state is lost, and reset according to requested url returned content initializations.
Nevertheless, when a hash is present, it is used by Ember to reset the router's state.
So what I would suspect is you are still reloading the URL .../app.html#/users/1/details.
Did you take a look at your Network history, in the developer tools (or equivalent)?
The first item should be a GET request, and it will indicate the effective requested URL and the hash if any.

How to add javascript to page on login and logout in Drupal 6

I'm working on a module and am trying to add some javascript to the next page a user sees after logging in or out. Calling drupal_add_js() on hook_user (op == login) doesn't seem to work; I'm assuming this is because drupal_goto is called after the login is completed and a fresh page request is initiated.
I've considered using hook_user to set session variables which I can then respond to on the next page load but that seems somewhat fragile. Any suggestions?
If you want something to be carried over to a new page you only have a few options:
Alter the url.
Store in the database.
Store in session.
Altering the url, would probably be quite hard and messy. Storing in the session or database is basically the same thing. So you would probably want to use the Drupal session system instead of making your own.
You could add something in the session and then in hook_init check for it and if it's there add the js and delete it from the session.
I don't think you will find a much better solution, though it would be nice if there were.

Categories