Jade, Express.js, NodeJS - Automatically rendering the UI with new data

Question

The JSON Object (stories) looks like this:

    [ {
            title: "Story of Learning NodeJS",
            id: "1",
            description: "Interesting, Fun, Exciting" 
    }]

The JADE template to render the stories looks like this:

 ul
    each story in stories
        li
            span#storyTitle= story.title

This will render the list of stories in the client side. Now, I have a Create Story functionality, using which I will add a new story, hence adding it to the JSON object. I want this to be reflected in the Client UI without refreshing the page.

I tried using the:

response.render("index", {stories: stories });

after the POST method adds the story to the stories object. But the rendering does not happen.

How can this be achieved?

Answer 1

You have several possiblities:

Using Meteor :

There is a good feature you can use, it is called Live HTML Templates . You can easily bind your data and when on the backend they change, it also changes in frontend. But you'd need to rewrite your app :(

Using jQuery:
This is a small script that uses $.load to reload a part of the paga:

$.reloadSection = function (id) {
  var q = window.location.pathname + (window.location.search || "") + " " + id;
  $(id).load(q, function () {});
};

Now :

$.reloadSection('#my-id');

It works!