2

I've already searched this topic over and over but I cannot find a solution. I am trying to create a kind of single page application using Ajax to load content from other pages. Everything works fine:

  • the content from page b is loaded into page a
  • The url changes via history.pushState()
  • The go back and forward buttons of the browser work great using the popstate event

I am also doing some animations with jQuery UI animation, like moving a piece of content from one place to the other:

Fig.1

Fig.1

Fig.2

Fig.2

Fig.3

Fig.3

The problem is that when refreshing the page, let's say page b, everything I worked on is lost and all it appears is the static content from b (of course:)).

My question: Is there a way of refreshing page b without losing the state of of the page a (fake page b) loaded with ajax? I mean, a way of making the 'real' page b display exactly like Fig.2 after refreshing? Or I am asking the impossible?

viery365
  • 935
  • 2
  • 12
  • 30
  • 2
    You have to ensure that the server can tell the difference between ajax requests to fetch content from the simple refresh request, either via request headers or special parameters or something. Then the server knows whether to respond with the SPA framework or not. The browser will not do the work for you. It's non-trivial. – Pointy Sep 03 '16 at 15:51
  • 1
    @viery365 You can use `.state` property of `history`, see [A: Global Variable usage on page reload](http://stackoverflow.com/questions/29986657/global-variable-usage-on-page-reload/) – guest271314 Sep 03 '16 at 15:57
  • Thank you:) I will search more about it in that case. I forgot to mention that I am not using any framework like angular or so. As I am using wordpress I will search for some function or so I can use to do what you say. – viery365 Sep 03 '16 at 15:59
  • @Pointy thank you!!! I will check it out!:) – viery365 Sep 03 '16 at 16:00

0 Answers0