Auto-Refresh Div in Jade Template (Node.js/Express

Question

I am using Node.js, Express, Jade, and Redis to develop an app that will display spots from a telnet stream provided by reversebeacon.net, which are cross-referenced against Redis databases of amateur radio club members and if they match are displayed on a table on my app. All this is working wonderfully so far.

Unfortunately, I have to refresh the entire page to show new spots on the table. I would like to only refresh the div that contains the table (#activeDiv), instead of setting an interval that will refresh the entire page.

Most examples I've encountered on the web have been geared towards PHP, I've attempted to adapt these for my application, but have not been very successful thus far.

layout.jade

doctype 5
html
  head
    title HAMjitsu | Club Spotter (Flying Pigs, FISTS, SKCC, NAQCC)
    link(rel='stylesheet', href='/stylesheets/style.css')
    script(src='http://code.jquery.com/jquery-latest.js')
    script
      // nothing I've placed here has worked :-(
  body
    h1 HAMjitsu
    p Welcome to HAMjitsu, the realtime tool that let's you see who's on the air right now!
    p This application is in the early "alpha" phase of development.  For now, the Flying Pigs will be able to see when their fellow piggies are causing havoc on the bands.  But don't you worry, other clubs will soon be able to use this tool.  
    block content

index.jade

extends layout

block content
  div#activediv
    table
      thead
        tr
          th DE
          th Freq
          th DX
          th NR
          th Mode
          th dB
          th WPM
          th CQ
          th UTC  
      tbody
        each spot, i in spots
          tr
            td: !{spot.de}
            td: !{spot.freq}
            td: !{spot.dx}
            td: !{spot.nr}
            td: !{spot.cw}
            td: !{spot.snr}
            td: !{spot.wpm}
            td: !{spot.cq}
            td: !{spot.utc}

Answer 1

This can be done with jquery and ajax using the load() function.

<div id="myid"/>

$("#myid").load("a/path")

The data returned by a/path will be stored inside the div. To fetch the data you poll the server every second or use websockets and push the data directly from the server to the client.

Answer 2

Typically you would do this with a client-side ajax call and update your info in the dom. I recommend using jQuery:

<ul id="list"></ul>

$.get('/api/data', function(data){

 var htm = (
  '<li>'+data.foo+'</li>';
 );

 $("#list").append( htm );
});