1

I have a php page with menus like Home , About Us , Profile etc. Now on the home page if one clicks the "About Us" link the page does not gets reloaded instead Ajax response of "About Us" is displayed in a main div. But if the user now reloads the window , the information of the home page gets displayed , but I want to keep the "About Us" info in the main div as it was just before the page reload. Thank in advance ...

3on
  • 6,117
  • 3
  • 23
  • 22

1 Answers1

1

You need to do something like adding a hash to the url so you can re-render the right state of you page.

like #!/About-us

And in you code check if you have suck a hash and if so do the right rendering. Here is a very naive implementation of this technic. I highly recommend you to have a look at one the many great framework out there.

HTML:

<a href="#!/About-us">About us</a>​

Javascript:

function renderAbout() {
 alert("render about");   
}

var hash = window.location.hash;

if (hash === "#!/About-us")
    renderAbout();
​

demo

There plenty of framework to help you achieve this:

crossroads.js
Finch.js
David.js
jQuery BBQ

Here is a stackoverflow discusion about them. And here is a discusion to about why #!/About-us and not just #About-us

Community
  • 1
  • 1
3on
  • 6,117
  • 3
  • 23
  • 22
  • thank u.... but would you please provide sample code for that, I shall be grateful –  Aug 26 '12 at 18:45
  • @GitanjalBhattacharjya I just updated to had a naive implementation. – 3on Aug 26 '12 at 19:03
  • thank you very much for the resources. As a novice it may take a little for me to get it properly... I may need your help again... –  Aug 27 '12 at 07:16
  • Those framework are a bit big. They might be overkill for you. You could just ht the technic I showed you. – 3on Aug 27 '12 at 07:49
  • Thanks for your help... I have solved the problem using Jquery BBQ –  Sep 03 '12 at 07:25
  • Glad I could help. Don't forgt to close the question. – 3on Sep 03 '12 at 18:24
  • Don't use `#!`, it gives more problems then it solves. `pushState` and friends solve the problem without breaking URLs. – Quentin Sep 03 '12 at 18:29
  • @Quentin how does a pushState helps you when you share a link so a friend? and in term of SEO? – 3on Sep 03 '12 at 18:31
  • It gives you real URIs that don't depend on JavaScript to function (you need to create the same content server side when the URI is initially hit, but you need to do that for the hashbang URIs anyway … just using a weird URL translation that only works for GoogleBot instead of everyone). – Quentin Sep 03 '12 at 21:58