How to load the right pane without reloading header/footer or leftnav

Question

I'm trying to build a web app (HTML/Bootstrap/jquery) which has header,footer,leftnav and right pane. The content of the right pane would be a separate html page which will be loaded based on what is clicked in the left nav.

I got individual pages with HTML for header/footer/leftnav replicated for each content page. But I only would like to have the right pane content to be loaded without reloading the other components.

Heres an example, upon click on left nav item.. only the content of the right pane changes: http://play.raaga.com/myraaga

Appreciate any help, thanks!

Answer 1

You could use the ".load()" function of jquery.

$('selector-of-the-panel').load('url');

jQuery .load() docs

Answer 2

The example you included looks pretty close to jQuery UI's .tabs() widget, which you can use with ajax to load your different html pages: http://jqueryui.com/tabs/#ajax For a vertical nav-like look, see: http://jqueryui.com/tabs/#vertical