Peter Peter - 14 days ago 5
PHP Question

php - how to load contents without refreshing navigation bar

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

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.