Refresh formulaire et map

30 mars 2021 à 18:12:44

Bonjour

Je bloque sur un problème depuis un petit moment sur un refresh d'un formulaire avec une map en plus.

A chaque fois pour faire mes tests je suis obligé de "Hard refresh" (ctrl+F5) pour pouvoir faire mon test car sinon ca m'affiche pas ce que je veux...

Sur mon formulaire je demande d'insérer 14 chiffres, si l’utilisateur insère correctement ces chiffres et qu'ils aboutissent à un résultat via requête API, ça m'affiche bien ce que je veux avec une map Leaflet et des coordonnées. Par contre si l'utilisateur rentre de nouveau 14 chiffres, ca me renvois le messages d'erreur comme quoi la saisi n'est pas valable alors qu'elle devrait l'être.

Voici le code

index.php

<?php 
include 'vendor/autoload.php';
?>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <link rel="stylesheet" href="style.css"/>
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
   integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
   crossorigin=""/>
   <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
   integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
   crossorigin=""></script>
        <title>Entreprise</title>
    </head>
    <body>
        <form id="form">
            <label for="sic" class="sic"> Numéro de SIRET : </label>
            <input type="text" id="sic" name="texte"/>
            <input type="submit" value="envoyer" id="valider" class="send"/>
        </form>
        <p id="result"></p>
        <div id="mapid"></div>
        <script src="script.js"></script>
     </body>
</html>

script.js

const form = document.getElementById('form');
form.addEventListener('submit',(ev) => {
    ev.preventDefault();
    let saisi = document.getElementById('sic').value;
    // console.log(saisi);
    if(isNaN(saisi) || saisi.length != 14){
        document.getElementById('result').textContent = "Veuillez rentrer un numéro SIRET valable (14 chiffres)";
        document.getElementById('sic').value = ' ';
    }else{
        fonctionTest(saisi);
        document.getElementById('sic').value = ' ';
    }
    
})

function fonctionTest(siret){
    let request = new XMLHttpRequest();
    request.open("GET", 'apireq.php?texte='+siret, true);
    request.addEventListener("readystatechange",  () => {
        if (request.readyState === XMLHttpRequest.DONE && request.status === 200) {
            const reponse = JSON.parse(request.responseText);
            // window.location.href = 'apireq.php?texte='+siret;
            addResult(reponse.etablissement.unite_legale.denomination, reponse.etablissement.unite_legale.nom, reponse.etablissement.geo_adresse, reponse.etablissement.unite_legale.etablissement_siege.date_dernier_traitement, reponse.etablissement.etat_administratif);
            console.log(reponse);
            addCoor(reponse.etablissement.unite_legale.etablissement_siege.longitude, reponse.etablissement.unite_legale.etablissement_siege.latitude, reponse.etablissement.etat_administratif)
        }              
    });
    request.send();
}

function addResult(deno, nom, add, date){
    console.log(deno);
    if(deno == null){
        document.getElementById('result').textContent = nom+' '+add+' '+date;
    }else{
        document.getElementById('result').textContent = deno+' '+add+' '+date;
    }
}

function addCoor(long, lat, etat){
    const map = L.map('mapid').setView([lat, long], 13);

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

    const redIcon = L.icon({
        iconUrl:'red.png',
        iconSize:     [20, 30], 
    });
    const blueIcon = L.icon({
        iconUrl:'blue.png',
        iconSize:     [20, 30], 
    });
    if(etat == "F"){
        L.marker([lat, long], {icon: redIcon}).addTo(map)
    }else{
        L.marker([lat, long], {icon: blueIcon}).addTo(map)
    }
}

J'ai bien tenté de mettre

document.getElementById('sic').value = ' ';

Au tout début du script mais ca ne marche pas, ca ne rafraichi pas totalement apparement et ca me lance mon message d'erreur d'insertion

J'ai évidement essayé autrement en commentantla 2eme ligne du else :

}else{
        fonctionTest(saisi);
        //document.getElementById('sic').value = ' ';
    }

Du coup l'utilisateur doit lui même effacer sa précédente saisi pour mettre une nouvelle... La j'ai plus de message d'erreur de saisi, le résultat se met à jour mais pas la map (j'ai une erreur dans la console : Uncaught Error: Map container is already initialized.)

Finalement une chose qui me paraissait simple a faire devient vite compliqué :/
Merci d'avance

SamuelGaborieau3

12 avril 2021 à 12:08:39

Bonjour, l'erreur qui indique Uncaught Error: Map container is already intialized

et indiqué sur quelle ligne ?

Si ces la ligne 41:

const map = L.map('mapid').setView([lat, long], 13);

Peut-être que:

L.map('mapid')

devrait être appelé qu'une seule fois pour initialisé la map et pas à chaque fois que tu fait un changement dessus,

tu pourrais peut être mettre le L.map en dehors des fonction (dans l'espace global) et utilisait la constante map pour la modifié du genre:

// initialize la map
const map = L.map('mapid');

function addCoor(long, lat, etat){
	// met à jour la map
    map.setView([lat, long], 13);
 
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
 
    const redIcon = L.icon({
        iconUrl:'red.png',
        iconSize:     [20, 30],
    });
    const blueIcon = L.icon({
        iconUrl:'blue.png',
        iconSize:     [20, 30],
    });
    if(etat == "F"){
        L.marker([lat, long], {icon: redIcon}).addTo(map)
    }else{
        L.marker([lat, long], {icon: blueIcon}).addTo(map)
    }
}

Pour séparé l'initialisation et la mise à jour de la map,

après je suis pas sur que c'est vraiment cette ligne qui initialise la map je connais pas trop cette API.

Pour vérifié d'où vient le problème dans la deuxième saisie lorsque elle et refusé par javascript (alors quelle devrait être validé)

tu peut loggé les 2 contraintes de la saisie pour voir la quelle et fausse:

form.addEventListener('submit',(ev) => {
    ev.preventDefault();
    let saisi = document.getElementById('sic').value;
    // console.log(saisi);
    
    // devrait être faux quand la saisie et valide
    console.log(isNaN(saisi));
    
    // devrait être faux quand la saisie et valide
    console.log(saisi.length != 14);
    
    if(isNaN(saisi) || saisi.length != 14){
        document.getElementById('result').textContent = "Veuillez rentrer un numéro SIRET valable (14 chiffres)";
        document.getElementById('sic').value = ' ';
    }else{
        fonctionTest(saisi);
        document.getElementById('sic').value = ' ';
    }
     
})

Et éventuellement remplacé les:

document.getElementById('sic').value = ' ';

par:

document.getElementById('sic').value = '';

pour ré initialisé la saisie par ce que la première version laisse un espace blanc dans la zone de saisie et si l'utilisateur le supprime pas et ajoute 14 chiffres cela fait une saisie de taille 15 pas de taille 14 du genre:

' XXXXXXXXXXXXXX'

lors de la 2iem saisie, ce qui rend vraie la deuxième partie de la condition:

saisi.length != 14

éventuellement ajouté un filtre trim sur la saisie pour supprimé les caractères inutiles au extrémité de la saisie (comme les espaces blanc):

let saisi = document.getElementById('sic').value.trim();

-
Edité par SamuelGaborieau3 12 avril 2021 à 12:09:34

suggestion de présentation.