7

I am wondering if anyone can point me in the direction of learning how to update the page html and url without refreshing the page.

Are there any existing javascript libs that handle this or it there a good book that covers this sort of thing.

Here is an example site using that effect.

http://onedesigncompany.com/

Notice the actual html is update when the section is changed as well as the url while maintaining a smooth transition with no visible page refresh. The site also works properly without javascript.

Also if anyone sees any downside to using this approach I am all ears.

puddletown
  • 215
  • 1
  • 3
  • 5
  • possible duplicate of [Modify the URL without reloading the page](http://stackoverflow.com/questions/824349/modify-the-url-without-reloading-the-page). Also see the numerous duplicates in the "related" list on the right side of this page. – JJJ Mar 29 '12 at 09:11
  • Well I am specifically interested in how the html on the page is updated as well. Seems more then just modifying the url bar. – puddletown Mar 29 '12 at 09:21
  • That's just basic JavaScript. – JJJ Mar 29 '12 at 09:22
  • The example you have posted does actually seem to be refreshing the page. I would guess they are using [JQuery Mobile](http://jquerymobile.com/) or something to that effect (check out the page transition stuff) – musefan Mar 29 '12 at 09:31

2 Answers2

8

If you need to re-load a portion of a page, without reloading the entire page, I would highly recommend using jQuery.Load():

http://api.jquery.com/load/

With jQuery.load() you can select a div and reload content into it from another webpage. For example:

$(".myDiv").load("/myOtherwebpage.html");

You can also specify content from a particular element on that other page:

$(".myDiv").load("/myOtherwebpage.html .myOtherClass");

However, if you need to reload all the content from another page, and change the URL to a different page, then I would just recommend linking to that page. Theres no performance benefit from doing this through jQuery.

Curtis
  • 101,612
  • 66
  • 270
  • 352
  • 1
    Right that was my first though, but the actual html is not updated, it is just swapped out with a script. If you view source and navigate the site you can watch the html change. – puddletown Mar 29 '12 at 09:22
  • 2
    @user1300321: Source code is Source code, you are not changing that by using javascript. You seem to want everything a page navigation does, but without using it... why??? – musefan Mar 29 '12 at 09:27
6

There is, and it's called PushState.

It's a newer technology which most of the newest browsers (internet explorer excluded :P) support. Basicly it alters the adressbar through javascript.

I might seem as nothing but it's really neat! Usually you'd do this through the hash www.example.com#/contact for example.

The latest project that I've used this technology I've used a js plugin called History.js whcih can determine if your browser supports PushState or not.

Depending on this I either bind an event to relevant links which does a pushstate and some ajax instead of loading the new site, or let the <a href=""> act normally.
That makes all browsers rather happy.

Basicly my script creates the same result with refresh as with pushstate and ajax.

EDIT:
Just a side note on that example of yours. It's quite smartly made :)
It loads new pages through ajax and gets it's HTML, but if you browse that page again it redisplay the fetched results so no unneeded ajax calls are being made.

Robin Castlin
  • 10,956
  • 1
  • 28
  • 44
  • Thanks! I think that's it! I'm going to research this a little more before I mark answered. – puddletown Mar 29 '12 at 09:26
  • On your edit: Yeah! I'm really impressed with that site. From first look it seems perfectly progressively enhanced and the js pretty darn well optimized. Very clever stuff. – puddletown Mar 29 '12 at 10:06