title: Update the todo list without refreshing the page in express nodejs app
body: <p>I am a newbee to the express nodejs applications. I want to make a todo list. This is how it looks so far. My question is when I add a todo, it takes some time to show the change since it reloads the page. How can I see the change in realtime without reloading the page.
  Thanks in advance.</p>
  
  <p>in <strong>tasks.jade</strong></p>
  
  <pre><code> h1= title
  
    .list
      .item.add-task
        div.action
          form(action='/tasks', method='post', id='12345')
            input(type='hidden', value='true', name='all_done')
            input(type='hidden', value=locals._csrf, name='_csrf')
            input(type='submit', class='btn btn-success btn-xs', value='all done')
        form(action='/tasks', method='post')
          input(type='hidden', value=locals._csrf, name='_csrf')
          div.name
            input(type='text', name='name', placeholder='Add a new task')
          div.delete
            input.btn.btn-primary.btn-sm(type="submit", value='add')
      if (tasks.length === 0)
        | No tasks.
      each task, index in tasks
        .item
          div.action
            form(action='/tasks/#{task._id}', method='post')
              input(type='hidden', value=task._id.toString(), name='id')
              input(type='hidden', value='true', name='completed')
              input(type='hidden', value=locals._csrf, name='_csrf')
              input(type='submit', class='btn btn-success btn-xs task-done', value='done')
          div.num
            span=index+1
              |.&amp;nbsp;
          div.name
            span.name=task.name + ' (Created at: ' + moment(task.createTime).format("YYYY/MM/DD") + ')'
            //- no support for DELETE method in forms
            //- http://amundsen.com/examples/put-delete-forms/
            //- so do XHR request instead from public/javascripts/main.js
          div.delete
            a(class='btn btn-danger btn-xs task-delete', data-task-id=task._id.toString(), data-csrf=locals._csrf) delete
  </code></pre>
  
  <p>in <strong>app.js</strong></p>
  
  <pre><code>app.get('/', routes.index);
  app.get('/tasks', tasks.list);
  app.post('/tasks', tasks.markAllCompleted)
  app.post('/tasks', tasks.add);
  app.post('/tasks/:task_id', tasks.markCompleted);
  app.delete('/tasks/:task_id', tasks.del);
  app.get('/tasks/completed', tasks.completed);
  </code></pre>
  
  <p>in <strong>tasks.js</strong></p>
  
  <pre><code>exports.add = function(req, res, next){
    if (!req.body || !req.body.name) return next(new Error('No data provided.'));
    req.db.tasks.save({
      name: req.body.name,
      createTime: new Date(),
      completed: false
    }, function(error, task){
      if (error) return next(error);
      if (!task) return next(new Error('Failed to save.'));
      console.info('Added %s with id=%s', task.name, task._id);
      res.redirect('/tasks');
    })
  };
  </code></pre>