auto refresh using ajax in virtualevents_view

rowers/templates/virtualevents.html

@@ -5,6 +5,55 @@
 {% block title %}Rowsandall Virtual Racing{% endblock %}
 
 {% block scripts %}
+<script type='text/javascript'
+        src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'>
+</script>
+<script>
+
+  function submit_form() {
+  console.log("form changed");
+  var frm = $("#raceform");
+
+  var data = new FormData(frm[0]);
+  
+  $.ajax({
+  url: "/rowers/virtualevents",
+  type: "POST",
+  contentType: false,
+  processData: false,
+  data: data,
+
+  success: function(data) {
+  console.log("got something back");
+  console.log(data)
+  
+  $('#racelist').html(data)
+  }
+  
+  });
+  };
+  
+  $(document).ready(function() {
+  var csrftoken = jQuery("[name=csrfmiddlewaretoken]").val();
+  console.log("CSRF token",csrftoken);
+  
+  function csrfSafeMethod(method) {
+  // these HTTP methods do not require CSRF protection
+  return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
+  }
+  $.ajaxSetup({
+  beforeSend: function(xhr, settings) {
+  if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
+  xhr.setRequestHeader("X-CSRFToken", csrftoken);
+  }
+  }
+  });
+  $("#raceform").on('change', function(evt) {
+  submit_form();
+  });
+  });
+</script>
+
 
 {% endblock %}
 
@@ -19,7 +68,7 @@
 </div>
 
 <div class="grid_12 alpha">
-  <form enctype="multipart/form-data" method="post">
+  <form id="raceform" enctype="multipart/form-data" method="post">
     <div class="grid_8 alpha">
     {{ form.as_table }}
     {% csrf_token %}
@@ -30,29 +79,8 @@
   </form>
 </div>
 
-<div class="grid_12 alpha">
-  <p>
-  <table width="100%" class="listtable shortpadded">
-    <thead>
-      <tr>
-        <th>Date</th>
-        <th>Event</th>
-        <th>Country</th>
-        <th>Course</th>
-      </tr>
-    </thead>
-    <tbody>
-  {% for race in races %}
-  <tr>
-    <td>{{ race.startdate }}</td>
-    <td><a href="/rowers/virtualevent/{{ race.id }}">{{ race.name }}</a></td>
-    <td>{{ race.course.country }}</td>
-    <td>{{ race.course.name }}</td>
-  </tr>
-  {% endfor %}
-  </tbody>
-  </table>
-  </p>
+<div class="grid_12 alpha" id="racelist">
+  {% include 'racelist.html' %}
 </div>