.

longs/templates/longs/ciduseranswer_detail.html

@@ -2,7 +2,7 @@
 {% extends 'rapids/base.html' %}
 
 {% block content %}
-User answer: {{ciduseranswer.cid}}
+CID: {{ciduseranswer.cid}}
 
 <h3>Question</h3>
 {{ciduseranswer.question}}

longs/templates/longs/question_view.html

@@ -13,6 +13,44 @@
     <input class="btn btn-primary btn-sm mt-1 mb-1" type="submit" />
 </form>
 </div>
+<button id="delete-all-button">Delete all</button>
 {% render_table table %}
 
+{% endblock %}
+
+{% block js %}
+<script>
+    $(document).ready(function () {
+        //$("thead input:checked").each((n, el) => {
+
+        answer_ids = [];
+        $("tbody input:checked").each((n, el) => {
+            answer_ids.push(el.value);
+        })
+        $("#delete-all-button").on("click", function () {
+            $.ajax({
+                    url: "{% url 'longs:user_answer_delete_multiple' %}",
+                    data: {
+                        csrfmiddlewaretoken: "{{ csrf_token }}",
+                        answer_ids: this.checked // true if checked else false
+                    },
+                    type: "POST",
+                    dataType: "json",
+                })
+                // $.ajax().done(), $.ajax().fail(), $ajax().always() are upto you. Add/change accordingly
+                .done(function (data) {
+                    console.log(data);
+
+                    if (data.status == "success") {
+                        toastr.info('Deleted.')
+                    }
+                    // show some message according to the response. 
+                    // For eg. A message box showing that the status has been changed
+                })
+                .always(function () {
+                    console.log('[Done]');
+                })
+        })
+    });
+</script>
 {% endblock %}