I have pages where i have, among other things, tables with options like delete, update for each row, after i choose option like that i update only the table using Ajax calls.
My problem is that when i go to another page and then go back, using the back button on the browser those changes on the DOM are not there. It seems that the browser only caches the inicial page load.
I've came across the Question here on stack, that seems to be about what i'm looking: Keep changes on DOM when pressing back/forward buttons
Someone answered saying:
"If you're really changing pages, the yes, even if working from cache the browser will show the page as it was when retrieved from the server, not as it was when modified afterward.
If you want to keep the Page A / Page B structure the way it currently is rather than swapping over to a more SPA approach, you could store the ajax result in sessionStorage and check for it on page load. If there, reapply it; if not, request via ajax and apply it (and save it). That will be much faster than re-requesting it across the network."
Is this really the solution? If yes, how can i implement something like that?
EDIT
To give a concrete example, i use some code like this:
GetTargetUpdated : function (options, targetToUpdate) {
$.ajax(options).done(function (result) {
var target = $(targetToUpdate);
var $newHtml = $(result);
target.replaceWith($newHtml);
$newHtml.effect("highlight");
});
},
that will update a specific DOM element. I want these change to overwrite the cache of the page in the browser
EDIT: It seems that i have this problem on Chrome but not on Firefox.
What can i do to solve that cache problem in Chrome (the browser that i identified the problem)? Are there some header to use in Html, some jquery solution or some other way to save the DOM changes in the cached page?
Thanks