Fetch callback ?

Bonjour à tous,

Voila, je fais une application maison de trésorerie en python et via le framework Django.
Celle-ci fonctionne bien mais je voudrais aller plus loin dans le dynamisme de mes pages et éviter soit la page de recharger, soit de les multiplier.

En gros, je veux faire une page permettant de rédiger un devis. Et sur cette page, j'aurais 2 boutons: un pour les prestations, un pour le matériel. Et je veux que le montant du devis soit calculé automatiquement. Bref, une vraie page interactive.
Si en mode statique avec différentes pages, c'est jouable, on dynamique, bah la...

J'ai essayé de suivre plusieurs tutos en me basant sur Ajax, et il semblerait que beaucoup parle de fetch. Du coup, j'essaie d'apprendre via cette méthode. J'arrive à afficher le formulaire que je veux sans problème, mais ensuite, je ne peux m'en servir. J'ai fait un simple "alert('toto')" pour tester mais cela ne fonctionne pas. Le code ajouté de manière dynamique. DE mémoire, j'avais rencontré à une époque ou je jouais avec le php et cela provenait d'un callback manquant car ma fonction n'était pas connu au chargement de la page (si je ne dis pas de bêtise)

Voici le code simplifié, j'ai ma page devis.html qui sera la page principale. Je n'ai mis qu'un seul bouton et formulaire pour simplifier (si ça marche avec un, ça marchera avec 10 j'imagine)

devis.html

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

{% load static %} <p><button id="btnForm">Formulaire</button></p> <p><div id="divLigne"> <table> <tr> <th>Désignation</th> <th>Désignation</th> <th>Désignation</th> <th>Désignation</th> </tr> </table> </div></p> <p><div id="divForm"></div></p>   <script src="{% static 'ajax.js' %}"></script>

---

le formulaire que j'intègre avec mon code JS pour pouvoir traiter mon formulaire une fois renseigné ensuite.

Code:

---

1 2 3 4 5 6 7 8 9 10

<label>Désignation</label><input type="text" placeholder="Désignation" name="designation"><br /> <label>Quantité</label><input type="text" placeholder="0.00" name="quantite"><br /> <label>Montant</label><input type="text" placeholder="0.00" name="montant"> <button id="formValid">Valider</button>   <script>     document.querySelector("#formValid").addEventListener("click", event => {         alert('toto');     }) </script>

---

et le script ajax.js ou j'ai intégré un "callback" sur un exemple mais qui ne fonctionne pas

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

function loadForm(url) { const box = document.getElementById("divForm");   fetch(url) .then(response => response.text()) .then(html => { box.innerHTML = html; }) .catch(error => { console.log(error); }); }   document.querySelector("#btnForm").addEventListener("click", event => { event.preventDefault(); loadForm("formulaire"); })

---

Je mets au cas ou l'extrait de mon urls.py

Code:

---

path('formulaire', views.formulaire, name="formulaire")

---

et de mon views.py

Code:

---

1 2	def formulaire(request): return render(request, "formulaire.html")

---

En vous remerciant pour votre aide.

Bonjour,

C'est plus une question javascript si je comprend bien, non ?

si je comprends c'est le javascript de la page formulaire qui ne fonctionne pas ?

Peut-être voir du côté de window.onload ou document.ReadyState (exemple https://stackoverflow.com/questions/...page-is-loaded )

Bonjour Messieurs,

Citation:

---

Envoyé par fred1599

C'est plus une question javascript si je comprend bien, non ?

---

Arf, bah en voyant ta remarque, je me suis trompé de forum... :aie:
Comme ça mélange du JS et du python pour la vue, j'ai posté ici vu que mon projet est en python.. :oops:

Citation:

---

Envoyé par umfred

si je comprends c'est le javascript de la page formulaire qui ne fonctionne pas ?
Peut-être voir du côté de window.onload ou document.ReadyState (exemple https://stackoverflow.com/questions/...page-is-loaded )

---

Alors, il fonctionne mais sur une patte. J'affiche bien le formulaire via mon script JS. Mais la validation de mon formulaire affiché via JS se fait également via un script JS présent uniquement dans le page html que je charge à postériori donc, non existant au chargement initial de la page. J'aime imbriquer les choses.. :mouarf:

Je crois que j'ai trouvé une solution que je veux approfondir jusqu'au bout mais dans un premier temps, je peux exécuter mon code JS dans la portion HTML chargée en JS;
Pour cela, je me suis inspiré de cet échange

du coup, j'ai modifié mon bouton dans mon formulaire.html (celui qui est chargé en JS) pour exécuter la fonction directement dans la balise HTML

Code:

---

1 2	... <button id="formValid" onclick="validForm();">Valider</button>

---

et du coup, dans mon script ajax.js qui lui est chargé au démarrage de la page, j'ai ajouté la fonction qui me permet déjà de mettre à jour mon tableau html

Code:

---

1 2 3 4 5 6 7 8 9 10

function validForm() { const tableau = document.getElementById("table"); const ligne = tableau.insertRow(-1)   const cellule1 = ligne.insertCell(0); cellule1.innerHTML = document.getElementById("designation").value; .... const cellulex = ligne.insertCell(x-1); cellulex.innerHTML = document.getElementById("montant").value * document.getElementById("quantite").value; }

---

Et ça fonctionne. Reste plus qu'à modifier mon script pour récupérer les infos dans le views.py pour enregistrer cela dans ma base.

Citation:

---

Envoyé par keitaro_bzh

Reste plus qu'à modifier mon script pour récupérer les infos dans le views.py pour enregistrer cela dans ma base.

---

Pour compléter la réponse et la clôturer, voici la portion de code pour passer l'info à ma vue si ça peut servir à qqn

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43

function ajax(url) { let formData = new FormData();   // On récupère les données de notre formulaire formData.append('designation', document.getElementById("designation").value); formData.append('montant', document.getElementById("montant").value); formData.append('qte', document.getElementById("qte").value);   // On récupère la valeur du jeton CSRF let csrfTokenValue = document.querySelector('[name=csrfmiddlewaretoken]').value;   const request = new Request('url', { method: 'POST', body: formData, headers: {'X-CSRFToken': csrfTokenValue} });   // On exécute l'appel à notre vue configurée ci-dessus fetch(request) .then(response => response.json()) .then(result => { // L'enregistrement a été effectué, il faut rafraichir l'affichage if (result["operation_result"] == 1) { loadForm("utilisateurs"); } // L'enregistrement a soulevé une erreur que l'on va afficher à l'utilisateur if (result["operation_result"] == 0) { const errors = JSON.parse(result["errors"]) if (errors["designation"] != null) { const resultElement = document.getElementById("designation"); resultElement.innerHTML = errors["designation"][0]["message"]; } if (errors["montant"] != null) { const resultElement = document.getElementById("montant"); resultElement.innerHTML = errors["montant"][0]["message"]; } if (errors["qte"] != null) { const resultElement = document.getElementById("qte"); resultElement.innerHTML = errors["qte"][0]["message"]; } }; }) }

---

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

def LigneDevis_form_ajax(request): try: CONTEXT["donnees"] = LigneDevis.objects.get() except User.DoesNotExist: LigneDevis= None   if request.method == 'POST': form = LigneDevisForm(request.POST) if form.is_valid(): return JsonResponse({"operation_result": '1'}) else: return JsonResponse({"operation_result": '0', 'errors' : form.errors.as_json()}) else: CONTEXT["form"] = LigneDevisForm() return render(request,'MyEntite/partials/LigneDevis.html',CONTEXT)

---