(drupal / whitehouse.gov) Howto dynamically load node-content without reloading page?

Question

Imagine I define video-type node, which displays for example a title and description, along with the video itself. And imagine I have a block of video teasers, where each teaser links to one such video node. And imagine this block is added to the bottom of any page displaying a video-type node: when the user clicks on one of the video teasers, the page reloads with a new video-type node.

Finally, imagine all of the above but without having to reload the full page.

If you go to http://whitehouse.gov/video, you will see what I am trying to accomplish. When you click on one of the video teasers, the url changes to the url for the new node, but the full page does not reload. Only the top section of the page, displaying the new node, gets reloaded.

My question: How do they do this?? How can I load the node content into a particular div on page, without reloading the entire page?

Answer 1

You can use hook_menu to implement a MENU_CALLBACK to it's own handler function in Drupal. You would return JSON or XML or an HTML fragment or whatever you want with the HTML for the new video. Then use JS to update the DOM with the new content received from the server. Updating the URL can be done with JS as well.

So basically you are going to handle video clicks on the client side with JS. The JS would make a request to your MENU_CALLBACK and you would receive whatever data you choose to implement back from the server. JS takes the data and updates the DOM.

With something like jQuery, you could use the $.get method and use the success attribute to update the window history in modern browsers.