Bonjour à tous,
J'ai un projet à sortir pour la rentré dans lequel je dois présenter une liste de serveur sur une page; celle-ci est dynamique avec enregistrement automatique en base dès lors ou l'on clique sur une checkbox (appel Ajax via l'objet XMLHttpRequest qui réalise l'enregistrement en base si un bouton est cliqué). Cette page contient également un formulaire (menu sous forme de liste) qui propose une liste de nom de "ferme" qui affiche les serveurs rattachés à la ferme d'après des données issue de la bdD (à nouveau via un appel Ajax).
Mon souci, c'est que mon code fonctionne pas mal dans l'ensemble, sauf pour ce dernier point : lorsque je choisi une ferme, tous les serveurs qui correspondent en base voient bien leur checkbox cochée, sauf le dernier serveur. Coté debug JS, dans la console, j'ai un beau "TypeError: document.getElementById(...) is null".
Voici une partie du code HTML & JS :
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
16
17
18
19
20
21 <form name="creer" action="addAssFerme.php" method="post" autocomplete="off"> <u>Nom de la ferme</u> (requis) : <select name="ferme" id="ferme" required="required" onchange="valideFerme(value)"> <!-- JS a implémenter pour bon affichage lors du chargement de la page --> <option value=""><Selectionner></option> <option value="MaFerme1">MaFerme1</option> <option value="MaFerme2">MaFerme2</option> </select> <br> <i>Sélectionner les serveurs qui doivent appartenir à la ferme sélectionnée ci-dessus :</i><br> <br> <table style="width:100%" name="tableau" id="tableau"> <tr> <td>serveur001<input type="checkbox" name="serveurs" id="serveur001" onchange="check(name,checked)"></td> <td>serveur002<input type="checkbox" name="serveurs" id="serveur002" onchange="check(name,checked)"></td> <td>serveur003<input type="checkbox" name="serveurs" id="serveur003" onchange="check(name,checked)"></td> <td>serveur004<input type="checkbox" name="serveurs" id="serveur004" onchange="check(name,checked)"></td> <td>serveur005<input type="checkbox" name="serveurs" id="serveur005" onchange="check(name,checked)"></td> <td>serveur006<input type="checkbox" name="serveurs" id="serveur006" onchange="check(name,checked)"></td> <td>serveur101<input type="checkbox" name="serveurs" id="serveur101" onchange="check(name,checked)"></td> </tr>...
Et coté JS :
Coté console JavaScript, voici ce que j'ai :
Code : 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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60 function valideFerme(nomFerme) { // On va tester dans un 1er temps ce que sait faire le navigateur WEB: test de l'évènement Ajax possible ??? if (window.XMLHttpRequest) { // code pour IE7 et suppérieur, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else if (window.ActiveXObject) // Internet Explorer { // code pour IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } else // XMLHttpRequest non supporté par le navigateur { alert("Votre navigateur ne supporte pas les fonctionnalités AJAX (=objets XMLHTTPRequest)..."); return; } xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { // Etat de la requete : // 0: request not initialized // 1: server connection established // 2: request received // 3: processing request // 4: request finished and response is ready // Et les codes retour de status : // 200: "OK" // 403: "Forbidden" // 404: "Not Found" // On attend une réponse sous forme de string au format : <nomServeur>,<nomServeur>,<nomServeur>... reponse = xmlhttp.responseText; document.getElementById("Debug").innerHTML = reponse; // On décoche toutes les cases de type "checkbox" et ayant le nom "serveurs" avant de faire quoi que se soit... var x = document.getElementsByName("serveurs"); var i; for (i = 0; i < x.length; i++) { if (x[i].type == "checkbox") { x[i].checked = false; } } // Maintenant que l'on connait les serveurs à cocher (dans la variable "serveur" et que toutes les cases sont décochées, on va parser les données retournées pour cocher les cases des serveurs retournés serveur = reponse.split(','); NbrServeur = serveur.length; console.log("Serveur N°0 : " + serveur[0]); console.log("Serveur N°1 : " + serveur[1]); console.log("Serveur N°2 : " + serveur[2]); console.log("Serveur N°3 : " + serveur[3]); for (let valeur of serveur) { console.log(valeur); document.getElementById(valeur).checked = true; } } } // On envoie les données à la page de traitement (ici: getStatutActivite.php) xmlhttp.open("GET", "getAssFerme.php?ferme="+nomFerme, true); xmlhttp.send(); }
Et la ligne 54 correspond à document.getElementById(valeur).checked = true;.Serveur N°0 : serveur001
Serveur N°1 : serveur003
Serveur N°2 : serveur004
Serveur N°3 : serveur103
serveur001
serveur003
serveur004
serveur103
TypeError: document.getElementById(...) is null
onreadystatechange https://xxx.xxx.xxx.xxx/addAssFerme.php:54
L'erreur en question fait en sorte que le dernier serveur récupéré ne se trouve pas "coché"....
Quelqu'un aurait il une idée sur l'erreur ou les erreurs que j'ai fait dans ce code qui me parait pourtant très basique... et qui pourtant ne fonctionne pas
Merci à tous pour vos réponses et suggestions,
Thierry
Partager