node.js Express - How to get partial views asynchronously

Question

I've got a layout - navigation menu. In express tutorials theres only old-school pages loading. whole old page is thrown away and a new one is downloaded with all layouts,views and partial views. And i want navigation menu to stay. So how can i do that?

If i'm maybe getting smth wrong with this web pages architecture please guide me.

Solution

As @drachenstern said, you want to render only partial HTML fragments, not whole documents including the layout. You can tell express to skip the layout using:

res.render('sometemplate', {layout: false});

If you want to look for Ajax requests as distinct from full-page browser loads, use the req.xhr flag as documented here

Thus you might even be able to do

res.render('sometemplate', {layout: !req.xhr});

Comments

[jcolebrand]

are you saying that you want the page partial to be like the new google search page, where only part of the page is loaded on the fly?

[jcolebrand]

Then what you want is not really "express" but just plain old ajax.

[Raynos]

I have functionality similar to this explained in my blog post about re-using views on the client

[uKolka]

Any reason you chose req.isXMLHttpRequest over the aliased req.xhr ;)

[Peter Lyons]

it's just a clearer name. I generally prefer code that's easier to read over code that's easier to write if I have the option.

[Amol M Kulkarni]

For me req.isXMLHttpRequest returns undefined, using express 3.x, any guesses why?

[Peter Lyons]

In express 3.x it's just req.xhr

[Victor Schröder]

res.partial() is now deprecated and removed from Express 3.x. They recommend to use blocks: github.com/visionmedia/express/wiki/Migrating-from-2.x-to-3.‌​x