How to set up properly AJAX in Django

Question

I am newbie in using AJAX within a Django project. There is something wrong in my code. I have tried to follow these posts: Returning Rendered Html via Ajax

Django render template in template using AJAX

Django render template on AJAX success

But there is a concept that I don't understand.

I created an asynchronous task and I would like to follow the process by updating a template:

I created two urls:

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

and two views:

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})

The purpose of checkThreadTask is to update my template and endThreadTask to send a boolean value when the process is finished in order to stop the ajax request:

In my template:

<!-- 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>

UPDATED: Following the dirkgroten' suggestion, I had an error. Because I don't catch any error in the console, I conclude that no event is triggered. I added the navbar part that include the dropdown:

<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>