Как правильно настроить AJAX в Django

Question

Я новичок ie в использовании AJAX в проекте Django. В моем коде что-то не так. Я пытался следить за этими сообщениями: Возвращение обработано Html через Ajax

Django сделать шаблон в шаблоне, используя AJAX

Django рендеринг шаблона на AJAX успех

Но есть концепция, которую я не понимаю.

Я создал асинхронную задачу и хотел бы Мне нравится следить за процессом, обновляя шаблон:

Я создал два URL:

 path('checkTread/<int:id>/', views.checkThreadTask, name='checkThreadTask'),
 path('endTread/<int:id>/', views.endThreadTask, name='endThreadTask'),

и два представления:

def checkThreadTask(request, id):
    task = ThreadTask.objects.get(pk=id)
    if request.is_ajax():
        html = render_to_string('fund/task/processing_task.html', {'text': task.text})
        return HttpResponse(html)


def endThreadTask(request, id):
    task = ThreadTask.objects.get(pk=id)
    return JsonResponse({'is_done': task.is_done})

Цель checkThreadTask - обновить мой шаблон и endThreadTask для отправки логического значения по окончании процесса, чтобы остановить запрос ajax:

В моем шаблоне:

<!-- Asynchronous tasks -->
<script type='text/javascript'>
    $(document).ready(function(){
        $('#fd_dropdown').on('change',function(){
            console.log( $(this).val() );
                    var i = 0;
                    console.log(i)
                    var threadInterval = setInterval(function(){
                        checkTask("/checkThread/" + data.id)
                        endTask("/endThread/" + data.id, function(check){
                            if(check.is_done){
                                window.clearInterval(threadInterval)
                            }
                            if(++i === 1200){
                                window.clearInterval(threadInterval)
                            }
                        })
                    },1000)
            })
        })

        function checkTask(url){
            $.ajax({
                type: "POST",
                url: url,
                data: {'csrfmiddlewaretoken': '{{csrf_token}}'},
                success: function(data) {
                    console.log("check!")
                    $('#task_text').html(data);
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    alert(xhr.status);
                    alert(thrownError);
                    }
            })
        }

        function endTask(url, cb){
           $.ajax({
                type: "GET",
                cache: false,
                url: url,
                dataType: "json",
                success: function(data) {
                    console.log("Done")
                    cb(data)
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    alert(xhr.status);
                    alert(thrownError);
                    }
            })

        }
</script>

ОБНОВЛЕНО: После предложения dirkgroten ' У меня была ошибка. Поскольку я не улавливаю никаких ошибок в консоли, я делаю вывод, что ни одно событие не инициируется. Я добавил часть панели навигации, в которой есть выпадающий список:

<nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
  <div class="container">
    <a class="navbar-brand js-scroll-trigger" href="#page-top">FundBook</a>
    <button class="navbar-toggler navbar-toggler-right" type="button" data 
toggle="collapse"
            data-target="#navbarResponsive" aria-controls="navbarResponsive" 
aria-expanded="false"
            aria-label="Toggle navigation">
      Menu
      <i class="fas fa-bars"></i>
    </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul id="navbar-subjects" class="navbar-nav text-uppercase mx-auto"><!- 
-navbar-center-->
           <li class="nav-item dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#" 
aria-haspopup="true" aria-expanded="false">
                    Peer Group
                </a>
                <div class="dropdown-menu text-capitalize" aria- 
labelledby="peergroup_dropdown">
                     {%nav_bar_list_peer_groups user.username%}
                </div>
           </li>
           <li class="nav-item dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#" 
aria-haspopup="true" aria-expanded="false" id="fd_dropdown">
                    Fund
                </a>
                <div class="dropdown-menu text-capitalize" aria- 
labelledby="fund_dropdown">
                    {%nav_bar_list_funds user.username%}
                </div>
           </li>
           <li class="nav-item dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#" 
aria-haspopup="true" aria-expanded="false">
                    Portfolio
                </a>
                <div class="dropdown-menu text-capitalize" aria- 
labelledby="portfolio_dropdown">
                    {%nav_bar_list_portfolios user.username%}
                </div>
           </li>

       </ul>
       <ul id="navbar-templates" class="navbar-nav lx-auto">
           <li class="nav-item dropleft">
            <a class="dropdown-toggle" data-toggle="dropdown" 
 id="template_dropdown" aria-haspopup="true" aria-expanded="false">
                Templates
            </a>
               <div class="dropdown-menu text-left" aria-labelledby="template_dropdown">
                   <a class="dropdown-item" href="{% url "fund:fund_template" %}">Fund</a>
                   <a class="dropdown-item" href="{% url "peergroup:peer_group_template" %}">Peer Group</a>
                   <a class="dropdown-item" href="{% url "portfolio:portfolio_template" %}">Portfolio</a>
               </div>
           </li>
           <li>
            <a id="upload" href="{% url "FundBook_Core:form_upload" %}" ><i class="fa fa-upload separate" ></i>  Upload</a>
           </li>
       </ul>
       <ul  id="navbar-login"  class="nav navbar-nav navbar-right ml-auto">
          {% if request.user.is_authenticated %}
                    <a href="{% url "logout" %}" class="separate"><i class="fa fa-sign-out"></i> Logout </a>
                    <a class="separate"> Hello {{ request.user.username }}  </a>
          {% endif %}
          <a href="{% url "dashboard" %}" class="separate"><!--i class="fa fa-user"></i-->My dashboard</a>
       </ul>
    </div>
  </div>
</nav>