Discussion :

[keitaro_bzh]

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

et de mon views.py

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

En vous remerciant pour votre aide.

[fred1599]

Bonjour,

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

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

[keitaro_bzh]

Bonjour Messieurs,

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

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

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..

[keitaro_bzh]

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[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 javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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 python :

Sélectionner tout - Visualiser dans une fenêtre à part

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)