Use JSON responses with active elements

Also fixes an issue where the submission isn't visible if messages
are present (e.g. "Staff can submit assignments without enrolling.")

Author: lainets

exercise/static/exercise/chapter.js

@@ -453,14 +453,16 @@
     },
 
     // Submit the formData to given url and then execute the callback.
-    submitAjax: function(url, formData, callback) {
+    submitAjax: function(url, formData, ajaxParams, callback) {
+      ajaxParams = ajaxParams ?? {};
+      ajaxParams.dataType = ajaxParams.dataType ?? "html";
       var exercise = this;
       $.ajax(url, {
         type: "POST",
         data: formData,
         contentType: false,
         processData: false,
-        dataType: "html"
+        ...ajaxParams,
       }).fail(function(xhr, textStatus, errorThrown) {
         //$(form_element).find(":input").prop("disabled", false);
         //exercise.showLoader("error");
@@ -596,24 +598,24 @@
           out_content.html("<p>Evaluating</p>");
 
           var url = exercise.url;
-          exercise.submitAjax(url, formData, function(data) {
-            const content = $(data);
-            // Look for error alerts in the feedback, but skip the hidden element
-            // that is always included: <div class="quiz-submit-error alert alert-danger hide">
+          exercise.submitAjax(url, formData, {dataType: "json"}, function(data) {
+            output.find(data.messages.selector).replaceWith(data.messages.html);
+
+            // Look for error alerts in the feedback
+            const content = $(data.page.content);
             const alerts = content.find('.alert-danger:not(.hide)');
-            if (!alerts.length) {
-              var poll_url = content.find(".exercise-wait").attr("data-poll-url");
-              output.attr('data-poll-url', poll_url);
-
-              exercise.updateSubmission(content);
-            } else if (alerts.contents().text()
-            .indexOf("The grading queue is not configured.") >= 0) {
-              output.find(exercise.settings.ae_result_selector)
-              .html(content.find(".alert:not(.hide)").text());
-              output.find(exercise.settings.ae_result_selector).append(content.find(".grading-task").text());
+            output.find(data.messages.selector).append(alerts);
+
+            if (data.submission) {
+              output.attr('data-poll-url', data.submission.poll_url);
+              output.attr('data-ready-url', data.submission.ready_url);
+
+              exercise.updateSubmission();
             } else {
-              output.find(exercise.settings.ae_result_selector)
-              .html(alerts.contents());
+              out_content.html("<p>Failed to submit:</p>")
+              for(const err of data.errors) {
+                out_content.append("<p>" + err + "</p>")
+              }
             }
           });
         });
@@ -636,7 +638,7 @@
           } else {
             formData.set('__aplus__', JSON.stringify({hash: hash}));
           }
-          exercise.submitAjax(url, formData, function(data) {
+          exercise.submitAjax(url, formData, {}, function(data) {
             //$(form_element).find(":input").prop("disabled", false);
             //exercise.hideLoader();
             var input = $(data);

exercise/views.py

@@ -16,6 +16,8 @@
 from course.models import CourseModule
 from course.viewbase import CourseInstanceBaseView, EnrollableViewMixin
 from lib.helpers import query_dict_to_list_of_tuples, safe_file_name
+from lib.json import json_response_with_messages
+from lib.mime_request import accepts_mimes, MIMERequest
 from lib.remote_page import RemotePageNotFound, request_for_response
 from lib.viewbase import BaseRedirectMixin, BaseView
 from userprofile.models import UserProfile
@@ -141,15 +143,16 @@ def get(self, request: HttpRequest, *args: Any, **kwargs: Any) -> HttpResponse:
                            latest_enrollment_submission_data=all_enroll_data,
                            **kwargs)
 
-    def post(self, request: HttpRequest, *args: Any, **kwargs: Any) -> HttpResponse:
+    @accepts_mimes(["text/html", "application/json"])
+    def post(self, request: MIMERequest, *args: Any, **kwargs: Any) -> HttpResponse:
         # Stop submit trials for e.g. chapters.
         # However, allow posts from exercises switched to maintenance status.
         if not self.exercise.is_submittable:
             return self.http_method_not_allowed(request, *args, **kwargs)
 
         new_submission = None
         page = ExercisePage(self.exercise)
-        _submission_status, submission_allowed, _issues, students = (
+        _submission_status, submission_allowed, issues, students = (
             self.submission_check(True, request)
         )
         if submission_allowed:
@@ -212,7 +215,17 @@ def post(self, request: HttpRequest, *args: Any, **kwargs: Any) -> HttpResponse:
 
             # Redirect non AJAX content page request back.
             if not request.is_ajax() and "__r" in request.GET:
-                return self.redirect(request.GET["__r"], backup=self.exercise);
+                return self.redirect(request.GET["__r"], backup=self.exercise)
+
+        if request.expected_mime == "application/json":
+            return json_response_with_messages(
+                request,
+                {
+                    "page": page,
+                    "submission": new_submission,
+                    "errors": issues,
+                }
+            )
 
         self.get_summary_submissions()
         return self.render_to_response(self.get_context_data(

lib/json.py

@@ -16,7 +16,19 @@ class AJAXJSONEncoder(DjangoJSONEncoder):
     javascript, instead of just serializing the object.
     """
     def default(self, obj: Any) -> Any:
-        # Any custom types come here `if isinstance(obj, ...):`
+        if isinstance(obj, Submission):
+            return {
+                "id": obj.id,
+                "poll_url": obj.get_url("submission-poll"),
+                "ready_url": obj.get_url(
+                    getattr(self, "submission_poll_ready_url_name", "submission")
+                ),
+            }
+        elif isinstance(obj, ExercisePage):
+            return {
+                "content": obj.content,
+                "errors": obj.errors,
+            }
 
         return super().default(obj)