How to refresh only part of the page when you press the F5 button or refresh

Question

I am developing a web application with a common menu for all pages. In this regard, I decided to download the content associated with the menu buttons inside the div using jquery.

So, I have this:

$("#AddNewProductBtn").click(function() { $("#content").load("addproduct.html"); }); 

I want to track the page displayed inside the div "#content". If users refresh the page, I want to load the same page in "#content". Is there a way to do this, or is there a workaround?

I have seen several websites that use iframes to load pages, but when the user clicks a button on the menu, the URL also changes. I did not find any information on how to do this.

thanks

Answer 1

You should add the parameter to the hash of the URL (after #), for example domain.com/index.php#addproduct

Then on document.ready check the value after # and load the appropriate content.

Some plugins, such as jQuery history , use this technique.

In addition, you can use local memory and cache part of the code in the browser, so you won’t download content with an AJAX call a second time.

Answer 2

Here is the solution for F5 and CTRL + R

 $(document).keydown(function(e) { if (e.which == 116 || e.keyCode == 82 && e.ctrlKey) { //116 = F5 $("#content").load("addproduct.html"); return false; } }); 

Answer 3

Alternatively, instead of using a hash, you can use the HTML5 history API ( pushState , replaceState and popstate ). Basically, this is a hash with some improvements (one indexed by search engines).

https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history
http://www.w3.org/TR/html5/history.html