Develop Reference

Going to new page in sveltekit adds new html on top of old one

I have a really weird problem that I can't find anything related online, I have a web application built in sveltekit and on one page I have a button that redirects to another page using the goto function, but the new page get's added to the bottom of the old one, including the header and shared components it's like the entire page was imported twice in a root component, when I refresh the old one goes away
It's a pretty big website so it's hard to reproduce in a repl
here is the Link
Here are the steps to recreate it
click on order now
choose pickup (delivery has a radius restriction for address)
choose any category
add some items to cart
once it's in the cart go back to the previous page and select another
category
there will be a popup asking you if you are sure since this will
delete your previous items
that's when it happens
Any help will be greatly appreciated, If you think any part of the code will be helpful I will post it

How I create a cookie in Django to keep a view of a list using vanilla Javascript?

I have a Django view, where the user can choose between 2 different "views" of a list through a toggle button. The map view where a map is displayed with markers and some information and a list view where a list is displayed with the same information but with a list view.
When the user clicks the toggle button between one or another option, there is no problem, because I implemented an onClick Javascript function where I change the style display, and that works perfect, the problem is when the user reloads the page.
supposes that I put by default the map view, but the user change to the list view by clicking the toggle button, now if he/she reload the page, the view will have to be the list view, I know that I can accomplish this using a cookie but I don't know how to implement the update of the cookie every time the user clicks one of the toggle buttons with vanilla Javascript or in my python view.
I know that one solution may be creating 2 Django views one "mapView" and another "listView" so when you click the buttons take to another URL, but I want to load all the information and have the possibility to do it without this solution.
I also upload a GIF of how it works right now. I clicked the map view, reload the page, and change to the list view again.
Thank you!

I use a Javascript function to save a cookie with the view and solve this.

Keeping state of an angular app after using browser's back button

I made an angular app that makes the user able to search through an assortment of products. This application will run on a Drupal page. This all works fine.
When I click a product my intention is to open another static drupal page with a product detail directive in it. The product detail page will have the product id or alias in the url. If the product detail page opens the directive will load the product detail by the id in the URL.
Now when I user the browser's back button, the search results will be gone and the assortment browser will be in pristine state.
How can I keep the state? Is it wise to use sessionStorage?

You can use $rootScope(SPA applications) to maintain the state or you can use sessionStorage

Back button when pagination is used in table?

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

How to handle pagination in Single Page Application?

On my Single Page Application (Javascript (AngularJs) webapp), I'm displaying a paginated items list.
I'm displaying 10 items per page.
In order to retain the current pagination opened by the user at any time while this one navigates on other page, I put the current page number on browser's localStorage.
Here's an example of workflow:
The user goes to myItemsList.html.
He opens the page 2 involving the url: myItemsList.html?page=2.
Then, he goes to another page: myOtherPage.html.
He goes back to the link initially pointing to myItemsList.html, that displays directly thanks to localStorage the page myItemsList.html?page=2 in order to potentially continue his navigation.
Would it confuse the user, maybe expecting to see the page 1 as a new starting navigation.
If I display at the top of the list, a kind of label like "Page 2" in order to warn him that he's seeing the preceding portion of his navigation, isn't it UX-friendly?
Or should I completely avoid persisting current pagination?
Here's what could happen if I don't persist the current viewed page:
The user goes to myItemsList.html.
He opens the page 2 involving the url: myItemsList.html?page=2
He opens an item in this page (the "show" page), leading to: myItemsList.html?id=123
He clicks on the browser's back button, causing a refresh of myItemsList.html (since a Single Page Application). The current pagination (page 2) would be lost and the user would need to restart it in order to continue its items discovery.
This seems really touchy...
What strategy should I choose for a use case like this?

saving the progress through navigation is the expected behavior in UX design of SPA, so maintaining the page he was in the correct choice, and since it is a pagination it won't be an issue even if the user wants to go back to any page, it will only take a click.

First of all I would avoid using localstorage and use a service instead to persist ur page counter.
Secondly u dont need to persist pg counter to anywhere else but in a scope variable for refreshing to mext page data. You can even think about just adding to results similar to infinitite scroll use cases. But either way, u can use local scope variable for pagination.
Whether to go directly to last viewed page - is a more business decision and will depend on needs.
But u can very easily persist or remove persisted data using broadcast and watch and decide on persistence based on event listened to.
Hope thos helps ...

How about maitaining a sort of heirerachy in JS like this :
Suppose a user navigates to a section called Customer Search
customer_search.customer_display.page = 2
Where customer_search is the a subsection , customer_display is the view with pagination you are targetting .
menu.menu_items.page=7
Where menu is the subsection , menu_items is the view with pagination
Might work if your application is organized in a reasonably hierarchical manner .
Probably you could also maintain the page in $scope for that particular controller .

The URL should dictate the navigation.
When I navigate to your website, e.g. example.com, I expect to be on the first page.
When I navigate to a (bookmarked) page of your website, e.g. example.com?page=2, I expect to be on the second page.
When I hit the back button, I expect to be presented with the previous page exactly as it was when I left it. You don't need to refresh the entire page, just listen to the history events and update accordingly.
And I strongly believe that this question doesn't belong to stackoverflow...