0

I currently have an entire website built on one index.html document. There is a div element with id: #contentDiv that I just keep replacing the content inside by using AJAX to get different html snippets and then replacing the content with JQuery .html() function like so:

function getContent(content, path, location) {
        $.ajax({
            type: 'get',
            url: 'http://localhost:4000/REST/getHTML',
            dataType: 'json',
            data: {
                'file': content,
                'path': path
            },
            success: function (data, status) {
                var html = data['html'];
                $('#' + location + 'Content').html(html);

            },
            complete: function (data, status) {
                //alert(status);
            }
        });
    }

My question is: Upon reloading the page, is it possible to keep the current state of the DOM? Currently, it takes me back to my home page (the original state of the website before doing any AJAX calls). I've tried messing around with pushState() and also different variations of JQuery replacement methods (i.e. instead of .html(), using .empty() and then .append())

Cody Patterson
  • 138
  • 10
  • See [Global Variable usage on page reload](https://stackoverflow.com/questions/29986657/global-variable-usage-on-page-reload/) – guest271314 Jul 22 '17 at 21:56
  • You could keep a string version of the html in local storage (LS and SS only store string values) and on the reload - , check for the presence of the value (indicating if this is the first load or subsequent reload) , retrieve it if it exists - parse it into html and insert into the div. – gavgrif Jul 22 '17 at 21:57
  • Your best bet is using the History API and loading the correct content based on the URL on hard reloads. You would then of course have to use `pushState` etc. to update the URL when the ajax content loads etc. – adeneo Jul 22 '17 at 21:59
  • Why don't you use Routing library? – Maulik Suchak Jul 22 '17 at 22:29
  • You should pass the #contentDiv to the URL without a refresh and uppon page reload check if there's a # in the url and load the right center. jQuery.param.querystring(window.location.href, '#contentDiv'); at least this way they can bookmark a page ;-) – Patrick Simard Jul 22 '17 at 22:38

0 Answers0