title: How to use Ajax(?) in Django to update an image from the server
body: <p>Here is my simple Template:</p>
  
  <pre><code>{% extends "base.template" %}
  {% load staticfiles %}
  
  {% block title %}Status{% endblock %}
  {% block content %}
      {% if status1 %}
        {% with "images/"|add:status1|add:".gif" as static_image %}
          &lt;img src= "{% static static_image%}" width='100' height='100'/&gt;
        {% endwith %}
      {% endif %}
      {% if status2 %}
        {% with "images/"|add:status2|add:".gif" as static_image %}
          &lt;img src= "{% static static_image%}" width='100' height='100'/&gt;
        {% endwith %}
      {% endif %}
      {% if status3 %}
        {% with "images/"|add:status3|add:".gif" as static_image %}
          &lt;img src= "{% static static_image%}" width='100' height='100'/&gt;
        {% endwith %}
      {% endif %}
      {% if status4 %}
        {% with "images/"|add:status4|add:".gif" as static_image %}
          &lt;img src= "{% static static_image%}" width='100' height='100'/&gt;
        {% endwith %}
      {% endif %}
  {% endblock %}
  </code></pre>
  
  <p>Here is my view:</p>
  
  <pre><code>def getStatus(request):
    status = get_template("template");
    stats = getStats()
    if len(stats) == 1:
      rtn = status.render(Context({'status':stats[0]}))
    elif len(stats) == 2:
      rtn = status.render(Context({'status1':stats[0],
                          'status2':stats[1]}))
    elif len(stats) == 3:
      rtn = status.render(Context({'status1':stats[0],
                          'status2':stats[1],
                          'status3':stats[2]}))
    elif len(stats) == 4:
      rtn = status.render(Context({'status1':stats[0],
                          'status2':stats[1],
                          'status3':stats[2],
                          'status4':stats[3]}))
    return HttpResponse(rtn)
  </code></pre>
  
  <p>This is all working.  Periodically, the results of getStats() (on the server-side) changes and I want to change the image that is presented in the view on the user's screen.  I would prefer not to use html refresh and update the entire page.  I want to only update the image (and only when it actually changes.)</p>
  
  <p>I assume the answer is Ajax... I have looked for simple examples of Ajax and Django and not found anything that makes sense (to me.)  Any suggestions would be most welcomed.</p>
  
  <p><strong>EDIT:</strong><br>
  Here is my urls.py:</p>
  
  <pre><code>from django.conf.urls import patterns, include, url
  from garageMonitor.views import *
  from django.contrib import admin
  admin.autodiscover()
  urlpatterns = patterns('',
    url('time', currentTime),
  )
  </code></pre>
  
  <p>Here is my base.template:</p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;title&gt;{% block title %}{% endblock %}&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;h1&gt;Garage Status&lt;/h1&gt;
      {% block content %}{% endblock %}
      {% block footer %}
      &lt;hr&gt;
      &lt;p&gt;Thanks for visiting my site.&lt;/p&gt;
      {% endblock %}
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is my time.template:</p>
  
  <pre><code>{% extends "base.template" %}
  {% load staticfiles %}
  {% block title %}Current Time{% endblock %}
    {% block content %}
      Here is time.template
      {{ time }}
      &lt;onload="refresh()" src="/static/garageMonitor/scripts/refreshTime.js"&gt;
  {% endblock %}
  </code></pre>
  
  <p>Here is my views.py:</p>
  
  <pre><code>import datetime
  from time import gmtime, strftime
  import os
  from django.shortcuts import render_to_response
  from django.contrib.auth import authenticate
  from django.contrib.auth import login
  from django.contrib.auth.models import User
  from django.http import Http404
  from django.http import HttpResponse
  from django.template import Context
  from django.template.loader import get_template
  
  def currentTime(request):
    status = get_template("time.template");
    now = strftime("%H:%M:%S", gmtime())
    rtn = status.render(Context({'time':now}))
    return HttpResponse(rtn)
  </code></pre>
  
  <p>Here is my refreshTime.js:</p>
  
  <pre><code>function refresh() {
    $.ajax({
      url: '{% url garageMonitor/monitor-test %}',
      success: function(data) {
        blah
        $('#test').html(data);
      }
      setInterval("refresh()", 1000);
    });
  };
  
  $(function(){
    refresh();
  });
  </code></pre>
  
  <p>From what I understand (and that is not that much!), the refresh() function in the file /static/garageMonitor/scripts/refreshTime.js should be called when the time page loads. The function should then call itself every second.</p>
  
  <p>The page is loading correctly, but it is not refreshing.  What am I doing wrong?</p>