How to refresh only a part of the page when F5 or refresh button is pressed

Question

I'm designing a web application that has a shared menu for all pages. Due to this i decided to load the contents linked by the menu buttons inside a div, using jquery.

So, I have this:

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

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

I saw some websites that use an iframe to load the pages, but when a user clicks a button in the menu the url is also changed. I didn't find any info on how to do that.

Thanks

Answer 1

Here's a solution for the 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 2

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

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

Some plugins like jQuery history use this technique.

Additionally, you can leverage the local storage and cache parts of the code at the browser, so you won't load the content with AJAX call the second time.