How to re-render html div in node.js?

Question

I am building my first app with node.js.

This app uses Express as the web application framework with Jade template engine.

I need to design a screen which displays list of items retrieved from a MongoDB database.

Initially while displaying list of items data is sent from controller and formatting is done in jade template.

However, I also need to update list of items via an ajax call.

I am finding it difficult to design a suitable approach for this particular flow.

I have following option:

1. Send list of items from in ajax response.
2. Use javascript to render UI components - adding css class, preparing html.

However this approach is very fragile. Also a lot of code would be exposed in web browser.

I am coming from JSF that has re-render of components, a built-in feature.

Can node.js, ajax and re-render be clubbed together ?

Answer 1

You should use modern client-side web development frameworks like AngularJS, which will do all of this automatically.

Answer 2

The short answer is no. Node is on the server. You have to render on the client. You're going to need some js to render the ajax, one way or another.

Your alternative would be redirect the client to a new page with the html rendered how you'd like it, which would feel pretty 1999

Answer 3

You can make another router like "partialList" where you put only list's HTML and on ajax request populate and render that list with Jade template. Then in browser (supposing you use jQuery) you can make request to http://example.com/partialList and you will get only HTML and after that use .html() method to put that HTML to the place where list has to be.

$.get('http://example.com/partialList', function (listHTML) {
  $('#list-placeholder').html(listHTML);
});