Ajax load dynamic page

Question

HTML index.php

<a class="cart-icon" href="cart"></a>
<div class="content"></div>

Ajax load content from load-content/cart.php

$(document).ready(function(){
   $(document).on('click', '.cart-icon', function(e){
       e.preventDefault();
       var page = $(this).attr("href");
       $('.content').load('load-content/'+page+'.php');
   });
});

This code will load content from cart.php but not update a url so when i refresh the page the content in that div dissapear. I want it when i refresh page it will not dissapear and also update url.

For example: default url: index.php and when i press an a tag it will load content from cart.php and update url to index.php/load-content/cart.php

Answer 1

You need a persistent storage of some kind. Anything you load into the DOM of a page is temporary. You might simply do the same thing that you're doing here on document load:

$(document).ready(function(){
   $('.content').load('load-content/'+page+'.php');
   $(document).on('click', '.cart-icon', function(e){
       e.preventDefault();
       var page = $(this).attr("href");
       $('.content').load('load-content/'+page+'.php');
   });
});