JavaScript & checkbox qui ne veut pas se cocher

Version imprimable

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:

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="">&lt;Selectionner&gt;</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 :

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
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();
	  }

Coté console JavaScript, voici ce que j'ai :

Citation:

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

Et la ligne 54 correspond à document.getElementById(valeur).checked = true;.

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

27/08/2019, 15h17
Invité
Bonjour,
- serveur001
- serveur003
- serveur004
- serveur103 ?
Est-ce que l'id "serveur103" existe ?

Citation:

TypeError: document.getElementById(...) is null

Apparemment, non.
27/08/2019, 16h49
azimut2000

:D Effectivement cela pourrait être ça, mais non (je n'ai pas tout mis dans l'exemple) : l'index existe bien et quelque soit les serveurs cochés, seul le dernier refuse de se recocher lors de l'exécution du JS.
Vraiment étrange... C'est pourtant simple, mais il y a un truc que je ne comprend pas :(
27/08/2019, 17h05
SpaceFrog

https://jsfiddle.net/9uykwogs/

ils sont bien tous remis à false ...

Résolu : Vive la fonction trim()

Citation:

Envoyé par SpaceFrog

https://jsfiddle.net/9uykwogs/

ils sont bien tous remis à false ...

Ce n'est pas sur la remise à zéro des checkbox que ça cafouillait, mais sur le rechargement...

Mais je viens de trouver : il doit y avoir un caractère bizarre qui se met dans la chaîne de réception en Ajax et ça perturbe la commande "document.getElementById(valeur).checked = true;"
Ce qui est d'autant plus bizarre que lorsque je loggais dans la console, je voyais bien mes valeurs reçues, y compris serveur[3] qui refusait de se cocher :
Code:

1 2 3 4 5 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]);
En fait, j'ai simplement rajouté un "trim()" :
Code:

1 2 reponse = xmlhttp.responseText.trim();
et maintenant, tout passe sans problème...

Pour être totalement complet, voici le script getAssFerme.php qui renvoie les cases à cocher; on voit bien que la chaîne générée est des plus basique et sans caractère particulier hormis une virgule pour séparer les champs. :
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 <?php // On supprime tout cache dans le navigateur header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1 header("Pragma: No-cache"); header("Cache-Control: max-age=0"); header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); // Date dans le passé require_once("../CnxBase.php"); require_once("../variables.inc.php"); $Retour = ""; // Variable pour construire la chaine de retour if(isset($_GET['ferme'])){ // On test que l'on a bien reçu quelque chose ! $ferme = $_GET['ferme']; // Nom de la ferme concernée $SQLSearchFermeCheck = "SELECT \"Nom\" FROM general.\"ListeMachine\" WHERE \"ListeMachine\".\"NomFerme\"='$ferme';"; $QuerySearchFermeCheck = pg_query($CnxStats, $SQLSearchFermeCheck); $NbrSearchFermeCheck = pg_num_rows($QuerySearchFermeCheck); // Le nombre de serveur coché trouvé en base sur ce choix de ferme for ($i = 1; $i <= $NbrSearchFermeCheck; $i++) { $ResultSearchFermeCheck = pg_fetch_row($QuerySearchFermeCheck); $Retour = $Retour . $ResultSearchFermeCheck[0]; if ($i < $NbrSearchFermeCheck) { // On rajoute une virgule à la suite de la chaîne si nous ne sommes pas sur la dernière donnée $Retour = $Retour . ","; } } echo $Retour; } ?>
Affaire donc résolu... Merci pour votre soutient :lol:

28/08/2019, 11h32
SpaceFrog

vérifie que le fichier de traitement est bien en uft8 sans BOM et que tu n'insères pas d'espaces ou de retours lignes ...
29/08/2019, 09h51
azimut2000

Je génère une chaîne ASCII de base sans caractère en dehors de l'alphabet... C'est curieux, peut être que la méthode Ajax rajoute un caractère CR ou LF ???

Citation:

Envoyé par SpaceFrog

vérifie que le fichier de traitement est bien en uft8 sans BOM et que tu n'insères pas d'espaces ou de retours lignes ...

Tu as une méthode pour vérifier cela ? Y'a yb truc en JS pour connaitre le numéro du caractère traité (Ex: 32 pour un espace) ???

Salut

Code:

1
2
var str = "Salut toi";
console.log("code du 1er caractère = " + str.charCodeAt(0));

30/08/2019, 13h46
azimut2000

:ptdr: Ba vi !
Merci à tous pour votre aide,

Thierry