making auto-updating, facebook-style time formatting

Question

Can some help me figure out why my javascript HTML template doesn't auto-update the time but the regular HTML does? Here's the templating library i'm using: https://github.com/blueimp/JavaScript-Templates

here's my JS (you can fiddle with it here: http://jsfiddle.net/trpeters1/SpYXM/76/ ):

$(document.body).on('click', 'button', function(){
   var id= $(this).data('id');
   var data={id:id, string: "just now...", fxn: nicetime()};       
   var result = tmpl('<div id="string" data-id="'+id+'">{%=o.string%}</div><div id="function" data-id="'+id+'">{%=o.fxn%}</div>', data);     
   $('div[data-id="'+id+'"]').html(result);   
   nicetime();
});

function nicetime(){
  var time =  new Date(),
  var comment_date = setInterval(function() { 
  var time2 = time_since(time.getTime()/1000);
  $('#time_since').html(time2); 
  return time2; 
    }, 
  1000);
}

HTML:

<button data-id="1">1</button>
<div data-id="1"></div>  //tmpl output
<div id="time_since"></div>  //non-tmpl output

Answer 1

You want something like this.

With JavaScript templating, you generally want to template once, then update the values of specific elements dynamically, as opposed to resetting the innerHTML of an entire element every second.

Here's the JavaScript:

$(document.body).on('click', 'button', function(){
    var id= $(this).val(),
        time = +new Date,
        data = {
            id: id,
            string: "just now..."
        },    
        result = tmpl('<span class="string">{%=o.string%}</span>', data),
        tgt = $('#'+id),
        str;
    tgt.html(result);    
    str = tgt.find('.string');
    window.setInterval(function() {
        str.html(time_since(time/1000));
    }, 1000);
});