php - how to load contents without refreshing navigation bar

Question

I am trying to figure out how to load contents without refreshing navigation bar like facebook does.

If you look into a facebook profile (not timeline), there is a navigation bar in the left column which has 'wall', 'info', 'photos', 'friends', etc..

And for example, when you click 'wall', the url becomes www.facebook.com/yourid?sk=wall, and the middle column gets refreshed and loads the contents. But this happens without refreshing the left navigation bar (also the top menu bar).

How does this work?

I am working on a php website that has url something like this, www.example.com/profile.php?id=1234, which is the main page with navigation bar, and when a user creates a page, the url becomes www.example.com/profile.php?id=1234&page=1. How can I load that &page=1 contents without refreshing the navigation bar part?

======================================

I took the (WITHOUT javascript) off of the title. I thought facebook does that without javascript, but I was wrong.

Answer 1

First of all, I'm fairly sure facebook uses javascript for that, because it's client side and that's how you can do what you want. Test it by disabling javascript in your browser and then trying it again.

PHP is server side, and thus if you want to refresh one bit of the page, the whole page has to be sent back to the server since that's where it will decide what part to refresh.

What you could do is use iframes. An iframe with the menu, an iframe with the content, then you can only refresh the content iframe. Though, I'm not really a fan of frames for various reasons. Using Jscript would be better :)

UPDATE

Since a couple of years, Single Page Applications (webapps that run entirely in the browser, without having to do a full refresh on the server) have increased a lot in popularity.

Basically, you use frontend javascript frameworks like Angular or React to code your application. The result will be a non-reloading single page website.

Answer 2

As its already been commented, this is done with JavaScript. PHP is a server side language so your client side handles effects like this. Facebook use JavaScript, and a lot of it to accomplish the various effects on their site.

Answer 3

I think you can do it using iframes - your main profile page will contain an iframe - the main url will be www.example.com/profile.php?id=1234 and when the user clicks on your link, only the iframe will reload with url www.example.com/profile.php?id=1234&page=1

The navigation link will remain the same.

Answer 4

var iDiv = document.createElement('div');
iDiv.id = 'newDiv';//give u'r div an id
document.getElementsByTagName('body')[0].appendChild(iDiv); //append the div    to   your html body 
$( "#newDiv" ).insertAfter( $( "#nameOfDiv" ) ); 
                 //moving it after your desired div(which is nameOfDiv here) 
$('#newDiv').load('somePage.php'); //load desired page in newDiv 
//or 
$('#newDiv').html('some text here') 

you want to look your url to be like www.example.com/profile.php?id=1234&page=1. please have a look at http://tutorialzine.com/2009/09/simple-ajax-website-jquery/ it's very helpful.