the ajax is working

rowers/templates/stepeditor.html

@@ -18,7 +18,7 @@
 </p>
 <div class="stepcontainer" id="list">
 <section class="drop-zone">
-<h2>Training</h2>
+<h2>Training Steps for {{ ps.name }}</h2>
 </section>
 <section class="library">
   <h2>Library</h2>
@@ -48,6 +48,23 @@
         src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'>
 </script>
 <script>
+  let csrftoken;
+  $(document).ready(function() {
+    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);
+      }
+    }
+  });
+
     let dragged;
     let origcolor;
 
@@ -56,12 +73,30 @@
       steps = document.querySelector('.drop-zone');
       steps.childNodes.forEach(function(item) {
         if (item.className && item.className.includes("trainingstep")) {
-          console.log(item);
+          item.childNodes.forEach(function(child) {
+            console.log(child.id);
+            if (child.id) {
+              list.push(child.id);
+            }
+          })
         }
       });
       console.log(list);
-    }
-
+      $.ajax({
+        data: JSON.stringify(list),
+        type: 'POST',
+        url: '/rowers/plans/stepadder/{{ ps.id }}/',
+        error: function(result) {
+          $("#id_waiting").replaceWith(
+          '<div id="id_failed" class="grid_12 alpha message">Your upload failed</div>'
+          );
+        },
+        success: function(result) {
+          console.log('got something back');
+          console.log(result);
+        }
+    })
+  };
 
     function handleDragStart(event) {
       let target = event.target;