1
votes

Uncaught TypeError: $ .ajax n'est pas une fonction | Lors de l'utilisation de la version complète la plus récente de jQuery

J'essaie de faire fonctionner certaines fonctionnalités AJAX sur ma page Web et je suis assez novice en javascript. J'ai décidé d'utiliser jQuery comme framework en combinaison avec Django. Mais j'ai rencontré une erreur: $ .ajax () n'est pas une fonction. J'ai essayé de corriger le bogue en téléchargeant et en référençant le code jQuery de plusieurs façons et plusieurs versions, mais je n'arrive pas à le résoudre, quelqu'un peut-il m'aider?

Ma référence au script JQuery dans la section head de mon HTML fichier téléchargé depuis https://code.jquery.com/jquery-3.3.1.js

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

Le fichier est dans mon dossier myapp / static / myapp, j'ai vérifié la console et il trouve le fichier.

Mon ajax call:

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)

Mon bouton dans mon fichier html appelant la fonction:

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

Task.pk est le numéro d'identification de un modèle que j'utilise dans mon fichier HTML. L'idée de la fonction ajax est que le bouton marquera l'objet «tâche» comme terminé. La fonction ajax devrait donner le task.id au serveur qui marquera la tâche comme terminée sans recharger la page entière.

Mon message d'erreur (qui n'est pas affiché dans ma console système mais dans la console d'inspect element):

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

Je ne sais pas si c'est nécessaire, mais voici mes vues.py et urls.py:

views.py :

{% 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 %}

urls.py:

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

javascript django python jquery ajax

5 commentaires

Essayez d'utiliser le CDN au lieu d'une version téléchargée auto-hébergée ... Juste comme un test. J'en ai déjà vu un poser une question similaire ... Et l'encodage du fichier était le problème ... Je ne me souviens pas exactement. Testez cela. Si le problème persiste même avec un CDN, au moins votre serveur sera hors de question.

J'ai manqué cela au départ: J'ai vérifié la console et il trouve le fichier. , mais réalisant maintenant que jQuery est là, ouvrez la console dans l'application en cours d'exécution et tapez $ et retournez . Je soupçonne que $ a été écrasé.

Oui comme @randy Cashburn l'a mentionné, ensuite vous devrez vérifier si $ n'est pas déjà utilisé ... Dans ce cas, vous chercherez .noConflict () .

Pouvez-vous accéder à jQuery en utilisant la variable jQuery ?

@LouysPatriceBessette et RandyCasburn avaient raison, pour une raison quelconque, mon $ a été écrasé, même lorsque j'ai utilisé jQuery.ajax à la place. Je l'ai corrigé en utilisant .noConflict ()

3 Réponses :

0
votes

Je ne sais pas exactement ce que vous essayez d'accomplir, mais je pense que la façon dont vous avez référencé la source javascript jquery peut être à l'origine de votre problème. devrait vous convenir. Ou mieux encore, utilisez CDN (Content Delivery Network) si vous développez à partir d'un ordinateur connecté à Internet. Avec CDN, il vous suffit de spécifier le chemin ainsi . Tant que jquery est complètement chargé et qu'il n'y a pas de conflit avec d'autres scripts, vous pouvez utiliser la fonction ajax à volonté. Faites-moi savoir si cela vous aide.

0 commentaires

2
votes

Ma valeur $ a été écrasée et, pour une raison quelconque, elle ne fonctionnait pas non plus lorsque j'utilisais jQuery.ajax. C'est pourquoi je pensais que tout le truc jQuery ne fonctionnait pas. J'ai fini par utiliser la solution de @Louys Patrice Bessette, en utilisant .noConflict ()

Cela a fini par être ma solution:

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

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

Et puis en référençant ajax en utilisant $ j .ajax

0 commentaires

0
votes

Meilleures pratiques pour résoudre ce problème à l'aide de JavaScript IIFE ( Expression de fonction immédiatement appelée)

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

vous pouvez l'écrire dans le document prêt

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

0 commentaires