Bootstrap + pushState + ajax

Today i going to tell how to integrate Bootstrap with pushState+ajax by using the pjax jquery plugin.Everyone should know about pajax. pajax is pushState + ajax = pajax.

Use of pjax Plugin:

  • Fast browsing Experience
  • Quite simple to use this for both static and Dynamic websites
  • It loads the content from server without refreshing the page
  • It does fast caching with page
  • It loads the previous page very fast while navigate the back button.

How it works:

it gets the data from the server via Ajax and and replacing the content of a container on your page with the ajax.Once it get finished the content replace the it replace the browser current url by using pushState with out reload the page or any  resources like js,css,images.

Example:

It is not a automatic but you should assign pjax element and its container.Consider the following HTML page.

if you want to navigate to page/2 via pajax then you should assign pjax element which means

“a” pjax element and  “#pajax-container” is a pajax container.

Now when someone in a pjax-compatible browser clicks “next page” the content of #pjax-container will be replaced with the body of /page/2.

Browser support :  http://caniuse.com/#search=pushstate

pjax plugin details :  https://github.com/defunkt/jquery-pjax

 

Demo        Download