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.