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;}
   });
});

It would be a long explanation. Generally,

1. for every button/link that updates a HTML fragment through AJAX you need to have also a URL that would make possible rendering the whole updated page through a normal HTTP-request;
2. the AJAX handlers that update HTML fragments should manipulate the browser history, using the URL that I've mentioned before.

This could be done manually (but it requires careful work and experience), also external components for this purpose could be adapted, see:
pjax - https://github.com/defunkt/jquery-pjax
a more complicated implementation: https://github.com/falsandtru/pjax-api

See this page: http://iridadesign.com/starter-public-ed...round/pjax When you click on the submenu, only a fragment of the page gets updated (the title is not updated, the example is not precise). The browser line (the link) gets updated too, with this (bookmarkable) link you can reload the whole page. Browser history works too.

There is also Turbolinks project https://github.com/turbolinks/turbolinks , but I have no time to see whether it is applicable on PHP.

It would be a long explanation. Generally,

1. for every button/link that updates a HTML fragment through AJAX you need to have also a URL that would make possible rendering the whole updated page through a normal HTTP-request;
2. the AJAX handlers that update HTML fragments should manipulate the browser history, using the URL that I've mentioned before.

This could be done manually (but it requires careful work and experience), also external components for this purpose could be adapted, see:
pjax - https://github.com/defunkt/jquery-pjax
a more complicated implementation: https://github.com/falsandtru/pjax-api

See this page: http://iridadesign.com/starter-public-ed...round/pjax When you click on the submenu, only a fragment of the page gets updated (the title is not updated, the example is not precise). The browser line (the link) gets updated too, with this (bookmarkable) link you can reload the whole page. Browser history works too.

There is also Turbolinks project https://github.com/turbolinks/turbolinks , but I have no time to see whether it is applicable on PHP.

thanks you for these references ill look into this .

https://developer.mozilla.org/en-US/docs...istory_API

Push URL's or hashes into the history API each time you want to fake a page change. It's horribly out of date at the moment but I made an addon for CI that's very similar to pjax. It's called Cinder. I'll try to sync it soon the latest internal build is nearing the first final release and includes a lot of changes. Sorting out garbage collection of plugins bound to partials at the moment. Until I update it I wouldn't use the build I linked but if you look at app.js and conduit.js in private/controllers/system/js you'll see how I do it.

I have used jQuery Address plugin for this.

http://www.asual.com/jquery/address/

Terrible way to make a website. You will always hate yourself for doing it.

Expert Website Development - Temecula, CA
Community Auth For CodeIgniter 3

I have used jQuery Address plugin for this.

http://www.asual.com/jquery/address/

Terrible way to make a website. You will always hate yourself for doing it.

hi thanks for the reply :

Im using a Bootstrap admin theme that the idea is to load side top and right menu as well ass all css and js files
i only fill in the content. do you think i should reload the entire page each time ?

im willing to change this if it is not suitable/ i did this as i notice FB google use this sort of thing.