Discussion :

[denisduval75]

Bonjour,

Je cherche à récupérer dans un tableau JS des valeurs d'une page xhtml.
Mais lors de l'affichage de la 1ère valeur du tableau, celui-ci semble vide ; j'ai le message : 'null'.
Merci pour votre aide.

Mon code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
                <h:outputText id="t1" value="a"/>
                <h:outputText id="t2" value="b"/>
                <h:outputText id="t3" value="c"/>
 
                <script>
                    var t = [document.getElementById("t1"), document.getElementById("t2"), document.getElementById("t3")];
                    alert(t[0]);
                </script>

[danielhagnoul]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<h:outputText id="t1" value="a"/>

C'est une langue étrangère, pas du HTML.

Cela me fait penser à l'élément HTML <output id="t1"></output>.

[bonjourajax]

C'est du jsf t'es pas au bon endroit
https://www.tutorialspoint.com/jsf/j...uttext_tag.htm

[ProgElecT]

Salut

En français sur DVP
Forum Frameworks Web JSF
FAQ JSF

[denisduval75]

Bonjour,
Mon problème ne concerne pas JSF mais bien JS.
Merci

[bonjourajax]

Bonjour,

Tu postes dans la section html , un code mélangeant de tout sauf du html

html
output
js

Quelque soit le projet, l'ensemble du code ne va pas ensemble

[denisduval75]

J'avais posté dans la section JS mais il a été déplacé malgré moi!

[NoSmoking]

Bonjour,
comme il me semble te l'avoir déjà signifier il faut mettre le code HTML généré ^(*)et non le code serveur, javascript travaillant, dans ce cas coté client ,il ne « verra » que du HTML.

Prend l'habitude de regarder le code généré il est souvent révélateur des soucis rencontrés.

En faisant

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var t = [document.getElementById("t1"), document.getElementById("t2"), document.getElementById("t3")];

j'aimerais savoir se que tu comptes obtenir, dans la mesure où le script est au bon endroit ?

^(*) accessoirement tes sujets ne seront plus déplacés

[bonjourajax]

Si il s'agit uniquement de javascript alors tu as tous les liens pour mener à bien ton projet

[denisduval75]

Je souhaite utiliser l'API Google Chart pour réaliser des graphiques.
Pour cela j'ai besoin de récupérer en JS les 18 champs années et 18 champs montants qui se trouvent tous sur une page XHTML.

Je pourrais faire quelque chose comme ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 var data = [document.getElementById('annee01').innerHTML, parseFloat(document.getElementById('valeur01').innerHTML)......................]

Sauf que je préfèrerais une solution du genre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var data = document.getElementById('idDeMaTableHTMLDansLaquelleJaiPlaceMes36Valeurs').innerHTML;

pour enfin pouvoir utiliser son contenu avec (c'est pas moi qui le dit mais les tutos!) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
var annee01 = data[0] ... qui correspond à la 1ère occurence du tableau
 
var montant01 = parseFloat(data[1]) ... pour l'occurence suivante etc ...

[bonjourajax]

Bonjour,
c'est faisable mais quel est le code de ta page xhtml

[danielhagnoul]

On n'avait vraiment aucune chance de comprendre la question posée dans le message n° 1 !

Sans un extrait de 'MaTableHTMLDansLaquelleJaiPlaceMes36Valeurs' (code HTML généré) il faut toujours une boule de cristal !

On ne peut pas deviner la structure de vos TD, ni savoir si votre table est bien formée.

Essayer toujours .textContent au lieu de .innerHTML

[bonjourajax]

C'est déja une belle avancée, on est passé du

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<a:outputText>

au c'est une page xhtml

[denisduval75]

Mon code modifié (mais pas mieux avec textContent) :

JS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var data = [document.getElementById('tbl').textContent]; alert(data[0]);

HTML

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
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<table id="tbl" style="display: none">
                            <td id="annee01">#{contributeurManagerBean.listeColonneAnnee.get(0)}</td>
                            <td id="valeur01">#{contributeurManagerBean.calculerMontantTotalGeneral(contributeurManagerBean.listeColonneAnnee.get(0))}</td>
                            <td id="annee02">#{contributeurManagerBean.listeColonneAnnee.get(1)}</td>
                            <td id="valeur02">#{contributeurManagerBean.calculerMontantTotalGeneral(contributeurManagerBean.listeColonneAnnee.get(1))}</td>
                            <td id="annee03">#{contributeurManagerBean.listeColonneAnnee.get(2)}</td>
                            <td id="valeur03">#{contributeurManagerBean.calculerMontantTotalGeneral(contributeurManagerBean.listeColonneAnnee.get(2))}</td>
                            <td id="annee04">#{contributeurManagerBean.listeColonneAnnee.get(3)}</td>
                            <td id="valeur04">#{contributeurManagerBean.calculerMontantTotalGeneral(contributeurManagerBean.listeColonneAnnee.get(3))}</td>
                            <td id="annee05">#{contributeurManagerBean.listeColonneAnnee.get(4)}</td>
                            <td id="valeur05">#{contributeurManagerBean.calculerMontantTotalGeneral(contributeurManagerBean.listeColonneAnnee.get(4))}</td>
                            <td id="annee06">#{contributeurManagerBean.listeColonneAnnee.get(5)}</td>
                            <td id="valeur06">#{contributeurManagerBean.calculerMontantTotalGeneral(contributeurManagerBean.listeColonneAnnee.get(5))}</td>
                            <td id="annee07">#{contributeurManagerBean.listeColonneAnnee.get(6)}</td>
                            <td id="valeur07">#{contributeurManagerBean.calculerMontantTotalGeneral(contributeurManagerBean.listeColonneAnnee.get(6))}</td>
                            <td id="annee08">#{contributeurManagerBean.listeColonneAnnee.get(7)}</td>
                            <td id="valeur08">#{contributeurManagerBean.calculerMontantTotalGeneral(contributeurManagerBean.listeColonneAnnee.get(7))}</td>
                            <td id="annee09">#{contributeurManagerBean.listeColonneAnnee.get(8)}</td>
                            <td id="valeur09">#{contributeurManagerBean.calculerMontantTotalGeneral(contributeurManagerBean.listeColonneAnnee.get(8))}</td>
                            <td id="annee10">#{contributeurManagerBean.listeColonneAnnee.get(9)}</td>
                            <td id="valeur10">#{contributeurManagerBean.calculerMontantTotalGeneral(contributeurManagerBean.listeColonneAnnee.get(9))}</td>
                            <td id="annee11">#{contributeurManagerBean.listeColonneAnnee.get(10)}</td>
                            <td id="valeur11">#{contributeurManagerBean.calculerMontantTotalGeneral(contributeurManagerBean.listeColonneAnnee.get(10))}</td>
                            <td id="annee12">#{contributeurManagerBean.listeColonneAnnee.get(11)}</td>
                            <td id="valeur12">#{contributeurManagerBean.calculerMontantTotalGeneral(contributeurManagerBean.listeColonneAnnee.get(11))}</td>
                            <td id="annee13">#{contributeurManagerBean.listeColonneAnnee.get(12)}</td>
                            <td id="valeur13">#{contributeurManagerBean.calculerMontantTotalGeneral(contributeurManagerBean.listeColonneAnnee.get(12))}</td>
                            <td id="annee14">#{contributeurManagerBean.listeColonneAnnee.get(13)}</td>
                            <td id="valeur14">#{contributeurManagerBean.calculerMontantTotalGeneral(contributeurManagerBean.listeColonneAnnee.get(13))}</td>
                            <td id="annee15">#{contributeurManagerBean.listeColonneAnnee.get(14)}</td>
                            <td id="valeur15">#{contributeurManagerBean.calculerMontantTotalGeneral(contributeurManagerBean.listeColonneAnnee.get(14))}</td>
                            <td id="annee16">#{contributeurManagerBean.listeColonneAnnee.get(15)}</td>
                            <td id="valeur16">#{contributeurManagerBean.calculerMontantTotalGeneral(contributeurManagerBean.listeColonneAnnee.get(15))}</td>
                            <td id="annee17">#{contributeurManagerBean.listeColonneAnnee.get(16)}</td>
                            <td id="valeur17">#{contributeurManagerBean.calculerMontantTotalGeneral(contributeurManagerBean.listeColonneAnnee.get(16))}</td>
                            <td id="annee18">#{contributeurManagerBean.listeColonneAnnee.get(17)}</td>
                            <td id="valeur18">#{contributeurManagerBean.calculerMontantTotalGeneral(contributeurManagerBean.listeColonneAnnee.get(17))}</td>
                        </table>

[danielhagnoul]

On n'est toujours pas rendu au code HTML généré !

#{contributeurManagerBean.calculerMontantTotalGeneral(contributeurManagerBean.listeColonneAnnee.get(0))} c'est du code serveur !

Ce n'est pourtant pas difficile : vous affichez la page web, un clic droit sur la page et choisir "Afficher le code source de la page. Dans la page qui s'ouvre, copier-coller la partie du code qui représente la table.

[NoSmoking]

On n'est toujours pas rendu au code HTML généré !

certes mais on y est presque

Essayons de faire avancer le Schmilblic.

Tu peux parcourir toutes les cellules de ta <table> pour en récupérer les valeurs, donc pas besoin de mettre une ID à chaque cellules.

Une façon de procéder en utilisant les collection rows et cells

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
// récupération de l'élément
var oTable = document.querySelector("#tbl");
var lig;
var col;
var oRow;
var nbCells;
var nbRows = oTable.rows.length;
// parcours des lignes de la table
for (lig = 0; lig < nbRows; lig += 1) {
  oRow = oTable.rows[lig];
  nbCells = oRow.cells.length;
  // parcours des cellules d'une ligne
  for (col = 0; col < nbCells; col += 1) {
    // récupération des données
    console.log(oRow.cells[col].textContent);
  }
}

il te reste à mettre les données dans tes tableaux pour exploitation.

Nota : il doit bien être possible côté serveur de générer ces tableaux directement dans une balise <script> pour obtenir quelque chose comme

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var dates = ["2018-01-01", "2018-01-02", "2018-01-03", ...];
var valeurs = [151, 147, 25, 45, ...];

il me semble que cela serait quand même le mieux !


PS : ton autre question récente semble concerner en fait le même problème merci de ne pas dupliquer tes questions mais de prendre soins de bien répondre aux questions/remarques qui te sont posées/faites !

var data = [document.getElementById('tbl').textContent]; alert(data[0]);

As tu pris le temps de regarder la réponse faite dans ton autre discussion, j'en doute !