J'aimerais enregistrer automatiquement la saisie de l'utilisateur dans une zone de texte sans aucun bouton de soumission. L'interface utilisateur que je recherche est une sorte de google docs. Idéalement, il devrait y avoir un intervalle de temps de 2 à 3 secondes après l'entrée pour éviter de soumettre des demandes à chaque fois que quelque chose est tapé.

Voici mon implémentation actuelle.

Modèle:

class ActionField(models.Model):
content = models.TextField()

def __str__(self):
    return self.content

Vue:

def action_view(request):
all_todo_items = ActionField.objects.all()
return render(request, 'action.html',
              {'all_items': all_todo_items})

Et html affichant le formulaire et le bouton d'envoi que je voudrais supprimer :

<form action="/add/" method='post'>{% csrf_token %}
    <textarea name="content" rows="30" cols="100"></textarea>
    <br><br>
 <input type="submit" value="enter">
</form>

Après quelques recherches rapides, il semble que cela se fasse normalement avec AJAX ou Jquery, mais existe-t-il une approche simple utilisant uniquement Django? Je suis nouveau sur le framework ainsi que sur html/FE.

1
inferense 15 oct. 2020 à 01:26

1 réponse

Meilleure réponse

Je n'ai jamais entendu parler de cette possibilité. Django (comme tout autre framework backend) ne peut envoyer ou recevoir des données que vers ou depuis votre navigateur. Il ne peut en quelque sorte pas faire en sorte que votre navigateur envoie quelque chose sans aucun script du côté du navigateur. Cependant, il existe un script que vous pouvez utiliser :

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
  <form action="/add/" method='post'>{% csrf_token %}
    <textarea name="content" rows="30" cols="100"></textarea>
    <br><br>
     <input type="submit" value="enter">
  </form>
    
  <script>
    $("textarea[name='content']").on("change", function() {
      $.ajax({
        url: '/add/', // or better {% url 'view-name-in-urls.py' %}
        method: 'POST',
        data: {
          content: $(this).val(),
          csrfmiddlewaretoken: '{{ csrf_token }}'
        }
      }).done(function(msg) {
        alert("Data saved");
      })
    });
  </script>
</body>

Je sais que la possibilité de tout faire côté serveur est très pratique et a l'air bien, mais c'est tout simplement impossible. Vous devez également apprendre à gérer le serveur côté client.

Vous pouvez en savoir plus sur les formulaires ici https://docs.djangoproject.com/en/ 3.1/sujets/formulaires/

Et ajax https://api.jquery.com/jquery.ajax/

1
szjakub 15 oct. 2020 à 00:32