3

Like i mentioned in my other questions, I am building my own web application.

Now i have this application --> Here's Plunker! You can see it better here. Where i have a tab in the header and i can navigate through multiple pages and load its content.

<!DOCTYPE html>
<html>
  <head>
   <link rel="stylesheet" href="style.css">
   <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
   <script src="script.js"></script>
  </head>
<body>
  <a href="link1">Link 1</a>
  <a href="link2">Link 2</a>
 <div id="content">
   <!-- Page content displays here --> 
 </div> 
</body>
</html>

$(document).ready(function(){ 
 $('a').click(function(e){
  var page = $(this).attr('href');   
  $('#content').load(page + '.html');   
  return false; // don't follow the link
 }); 
});

It is working fine! But i am having problems with saving the state of the page.

For example if i am on page 2 and i refreshed the browser, the page will go back to its start state. How can i let stay on the current page on refresh.

I am very thankful for every solution or tip!

Basch
  • 433
  • 4
  • 20
  • You might find [adding and modifying history entries](https://developer.mozilla.org/en-US/docs/Web/API/History_API#Adding_and_modifying_history_entries) useful. Also see [Modify the URL without reloading the page](https://stackoverflow.com/questions/824349/modify-the-url-without-reloading-the-page). – showdev Mar 30 '18 at 21:02
  • If you're not worried about linking to particular sections, but just want to save the current page for refresh, another idea might be just to save the `page` variable in [session/local storage](https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API), cookie, or server-side session. – showdev Mar 30 '18 at 21:08

1 Answers1

1

You have to take advantage of browser's History API. On each content load, you have to push state to the history.

On hard refresh, you have to parse the url and fetch the correct content.

One thing to keep in mind with this approach is that you have to jump through hoops to make it easy for search engine crawlers to index all your "pages".

Another approach is to use Turbolinks.

Cheers.

Mladen Ilić
  • 1,667
  • 1
  • 17
  • 21
  • Do you know how is this best way to do it? Cheers and thanks in advance! – Basch Mar 30 '18 at 21:17
  • On pinkr.co your code is being ran within an iframe, so you can't really observe url changes, since only the top level document will have it's url displayed in browser url bar. What you can do to test this is to simply paste something like this in your browser console and observe the url changes: `history.pushState({urlPath: 'test.html'}, '', '/test.html'); ` – Mladen Ilić Mar 30 '18 at 21:23
  • 1
    https://plnkr.co/edit/4GQ2VGOLT8wuhCEP3ZoG?p=preview I updated my code but didn't work :( do you know where i can add it – Basch Mar 30 '18 at 21:24
  • You can't do this on pinkr.co like sites. You have to have proper local env setup. :( – Mladen Ilić Mar 30 '18 at 21:26
  • 1
    Im running it also on my local server, i can test it here directly! You are saving my day :) – Basch Mar 30 '18 at 21:26
  • on refresh it is directing me to the page but im loosing the header :( – Basch Mar 30 '18 at 21:30
  • Well there's definitely some more coding for you to do, I just directed you in the right direction with the History API. Really can't do more than that on SO. :) – Mladen Ilić Mar 30 '18 at 21:34