#StackBounty: #python #django #ajax AJAX call with Django is printing the response to a blank page

Bounty: 50

What’s happening now is when I click submit ("Go!"), Django clears the entire page and then prints the correct JSON response results_matrix on a blank page. alert("success") does not appear or alert("error").
I don’t know why the post function is doing this since I’m not returning a render of anything.

Before clicking "Go!":

enter image description here

After clicking "Go!" in Chrome:

enter image description here

After clicking "Go!" in Internet Explorer:
enter image description here

The ajax call is returning a raw json file to download (which Chrome displays automatically in the browser) instead of going into the ajax success function.

Expected Behavior: Page remains the same while a pop-up appears saying, "success".

In index.js:

$(document).ready(function() {
  ......
  
  var csrftoken = Cookies.get("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);
          }
      }
  });  

  $(document).on("submit","#weather_form",function(event){
    // //Prevent default django post behaviour for a form submission.
    event.preventDefault();

    $.ajax({
      url: "/weather/",
      type: "POST",
      data: {type_of_person: $("#id_type_of_person").val(),
        exercise: $("#id_exercise").val(),
        unit: $("#id_unit").val(),
        zip_postal: $("#id_zip_postal").val()},
      dataType: "json",
      contentType: "application/json",
      success: function (data){
        alert("success");
      },
      error: function(xhr,errmsg,err) {
        alert("error");
        console.log(errmsg + "n" + xhr.status + ": " + xhr.responseText)
      }
    });

    return false;
  });
});

In index.html:

           <form action="/weather/" method="post" autocomplete="off" id="weather_form">
                {% csrf_token %}
                {{ form.non_field_errors }}
                {{ error }}
                <ul>
                    <li class="center_text">
                        <h3>Best Time to Go Out</h3>
                    </li>
                    <li>
                        <label>{{ form.type_of_person.label }}: </label>
                        {{ form.type_of_person }}
                        {{ form.type_of_person.errors }}
                    </li>
                    <li>
                        <label>{{ form.exercise.label }}: </label>
                        {{ form.exercise }}
                        {{ form.exercise.errors }}
                    </li>
                    <li>
                        <label>{{ form.unit.label }}: </label>
                        {{ form.unit }}
                        {{ form.unit.errors }}
                    </li>
                    <li>
                        <label>{{ form.zip_postal.label }}: </label>
                        {{ form.zip_postal }}
                        {{ form.zip_postal.errors }}
                    </li>
                    <li>
                        <input id="go" type="submit" value="Go!">
                    </li>
                </ul>
            </form>

In views.py:

class weather(base.TemplateView):
    ...

    @staticmethod
    def post(request, *args, **kwargs):
        ...
        if request.method == "POST":
            ...
            if form.is_valid():
                ...
                return http.JsonResponse({"results_matrix": results_matrix.tolist()}, status=200)
            else:
                return http.JsonResponse({"error": form.errors}, status=400)

Edit #1:

The request made after clicking "Go!":
enter image description here

Details:
enter image description here

enter image description here

Edit #2:

Other things I tried, but to no avail:

  • Adding async: false to the ajax call.
  • Directing the ajax call to be handled by another view rather than the current view.

Edit #3:

Dependencies for this web app:

  • jquery-ui-1.12.1/jquery-ui.min.css
  • jquery-ui-1.12.1/jquery-ui.structure.min.css
  • jquery-ui-1.12.1/jquery-ui.theme.min.css
  • jquery-3.5.1.min.js
  • jquery-ui-1.12.1/jquery-ui.min.js
  • index.js
  • index.css
  • Django 3.1


Get this bounty!!!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.