CODEWITHSUNDEEP
javascriptpythonjqueryajaxdjango
M.Mario
M.Mario

Reputation: 103

Uncaught TypeError: $.ajax is not a function | While using most recent complete jQuery version

I am trying to get some AJAX functionality to work on my webpage and I am quite new to javascript. I decided to use jQuery as a framework in combination with Django. But I have encountered an error: $.ajax() is not a function. I tried to fix the bug by downloading and referencing the jQuery code in multiple ways and multiple versions, but I can't seem to fix it, can somebody help me?

My reference to the JQuery script the head section of my HTML file downloaded from https://code.jquery.com/jquery-3.3.1.js

<!-- JQuery -->
    <script type="text/javascript" src="{% static 'home/jquery.js' %}"></script>

The file is in my myapp/static/myapp folder, I checked console and it does find the file.

My ajax call:

{% block javascript %}
<script type="text/javascript">
  function finishedbutton(pk) {
    $.ajax({
        url: 'task/mark/',
        data: {
          'taskid': pk
        },
        dataType: 'json',
        success: function (data) {
          if (data.finished) {
          alert("SET AS FINISHED")
          }
          else {
            alert("SET AS NOT FINISHED")
          }
        }
    });
  };
</script>
{% endblock %}

My button in my html file calling the function:

<button onclick="finishedbutton( '{{task.pk}}' )">
  <div class="taskbutton text-center">
    Fini
  </div>
</button>

Task.pk is the id number of a model that I am using in my HTML file. The idea of the ajax function is that the button will mark the object 'task' as finished. The ajax function should give the task.id to the server that will mark the task as finished without reloading the whole page.

My error message (that is not displayed in my system console but in the console from inspect element):

Uncaught TypeError: $.ajax is not a function
    at finishedbutton ((index):27)
    at HTMLButtonElement.onclick ((index):115)

I don't know if it is necessary, but here are my views.py and urls.py:

views.py:

from django.shortcuts import render, redirect
from django.views.generic import ListView, DetailView, CreateView, UpdateView, DeleteView
from projects.models import Project, Task
from django.http import HttpResponse, JsonResponse

def MarkTask(request):
    pk = request.GET.get('taskid', None)
    print(request.GET)
    task = Task.objects.get(pk=pk)
    if task.finished == True:
        task.finished = False
    else:
        task.finished = True
    task.save()

    data = {'finished': task.finished}
    return JsonResponse(data)

urls.py:

from django.urls import path
from . import views
from django.contrib.auth.decorators import login_required

urlpatterns = [
    path('task/mark/', views.MarkTask, name='projects-marktask'),
]

Upvotes: 1

Views: 9288

Answers (3)

Tharindu Wickramasinghe
Tharindu Wickramasinghe

Reputation: 568

Best practice to solve this issue by using JavaScript IIFE (Immediately Invoked Function Expression)

 (function($) {
    $.ajax({
    //your ajax request
    });
  })(jQuery);

you can write this within document ready

 (function($) {
    $(document).ready(function(){
      $.ajax({
      //your ajax request
      });
    });
 })(jQuery);

Upvotes: 1

M.Mario
M.Mario

Reputation: 103

My $ value was overwritten, and for some reason it also didn't work when I used jQuery.ajax. That was why I thought that the whole jQuery thing wasn't working. I ended up using @Louys Patrice Bessette 's solution, using .noConflict()

This ended up being my solution:

<!-- JQuery -->
<script type="text/javascript" src="{% static 'home/jquery.js' %}"></script>

<script>
var $j = jQuery.noConflict();
</script>

And then referencing ajax by using $j.ajax

Upvotes: 5

Nicholas Mberev
Nicholas Mberev

Reputation: 1851

I am not sure exactly what you are trying to achieve but I think the way you referenced the jquery javascript source may be where your problem started. <script type="text/javascript" src="path/to/your/jquery.js"></script> should be okay for you. Or better still use CDN (Content Delivery Network) if you are developing from an internet enabled computer. With CDN, all you need do is to specify the path thus <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>. As long as jquery is fully loaded and there are no conflict with other scripts, you can use the ajax function at will. Let me know if this helps.

Upvotes: 0

Related Questions