ajax calls working

rowers/templates/instroke_interactive.html

@@ -4,32 +4,77 @@
 
 {% block title %}Advanced Features {% 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 = $("#instrokeform");
+    var data = new FormData(frm[0]);
+
+    $.ajax({
+      url:"/rowers/workout/{{ workout.id|encode }}/instroke/interactive/",
+      type: "POST",
+      contentType: false,
+      processData: false,
+      data: data,
+      dataType: 'json',
+
+      success: function(data) {
+        console.log(data);
+        $("#id_script").replaceWith('<div id="id_script">'+data.script+'</d'+'iv>');
+        $("#id_chart").replaceWith('<div id="id_chart">'+data.div+'</d'+'iv>');
+      }
+    });
+  }
+
+  $(document).ready(function() {
+    var csrftoken = jQuery("[name=csrfmiddlewaretoken]").val();
+    function csrfSafeMethod(method) {
+      return(/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
+    }
+    $.ajaxSetup({
+      beforeSend: function(xhr, settings) {
+        if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
+        xhr.setRequestHeader("X-CSRFToken", csrftoken);
+      }
+      }
+    });
+    $("#instrokeform").on('change', function(evt) {
+      submit_form();
+    });
+  });
+</script>
+{% endblock %}
+
 {% block main %}
-{{ js_res | safe }}
-{{ css_res| safe }}
 
 <script src="https://cdn.pydata.org/bokeh/release/bokeh-2.2.3.min.js"></script>
-<script src="https://cdn.pydata.org/bokeh/release/bokeh-widgets-2.2.3.min.js"></script>
+
 <script async="true" type="text/javascript">
   Bokeh.set_log_level("info");
 </script>
 
-{{ the_script |safe }}
+<div id="id_script">
+  {{ the_script |safe }}
+</div>
 
 <h1>In Stroke Metrics</h1>
 <ul class="main-content">
   <li class="grid_4">
-    <div id="theplot" class="flexplot">
+    <div id="id_chart" class="flexplot">
       {{ the_div|safe }}
     </div>
   </li>
   <li class="grid_4">
-    <form action="" method="post">
+    <form id="instrokeform" enctype="multipart/form-data" action="" method="post">
     {% csrf_token %}
     <table>
       {{ form.as_table }}
     </table>
-    <input type="submit" value="Submit">
+    <input name='form' class="button" type="submit" value="Submit">
     </form>
   </li>
 </ul>