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>

rowers/views/workoutviews.py

@@ -2916,7 +2916,10 @@ def instroke_chart(request, id=0, metric=''):  # pragma: no cover
     return HttpResponseRedirect(url)
 
 @permission_required('workout.change_workout', fn=get_workout_by_opaqueid, raise_exception=True)
-def instroke_chart_interactive(request, id=0):  # pragma: no cover
+def instroke_chart_interactive(request, id=0):
+
+    is_ajax = request_is_ajax(request)
+
     w = get_workoutuser(id, request)
 
     rowdata = rrdata(csvfile=w.csvfilename)
@@ -2925,7 +2928,11 @@ def instroke_chart_interactive(request, id=0):  # pragma: no cover
     form = InstrokeForm(choices=instrokemetrics)
 
     script = ''
-    div = ''
+    div = get_call()
+
+    metric = instrokemetrics[0]
+    spm_min = 15
+    spm_max = 45
 
     if request.method == 'POST':
         form = InstrokeForm(request.POST,choices=instrokemetrics)
@@ -2933,13 +2940,17 @@ def instroke_chart_interactive(request, id=0):  # pragma: no cover
             metric = form.cleaned_data['metric']
             spm_min = form.cleaned_data['spm_min']
             spm_max = form.cleaned_data['spm_max']
+
+
     data = rowdata.get_instroke_data(metric,
                                      spm_min=spm_min,
                                      spm_max=spm_max)
+
     script, div = instroke_interactive_chart(data, metric, w,
                                              spm_min,
                                              spm_max)
 
+
     breadcrumbs = [
         {
             'url': '/rowers/list-workouts/',
@@ -2956,6 +2967,14 @@ def instroke_chart_interactive(request, id=0):  # pragma: no cover
 
     ]
 
+    if is_ajax:
+        response = json.dumps({
+            'script': script,
+            'div': div,
+        })
+
+        return HttpResponse(response, content_type='application/json')
+
     return render(request,
                   'instroke_interactive.html',
                   {
@@ -2970,6 +2989,7 @@ def instroke_chart_interactive(request, id=0):  # pragma: no cover
                       'the_div': div,
                   })
 
+
 # erase column
 @permission_required('workout.change_workout', fn=get_workout_by_opaqueid, raise_exception=True)
 def workout_erase_column_view(request, id=0, column=''):