How to preserve previous HTML when back button clicked - javascript

I searched the related question but couldn't relate to my question.
I am developing one app with HTML & JQuery. One HTML page like "Catalog" will display the products dynamically (e.g. On page load will show 20 products & with "Load More" button will add another 20 products & so on). If user click on "View Details" link of product no. 45 then page will redirect to new HTML for detail view of the product. Not if user click on back button how to view "Catelog" HTML page as same as user leave before without any server call?
If anyone knows please share your idea or any plugins available?
Thanks..!!!

So. i have i have idea to implement, that you can Store Number of products loaded by user in javascript session storage. so like user views 60 products by clicking load more multiple times. so store the 60 value. and you can check id session storage has value already you can load more intially.
So User will return from product view it you will find session storage 60 is there and you can make it loaded again.
To Save Session Storage
Session Storage in js

So, If you want previous page with out server call , Simply use window.history.back(); on click event.
this is like "back button" in your browse.

Related

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

change document.location.hash in history

On product list page in pressing the reference "buy" , I add the article to cart with a help of Ajax and put down Article Id to document.location.hash.
When I delete the article from the cart and return with a help of the button "back" in the browser , I need to delete product Id from location.hash on product list page.
Is it possible?
Nope. You can't modify history in browsers by design, imagine what security impacts that would have? You could, for instance, push something in to the history and issue a history.back() to send the user wherever you want!!
You must handle the back-button stuff in the session server side with some state controller.
Add: when user hits the back button, the page is retrieved from cahce or from the server, depending on the header information etc. The browser has already rendered the page whenever your code will start running. Modifying the location object then would result in an additional page load/reload. If you KNOW that the ID is invalid, there's no need to delete it from the location hash, you might handle that within the server code.

How to completely refresh (ctrl+f5) a page using asp.net?

I am working with an asp.net (Dotnetnuke) project now. I need to change an image in a page dynamically. While clicking replace button (asp:Button), some times the image cannot replace dynamically on the page. While pressing ctrl+F5, it will change. My question is, how to reload cache through C# code?
Another problem is that, sometimes I replace an image in a page by storing some values to database and press ctrl+F5 for making changes in the page, but while clicking ctrl+F5 there shows a dialog box with cancel or retry buttons (both on Firefox and IE). While clicking any one of them will store the same value to database. If we again refresh the page the value in the database is 3 times.
you cannot clear browser cache.the only idea is declare a session variable in c# code in page load and set its value is 1 at the very first time
if (!IsPostBack)
{
Session["refresh"]="1"
}
you will need to set session variable in image upload button event Session["refresh"]="1"
then create a refresh button .in the button event do the following
thats all.after completeing your upload,click on the refresh button.then it work as ctrl+f5 button.if you not set the session value 0 in refresh button event the last event is again takesplace.if you enter a value in database,the same task takesplace if you not set session variable 0.
if(Session["refresh"].ToString()=="1")
{
Response.Write("<script type='text/javascript'>locaton.reload()</script>");
Session["refresh"]="0";
}
JavaScript cannot access dumping the cache for you, sorry. C# runs of the server, not the client, so it can't help either.
If you want to break the cache for certain items in the page you can add a random parameter
<img src="a.gif?x=123456"> (I like to use a time-stamp)
Alternately, if this is for testing purposes, turn off the cache in your browser.
You can manipulate the cache charateristics of various portions of your web page by managing the user controls. Also check your page directives.
<%# OutputCache Duration="#ofseconds" Location="Any | Client | Downstream | Server | None" Shared="True | False" VaryByControl="controlname" VaryByCustom="browser | customstring" VaryByHeader="headers" VaryByParam="parametername" %>
The caching functionality of ASP.NET is pretty extensive. I would recommend you spend some time studying the application Directives; mainly Page and Control.

Categories

Resources