Declencher le remplissage d'un tableau dans du HTML avec Bootstrap V4 par JavaScript

Version imprimable

Bonjour,
Je souhaite intégrer un tableau HTML via du JavaScript qui lit un fichier, csv mais je suis en environnemnt Boostrap V4 et ca pose probleme : le code de lecture du fichier csv refuse de se lancer.

J'ai mis un point d'arrêt dans le JavaScript avec Chrome sur

Citation:

fileInput.addEventListener('submit', readFile);

j'arrive bien au code mais le readFile ne se lance pas.

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
<div class="container">
      <form class="needs-validation" novalidate>
      <h4>Vous allez pouvoir intégrer ci-dessous, via un fichier texte, les nouveaux clients de votre entreprise... </h4>
      <center><h5>Voici la liste des champs que votre fichier doit contenir</h5></center>
      <div class="form-row">
        <div class="col-xs-8">
          <table id="tableau" class="table table-striped table-hover">
            <tbody>
              <thead>
                  <tr>
                    <th>Nom</th>
                    <th>Prénom</th>
                    <th>Code Postal</th>
                    <th>Mail</th>
                    <th>Téléphone</th>
                    <th>Sexe</th>
                  </tr>
              </thead>
              <div id='Chargement_Fichier_Visible'>
              </div>
            </tbody>
        </table>
          <div class="w-40">
 
          <!-- Recuparation du fichier -->
          <div class="col-xs-8">
            <label for="NomClient"></label>
            <input type="file" style="width:80%" name="FileToUpload" class="form-control" id="FileToUpload" required>
          </div>
 
          <label for="nom">Spécifiez le séparateur</label>
          <input type="text" style="width:30%"; class="form-control" id="separator" name="separator" required>
          <div class="valid-feedback">Ok !</div>
          <div class="invalid-feedback">Valeur incorrecte</div>
 
 
          </div>
          <div class="form-row">
            <div class="col-xs-8">
            <br/>
              <button id="IntegrationFichier" type="submit" class="btn btn-success pull-right"> Valider </button>
          </div>
        </div>
        </div>
        </div>
    </form>
</div>

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
<script type="text/javascript">
 
         var fileInput = document.getElementById("IntegrationFichier"),
 
         readFile = function () {
             var reader = new FileReader();
             reader.onload = function () {
                 const ListeDonnees =reader.result;
                 var monTab = ListeDonnees.split('\n');
                 console.log(monTab[1]);
                 var tableau = document.getElementById("tableau");
                 for (var i=0;i<monTab.length;i++)
                 {
                     var ligne = tableau.insertRow(-1)
                     var UneLigneTab=monTab[i].split(',');
                     //
                     var colonne1 = ligne.insertCell(0);
                     colonne1.innerHTML += UneLigneTab[0];
                     //
                     var colonne2 = ligne.insertCell(1);
                     colonne2.innerHTML += UneLigneTab[1];
                     //
                     var colonne3 = ligne.insertCell(1);
                     colonne3.innerHTML += UneLigneTab[2];
                     //
                     var colonne4 = ligne.insertCell(1);
                     colonne4.innerHTML += UneLigneTab[3];
                     //
                     var colonne5 = ligne.insertCell(1);
                     colonne5.innerHTML += UneLigneTab[4];
 
                 }
             };
 
             reader.readAsBinaryString(fileInput.files[0]);
         };
 
         fileInput.addEventListener('submit', readFile);
 
 </script>

J'ajoute que ca marche très bien si je n'utilise pas Bootstap, quel type d'erreur ai je bien pu commettre ?

03/06/2021, 16h11
NoSmoking

Bonjour,

Citation:

J'ajoute que ca marche très bien si je n'utilise pas Bootstap, quel type d'erreur ai je bien pu commettre ?

:koi: j'ai du mal à voir ce qui marche, tu ne lis pas les données de ton fichier, il faut gérer cela avec l'ajout d'un écouteur change sur ton <input type="file" ...>.

Pourquoi vouloir faire un envoi vers le serveur ?

Bonjour, en fait j'ai un écouteur sur le bouton de validation,

Code:

1
2
3
<br/>
              <button id="IntegrationFichier" type="submit" class="btn btn-success pull-right"> Valider </button>
  </div>

Mais je voulais utiliser Bootstrap pour gérer aussi la nécessité d'intégrer le séparateur et les messages d'erreur automatiques qui sont générés si il manque une information (ainsi que le changement de support, tablette, ordi, smartphone.)
Au départ j'avais intégré un formulaire mais là effectivement ce n'est plus la peine de transmettre sur la page php.

Voici la version correcte simplifiée mais qui n'apporte pas le formatage de Boostrap.

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
<html>
 
<p>Select local CSV File:</p>
<input id="csv" type="file">
 
<output id="out">
    <table id="tableau">
        <tbody>
 
        </tbody>
    </table>
</output>
<script>
var fileInput = document.getElementById("csv"),
 
    readFile = function () {
        var reader = new FileReader();
        reader.onload = function () {
            //document.getElementById('out').innerHTML = reader.result;
            const ListeDonnees =reader.result;
            var monTab = ListeDonnees.split('\n');
            console.log(monTab[1]);
            var tableau = document.getElementById("tableau");
            for (var i=0;i<monTab.length;i++)
            {
                var ligne = tableau.insertRow(-1)
                var UneLigneTab=monTab[i].split(',');
                //
                var colonne1 = ligne.insertCell(0);
                colonne1.innerHTML += UneLigneTab[0];
                //
                var colonne2 = ligne.insertCell(1);
                colonne2.innerHTML += UneLigneTab[1];
                //
                var colonne3 = ligne.insertCell(1);
                colonne3.innerHTML += UneLigneTab[2];
                //
                var colonne4 = ligne.insertCell(1);
                colonne4.innerHTML += UneLigneTab[3];
                //
                var colonne5 = ligne.insertCell(1);
                colonne5.innerHTML += UneLigneTab[4];
 
            }
        };
        //start reading the file. When it is done, calls the onload event defined above.
        reader.readAsBinaryString(fileInput.files[0]);
    };
 
fileInput.addEventListener('change', readFile);
 
</script>
</html>

Je vais essayer de revoir peut être une version plus minimaliste de mon code Boostrap (mais que je ne maitrise pas encore bien)

03/06/2021, 16h53
NoSmoking

Citation:

Je vais essayer de revoir peut être une version plus minimaliste de mon code Boostrap (mais que je ne maitrise pas encore bien)

tel-quel ton code devrait fonctionner même avec BootStrap même si dans ton cas le CSS devrait être simple à mettre en place.
03/06/2021, 18h47
comme de bien entendu

Du coup, comment faire pour déclencher un évenement sur un bouton pour qu'il me permette de récupérer le nom du fichier et le séparateur en une seule fois.
(De manière à présenter le contenu du fichier)
Est ce que je peux procéder via un groupe formulaire et comment ?
Merci d'avance

C'est une question d'organisation de ton code.

Quelque chose comme:
Code:

1 2 3 4 5 6 7 <button id="btn-load">Charger</button> <input id="file-name"> <select id="sel-separateur"> <option value="," selected>Virgule</option> <option value=";">Point virgule</option> <option value="\t">Tabulation</option> </select>
Tu peux simuler le clic sur l'appui du bouton
Code:

1 2 3 4 5 const btnLoad = document.getElementById("btn-load"); const fileName = document.getElementById("file-name"); btnLoad.addEventListener("click", () => { fileName.click(); // déclenche le clic sur l'input file });
avec, comme tu l'as fait :

Code:

fileName.addEventListener("change", readFile);

Les fonctions s'enchaineront et il te suffit de récupérer le type de séparateur dans ta fonction de récupération.

04/06/2021, 15h50
comme de bien entendu

Merci bien, pour cette réponse bien documenté.
Bonne journée.