Take the 2-minute tour ×

Imagine a review site where users enter ratings and optionally short comments.

On each review page you've got many comments - these are displayed in a table at the end of the page (btw - not looking for datagrid type controls, far too simple for that)

I want to let users enter new reviews and update the page without a page refresh.(all simple stuff so far, this is not the question)

What is a good approach to generating for the page. Some thoughts :-

  1. Generate the reviews HTML server side, append new reviews using javascript client side. Downside is that you've got table HTML generation code in two places. Upside - more content on page as far as search engines concerned.

  2. Server side only output reviews as json/xml/whatever and render HTML dynamically on page load using javasript.

    Downside - 'template' in javascript, hard for designers to customize + lack of 'content' on page.

  3. Is there an approach that combines the two methods - i.e. a templating framework that will render existing data server side but also sends the template fragment client side so it can be reused there for additions/edits.

  4. With (2) to get the data on initial page load would you

    • a) include json/xml on initial page and run client side render on page load

    • b) get it via a separate AJAX call on page load (+ simpler, - extra request and delay)

I am focused on jQuery/Django but this question applies to other frameworks and AJAX libraries.

This is a bit of a subjective quesiton, hope it doesn't step over the line! Thoughts?

share|improve this question
With a framework, one approach to (3) is to use a view "partial" to render a review. The server-side code loops through existing reviews and calls the partial to render them one after the other as part of rendering the parent page; when a new review is added the javascript asks the server to render the partial for that new review and return it to the client, and appends that to the existing reviews on the page. –  Matt Gibson Mar 1 '11 at 13:43
Matt - I like the idea and am going to investigate further - put it in as an answer if you like, sure to get points and prizes ;) –  Ryan Mar 1 '11 at 16:31

3 Answers 3

up vote 2 down vote accepted

With a framework, an approach to your scenario (3) -- combining both methods -- is to use a view "partial". A partial is a fragment of a view that can be rendered on its own; a single view could be made up of several partials.

In your case, you'd define a partial to render a review. When showing the page from scratch, the server-side code loops through existing reviews and calls the partial to render them one after the other. When a new review is added to the existing page, the javascript asks the server to render just the partial for that new review and return it as an Ajax response, and then appends it to the existing reviews on the page.

share|improve this answer

You wouldn't necessarily have to know the template ahead of time, you'd just have to set hooks in the code for what data you want to fill in with JSON when you render your template.

The scenario would work like this:

  1. Server side generates the page on initial load
  2. AJAX call finds new page data and wants to render it
  3. jQuery clones comment item from the page and re-populates the data with JSON

I personally like keeping initial page load on the server-side for making it easier to cache pages and then only use AJAX for when you need to update the page or switch to a related page without the website having to reload.

An example for you:

<ul class="commentsArea">
    <li class="comment" data-commenter-id="user1234">
        <a href="#" class="userName">Rob</a>
        <p class="userCommentContent">Some comment content would go here.</p>

Then you'd have a templating function:

function template(comment, newCommentMetaData) {
    // comment is a cloned comment object
    // newCommentMetaData is the AJAX data
    comment.attr('data-commenter-id', newCommentMetaData.userid);
    return comment; 

Then finally you'd have to clone the comment to add new ones:

var newComment = $('li.comment:first').clone();
// fill in your AJAX data here
var newCommentMetaData = {
    userid: 'user2345',
    name: 'Pete',
    content: 'The new comment content goes here'
/* you would have to put an each() function here to iterate through all new comments
   and template them up, but hopefully you get the idea */

template(newComment, newCommentMetaData).appendTo('.commentsArea').fadeIn();
share|improve this answer
Like it - if the html elements had a class name that was the same as in returned json/xml (would need some prefix I guess) then the javascript fill in the new element automatically (function template would just be a loop matching json elements to html elements) –  Ryan Mar 1 '11 at 18:08

I've had a similar problem when trying to build an online-editable database to keep state of companies that needed to be contacted by a fund-raising team.

Ultimately I chose 2-json with 4-b, for the sake of less data transferred, but didn't bother making it work without javascript because of the DRY+lack of time. No content for SE to index but didn't care as it was private anyway.

However, if transferring entire table once per update is not a problem, I'd choose 1. About that btw, I don't understand why you said HTML generation code would be in two places.

Assuming you have a page_content view that only generates the table, you could 1) include it as a "component" (as it resembles the component idea in Nagare Framework where a page is a tree of nested components) when rendering the view of the initial page (all server-side) and then 2) request it using ajax and replace the innerHTML of the old table's parent, which means that the HTML table generation code is only found in page_content, and the search engines are happy.

Also a good optimisation to 1 would be to poll server from time to time for updates, but provide timestamp of last update so that server may send an empty response if you already have the newest content. (well, provided you don't use WebSockets in HTML5, which eliminates the need for polling by using push notifications).

2 on its own is ugly for general use, three sounds really good but I don't know of any templating framework that handles that data automatically on both server-side and client-side.

For edits and especially additions, you're right, you'd have to have the template on the client side to make if you really want to send as little data as possible (that's what I did with the edits on my page), but you could more easily stick with 1 by sending the edit/new item to the server and then requesting the updated page with ajax.

share|improve this answer
re "don't understand why you said" - I meant that if you generating the html for the existing records server side but new/edits client side then both your server side python/php/whatever and your client side javascript have to 'know' how to generate your HTML. Want a change, you've got to do it in 2 places. –  Ryan Mar 1 '11 at 16:34

Your Answer


