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

admin管理员组

文章数量:1395408

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 bination 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 .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'),
]

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 bination 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./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'),
]

• javascript
• python
• jquery
• ajax
• django

Share Improve this question Follow edited Mar 10, 2019 at 12:47 Dheeraj Kumar 40877 silver badges1717 bronze badges asked Mar 10, 2019 at 0:35 M.MarioM.Mario 10322 silver badges1010 bronze badges 5

• Try using the CDN instead of a self-hosted downloaded version... Just as a test. I already seen one asking a similar question... And the file encoding was the issue... Can't remember exactly. Just test that. If the issue remains even with a CDN, at least your server will be out of the question. – Louys Patrice Bessette Commented Mar 10, 2019 at 1:00
• I missed this initially: I checked console and it does find the file., but now realizing the jQuery is there, open the console in the running app and type $ and return. I suspect $ has been overwritten. – Randy Casburn Commented Mar 10, 2019 at 1:01
• Yes as @randy Cashburn mentionned, next you will have to check if $ is not already in use... In that case, you would look for .noConflict(). – Louys Patrice Bessette Commented Mar 10, 2019 at 1:08
• Can you access jQuery using the jQuery variable? – farooq Commented Mar 10, 2019 at 1:56
• 1 @LouysPatriceBessette and RandyCasburn were right, for some reason my $ has been overwritten, even when I used jQuery.ajax instead. I fixed it by using .noConflict() – M.Mario Commented Mar 10, 2019 at 11:42

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

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

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

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 puter. With CDN, all you need do is to specify the path thus <script type="text/javascript" src="https://cdnjs.cloudflare./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.

本文标签：