Transformer les boutons - fonctionne en développement, pas en déploiement

Question

J'ai un formulaire de déconnexion. Les utilisateurs cliquent sur un bouton pour sécuriser une réservation. Ce bouton passe de "libre" à "réservé", le bouton réservé inclut le nom de l'utilisateur. J'utilise Django, mais j'ajoute JS pour que le bouton change sans rafraîchissement.

Cela fonctionne très bien sur mon serveur local, mais pas quand je le déploie sur PythonAnywhere. Au lieu de cela, le bouton se transforme, mais affiche "none" et ma vérification de la console est "indéfini".

Une idée de ce qui a mal tourné?

Code Abridged ci-dessous:

Main.JS 
$('button').click(function() { 
     console.log('we clicked!'); // Sanity Check II 
     var pk = this.id 
     var button = $(this) 
     var user = $('button').attr("user") 
     console.log(pk, user) // Sanity Check III 
$.ajax({ 
      url: "/reserve/", 
      type: "POST",  //Send the info to reserve view 
      data: { pk : pk}, 
      success: function(data) { 
       var number = JSON.parse(data); 
       console.log(number, number.result) 
       if (number.result == 1) { 
         if (number.result == 2) { 
      console.log(user) 
      $(button).toggleClass("free reserved") 
      $(button).children("div.tchr").html(user); //Send user info to button, reverts on refresh 
       $.toast({ 
        heading: "Reservation Complete!", 
        icon: 'success', 
        stack: 4, 
        hideAfter: 2000 
       }); 
      } 

Et un bouton

home.html 

{% for p in periods %} 
      <td class="slots"> 
       Period {{p}} <br>{% for x in this_week %} {% with d=x.day|date:"w" %} {% if d == '1' and x.period == p %} {% if x.is_reserved == True %} # this_week is the queryset of reservations, day is the day converted into a weekday 
       <button id="{{x.pk}}" type="submit" class="reserved btn"> 
           <span class="cart">{{x.cart}}</span> 
           <div class="tchr" style="text-align:left">{{x.teacher}}</div></button> {% else %} 
       <button id="{{x.pk}}" type="submit" user="{{request.user }}" class="free btn">{% csrf_token %} 
           <span class="cart">{{x.cart}}</span> 
           <div class="tchr">{{x.teacher}}</div></button> {% endif %} {% endif %} {% endwith %} {% endfor %} 
      </td> 
      {% endfor %} 

Il y a quelques options supplémentaires (Effacé, réservé, bloqué)

Encore une fois, cela fonctionne très bien dans le développement! Qu'est-ce que je rate?

Answer 1

Vous devez traiter vos fichiers statiques.

Les fichiers Javascript comptent comme des fichiers statiques. Dans l'environnement de développement, lorsque DEBUG est défini sur true dans vos fichiers settings.py, Django prend en charge la collecte de vos fichiers statiques et leur traitement, mais lorsque vous placez DEBUG sur false dans votre serveur de déploiement, il s'arrête.

Jetez un oeil à la documentation staticfiles app sur le projet Django pour savoir comment l'utiliser. C'est un serveur de fichiers statiques simple que vous pouvez utiliser. Pour vous assurer que c'est votre problème, accédez à votre fichier settings.py et définissez DEBUG sur true, puis redémarrez votre serveur. Si tout fonctionne comme prévu, suivez les instructions sur le lien ci-dessus.

Assurez-vous de ne pas compter sur le mode debug, car cela pourrait entraîner une dégradation des performances et des fuites de mémoire massives