The value I got from the jQuery is NoneType in django-CodePudding

I want to implement a function that updates the graph and displays the number of updates when the button is pressed.

However, when I try to get the parameter in view.py using jQuery, it returns NoneType instead of the intended value. What is the problem?

Also, I don't know if this is related, but when I use console.log() in a jQuery function, there is no output on the console of the browser developer tools. This doesn't seem to have anything to do with the error-only mode or the filter I entered in Console.

The error is
TypeError at /graph/update_graph
int() argument must be a string, a bytes-like object or a number, not 'NoneType'

Thank you.

Here is the code

views.py

from xml.etree.ElementInclude import include
from django.shortcuts import render
from django.http import JsonResponse
from . import graphdata

def index(request):
    fig = graphdata.get_scatter_figure()

    plot_fig = fig.to_html(fig, include_plotlyjs=False)
    return render(request, 'graph/index.html', {'graph':plot_fig})

def update_graph(request):
    graph = graphdata.get_scatter_figure()
    grahp_html = graph.to_html(graph, include_plotlyjs=False)
    cnt = int(request.POST.get('count'))  # <-- This is the error point
    cnt  = 1
    data = {
        "graph": grahp_html,
        "count": cnt,
        }
    return JsonResponse(data)

index.html

<!DOCTYPE html>
<html lang="ja">

<head>
   <meta charset="utf-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
   <!--  plotly JS Files  -->
   <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
   <meta content='width=device-width, initial-scale=1.0, shrink-to-fit=no' name='viewport' />
</head>

<body>
   <div id="update-num">0</div>
   <div id="update-text">update</div>
   <form id="graph-update-form" action="{% url 'graph:update_graph' %}" method="POST">
      {% csrf_token %}
      <button type="submit" id="upadate-bt">update</button>
   </form>
   <div  id="scatter-graph">{{ graph| safe }}</div>
   <!-- jquery script -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <script>
      $("#update-graph-from").on("submit", function(e){
         e.preventDefault();

         // These outputs will not be displayed in the console
         console.log('hello');
         console.log($("#update-num").text());

         $.ajax(
            {
               url: "{% url 'graph:update_graph' %}",
               type: "POST",
               data: {
                  count: $("#update-num").text(),
               },
               dataType: "json",
            }
         )
         .done(function(response){
            $("#update-num").remove();
            $("#update-num").prepend(response.count);
         });
      });
   </script>
</body>

</html>

urls.py

from django.urls import path
from . import views

app_name = "graph"

urlpatterns = [
    path('', views.index, name='index'),
    path('update_graph', views.update_graph, name='update_graph'),
]

CodePudding user response：

You have form with id="graph-update-form" and you are submitting the form with id="update-graph-from". Also since you already set url in your ajax you don't need your action="{% url 'graph:update_graph' %}" and method="POST" in your form. Also you can directly set your ajax response vale you don't need to remove the element so you don't have to prepend. Change your index.html as

<!DOCTYPE html>
<html lang="ja">

<head>
   <meta charset="utf-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
   <!--  plotly JS Files  -->
   <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
   <meta content='width=device-width, initial-scale=1.0, shrink-to-fit=no' name='viewport' />
</head>

<body>
   <div id="update-num">0</div>
   <div id="update-text">update</div>
   <form id="graph-update-form">
       {% csrf_token %}
       <button type="submit" id="upadate-bt">update</button>
   </form>
   <div  id="scatter-graph">{{ graph| safe }}</div>
   <!-- jquery script -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <script>
       $("#graph-update-form").on("submit", function (e) {
        e.preventDefault();

        // These outputs will not be displayed in the console
        console.log('hello');
        console.log($("#update-num").text());

        $.ajax({
            url: "{% url 'update_graph' %}",
            type: "POST",
            'headers': {
                'X-CSRFToken': $('#graph-update-form').find('input[name="csrfmiddlewaretoken"]').val()
            },
            data: {
                count: $("#update-num").text(),
            },
            dataType: "json",
        })
        .done(function (response) {
            $("#update-num").text(response.count);
        });
    });