Ajax or partial ejs views for loading HTML content after page has loaded?

[Boss]

I'm working on a site with Express (using the ejs template engine) and
I would like to keep every part of my website the same except for one
<div> element.

I would like to load pages into the div upon clicking links.

Now, currently I just am routing full views (I think that's the
correct term) like so:

app.get('/about', function(req, res){
res.render('about', {
title: 'About myAwesomeWebsite'
});
});

But, it's a waste, really, considering the majority of the site goes
unchanged.

I think I've read that partial views support WebSockets? Would that
be better and faster than using Ajax?

Also, I'm having difficulty understanding partial views...

Any clarification is appreciated.


Thanks!

[Jaime Bueza]

Hey Boss!

Partial views are small components that represent a document fragment. Like, "Login Panel", or "Registration Form" or even "Side Menu" -- not so much a whole page. They can also receive values, such as, hash objects like records so you can iterate over them inside a partial view. An example of that would be "UserTablePartial", you would pass 'users' into it and inside the partial you could iterate over them and render out markup.

For more info: http://expressjs.com/guide.html

Hope that helps!

Jaime

--
You received this message because you are subscribed to the Google Groups "Express" group.
To post to this group, send email to expre...@googlegroups.com.
To unsubscribe from this group, send email to express-js+...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/express-js?hl=en.

[Jaime Bueza]

Do you have an example up somewhere where we could see to get a better understanding of your particular use case? perhaps on github?

[TJ Holowaychuk]

WebSockets are great, however if you are rendering on the client-side only, you might as well just transfer json and render using a cross-browser friendly template engine. partials are basically identical to a regular render() call, with the exception of a partial's filename optionally beginning with a '_', and the partial() call itself has different options, making it more appropriate for rendering a template "chunk", "fragment", or "partial", whatever you like to call it.

-- 
TJ Holowaychuk

[Laurie Harper]

Partials allow you to re-use a template fragment from multiple templates, or multiple times from a particular template (e.g. for each element of a collection) when rendering server-side. For server-side rendering of pages which differ only in the content of a particular div, what you want is layouts -- the layout template contains the portions of the page that doesn't change, and the per-page template contains just the variant part of the page.

It sounds like what you want to do is partial page refresh, though, generating just the part of the page that's different in response to an Ajax request, and replacing the div content with the Ajax response. In that case, you can just have your routes produce the part of the page that goes in the div. Make an initial request to a route that will serve the full page, and then use ajax requests for the page updates.

For the most robust solution, you can go one better: have your routes serve the full page normally, but detect an Ajax request and only serve the div contents in response to that. That makes it easy to have links that are functional in non-JavaScript capable user agents, and progressively enhance them to do partial page refresh when JS is available.

L.

> --
> You received this message because you are subscribed to the Google Groups "Express" group.
> To post to this group, send email to expre...@googlegroups.com.
> To unsubscribe from this group, send email to express-js+...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/express-js?hl=en.
>

--
Laurie Harper
http://laurie.holoweb.net/

[Boss]

Wow, thanks for all of the prompt help guys! I apologize for
responding so late, I think I just completely forgot I posted this
thread...

So, I'm working on something else now - a blog, actually - but I've
come to the same question.

I think you guys have clarified pretty well what a partial is, and
what it should be used for. For example, in my blog (github repo link
below) I use a partial to render posts from a mongo db.

Now, I have a layout view to preserve a constant theme. The only
content I'd like to change upon different routes would be the #content
<div>. This is currently where my index.ejs and post_new.ejs get
loaded into. However, like I said a while back, I think I'd rather
load these in with ajax instead of these views.

But, I'd like to hear what you guys think I should do.

Thanks!

github: g...@github.com:qcom/ExpressBlog.git