codignighter ajax history

Hi all first of all let me wish your all a great year.

I have a problem

i have a main html page with a <div id="upt-contents"></div>

When a user clicks a button or link it calls a function in my controller that fetches a partial view and places it in the div mentioned above via ajax. my whole site works like this.

Let me also mention that my url is always the same http://mysite/dashboard

also All ajax calls go throught the routes $route['mypage'] = 'mycontroller/mypage';

This all works well but my browser history, back, forward obviously doesn't work.

does anyone have an idea how i can do this and impliment browser history as well.

thanks in advance


This is my javascript code for load pages:

Code:

$("body").on("click", "[data-page]", function (e) {
  e.preventDefault();
    var data_page = $(this).data("page");

   $.ajax({
       type: "GET",
       url: base_url + data_page,
       dataType: "json",
       beforeSend: function() { $(".page-loader").fadeIn(); },
       complete: function()   { $(".page-loader").fadeOut(); },
     success: function(data){
       if (data.isloggedin == "true")
         {$("#upt-contents").html(data.content);}  
       else
         {window.location.href = data.redirect;}
     },
     error: function()
       {window.location.href = data.redirect;}
   });
});