Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss

cacher des infos

0 views
Skip to first unread message

Une Bévue

unread,
Aug 23, 2011, 2:37:58 PM8/23/11
to
j'ai une div qui va contenir la liste des catégories; issues d'une
requête sql.
dans le html j'affiche le nom, mais j'aimerais pouvoir lire (par DOM par
ex) l'index associé à ce nom sans le montrer.
Donc comment associer l'index à cette <li /> sans qu'il soit visible sur
le butineur ???

--
« La bouse de la vache est plus utile que les dogmes :
on peut en faire de l'engrais. »
(Mao Tsé-Toung / 1896-1976)

Pascal Poncet

unread,
Aug 23, 2011, 4:20:14 PM8/23/11
to
Le 23/08/2011 20:37, Une Bévue a écrit :
> j'ai une div qui va contenir la liste des catégories; issues d'une
> requête sql.
> dans le html j'affiche le nom, mais j'aimerais pouvoir lire (par DOM par
> ex) l'index associé à ce nom sans le montrer.
> Donc comment associer l'index à cette<li /> sans qu'il soit visible sur
> le butineur ???
>

Quand tu dis "visible", tu veux dire "affiché", je suppose.
Donc peu importe ce qui est visible dans le code source.
L'attribut "id", ça n'irait pas ?

--
Cordialement,
Pascal

Message has been deleted

Une Bévue

unread,
Aug 23, 2011, 4:52:03 PM8/23/11
to
Pascal Poncet <poncet.pas...@gmail.com.invalid> wrote:

> Quand tu dis "visible", tu veux dire "affiché", je suppose.

ouais.


> Donc peu importe ce qui est visible dans le code source.
> L'attribut "id", ça n'irait pas ?

peut-être, à condition de ruser afin d'éviter des doublons.
ou une classe bidon, plus élégant sans doute :
<li id="categories_1">...
...
<li id="categories_1">

ou la même chose avec des classes :
<li class="categories_1">...
...
<li class="categories_1">


--
« A quoi bon soulever des montagnes quand il est
si simple de passer par-dessus ? »
(Boris Vian)

Une Bévue

unread,
Aug 23, 2011, 4:52:03 PM8/23/11
to
yamo' <ya...@beurdin.invalid> wrote:

> Je ne vois pas le pourquoi et le comment faire ça ; tout ce que tu
> envoies au navigateur, le navigateur le voie par définition après on
> n'est pas obligé de rendre tout visible par un humain non informaticien
> donc l'idée de l'id du li de Pascal est tout à fait appropriée...

oui e, fait c'est pour que le contenu affiché soit plus lisible sans
infos inutiles, ce n'est pas pour le cacher en soi, dans le code je veux
dire, ca je m'en fiche.

l'idée de Pascal est pas mal en effet; mais je cherche un truc comme les
champs hidden dans une forme.
amha ca doit pouvoir se faire en css; avec un bloc; une div, n'importe
quoi en hidden.

SAM

unread,
Aug 23, 2011, 6:00:54 PM8/23/11
to
Le 23/08/11 22:52, Une Bévue a écrit :

> Pascal Poncet<poncet.pas...@gmail.com.invalid> wrote:
>
>> Quand tu dis "visible", tu veux dire "affiché", je suppose.
> ouais.
>> Donc peu importe ce qui est visible dans le code source.
>> L'attribut "id", ça n'irait pas ?
> peut-être, à condition de ruser afin d'éviter des doublons.
> ou une classe bidon, plus élégant sans doute :
> <li id="categories_1">...
> ...
> <li id="categories_1">

c'est t'absolument t'interdit !

pas d'ids de mêmes noms !


> ou la même chose avec des classes :
> <li class="categories_1">...
> ...
> <li class="categories_1">


<li>je suis normal</li>
<li><span>index 1</span>je suis spécial</li>
<li><span>index 2</span>moi z'ossi</li>


li span { display: none }

--
Stéphane Moriaux avec/with iMac-intel

Une Bévue

unread,
Aug 24, 2011, 2:21:06 AM8/24/11
to
SAM <stephanemor...@wanadoo.fr.invalid> wrote:

> c'est t'absolument t'interdit !
>

> pas d'ids de m�mes noms !


oui; je sais, mon exemple est foireux !!!

>
> > ou la m�me chose avec des classes :


> > <li class="categories_1">...
> > ...
> > <li class="categories_1">
>
>
> <li>je suis normal</li>

> <li><span>index 1</span>je suis sp�cial</li>


> <li><span>index 2</span>moi z'ossi</li>
>
>
> li span { display: none }

Ah ben voila, c'est tout simple; je ,me disait auissi pourquoi ducros y
se d�carcasse...
--
� Les seuls probl�mes que l'argent peut r�soudre sont
des probl�mes d'argent. �
(Kin Hubbard)

Pascal Poncet

unread,
Aug 24, 2011, 5:26:33 AM8/24/11
to
Le 24/08/2011 08:21, Une Bévue a écrit :

> SAM<stephanemor...@wanadoo.fr.invalid> wrote:
>> <li>je suis normal</li>
>> <li><span>index 1</span>je suis spécial</li>

>> <li><span>index 2</span>moi z'ossi</li>
>>
>> li span { display: none }
>
> Ah ben voila, c'est tout simple; je ,me disait auissi pourquoi ducros y
> se décarcasse...

Je te conseille quand même de coller une classe spécifique à ton "span"
invisible (ou plus précisément, non affiché), si tu retiens cette
solution, car cette balise pourrait te servir dans d'autres contextes.

Maintenant, on a peut-être pas assez d'éléments pour comprendre
exactement ton besoin et le recours à cette "astuce".

Par exemple, avec un contenu très hiérarchisé, voici ce qu'il m'est
arrivé de pondre, tout simplement :

<div id="cat_1">
<p id="subcat_1>...</p>
<p id="subcat_2>...</p>
...
</div>
<div id= cat_2>... etc.

ou encore :

<ul id="cat_1">
<li id="subcat_1>...</li>
<li id="subcat_2>...</li>
</ul>
<ul id="cat_2">... etc.

Par contre, dans une suite de résultats présentés en ligne (en
l'occurrence des petites annonces pro), si chaque résultat est affecté à
une catégorie et que plusieurs résultats peuvent faire partie de la même
catégorie (en l'occurrence la rubrique de l'annonce), on ne peut plus
utiliser les schémas précédents.

Ce que j'ai fait alors, c'est identifier chaque résultat par une
concaténation de son identifiant propre avec celui de sa catégorie.
Cela permet ensuite toute manipulation, côté client ou serveur, comme du
tri, masquage, etc.

Exemple, avec le schéma id="annonce_idRubrique_idAnnonce" :

<div id="listeAnnonces">
<p id="annonce_1_123>...</p>
<p id="annonce_3_789>...</p>
<p id="annonce_1_456>...</p>
... etc.
</div>

Très facile, ensuite de masquer, par javascript, les annonces de la
rubrique "1", par exemple.
Et aucune chance que deux identifiants soient identiques !


--
Cordialement,
Pascal

Une Bévue

unread,
Aug 24, 2011, 6:10:21 AM8/24/11
to
Pascal Poncet <poncet.pas...@gmail.com.invalid> wrote:

> Le 24/08/2011 08:21, Une Bévue a écrit :
> > SAM<stephanemor...@wanadoo.fr.invalid> wrote:
> >> <li>je suis normal</li>
> >> <li><span>index 1</span>je suis spécial</li>
> >> <li><span>index 2</span>moi z'ossi</li>
> >>
> >> li span { display: none }
> >
> > Ah ben voila, c'est tout simple; je ,me disait auissi pourquoi ducros y
> > se décarcasse...
>
> Je te conseille quand même de coller une classe spécifique à ton "span"
> invisible (ou plus précisément, non affiché), si tu retiens cette
> solution, car cette balise pourrait te servir dans d'autres contextes.
>
> Maintenant, on a peut-être pas assez d'éléments pour comprendre
> exactement ton besoin et le recours à cette "astuce".

c'est très simple, dans une bd j'ai une table 'categories' avec deux
champs :
idx INTEGER NOT NULL
name TEXT NOT NULL

ce que je présente c'est "name" mais je souhaite avoir aussi "idx"
(l'index) de manière à pouvoir présenter une autre table "items" dont
chaque item appartient à une catégorie et dans cette dernière table,
c'est le champs "cat" qui donne l'index de la catégorie.

ainsi dans la seconde colonne (visuellement, en partant de la gauche) je
peux préenter tous les items qui appartient à cette catégorie en faisant
une requête sql du genre :

'SELECT * FROM items WHERE cat=idx;"
l'idx étant fourni par le li où on a cliqué moyennant petite manip dom.

> Par exemple, avec un contenu très hiérarchisé, voici ce qu'il m'est
> arrivé de pondre, tout simplement :
>
> <div id="cat_1">
> <p id="subcat_1>...</p>
> <p id="subcat_2>...</p>
> ...
> </div>
> <div id= cat_2>... etc.
>
> ou encore :
>
> <ul id="cat_1">
> <li id="subcat_1>...</li>
> <li id="subcat_2>...</li>
> </ul>
> <ul id="cat_2">... etc.
>
> Par contre, dans une suite de résultats présentés en ligne (en
> l'occurrence des petites annonces pro), si chaque résultat est affecté à
> une catégorie et que plusieurs résultats peuvent faire partie de la même
> catégorie (en l'occurrence la rubrique de l'annonce), on ne peut plus
> utiliser les schémas précédents.

je n'ai pas ce problème car je répète le même principe au niveau des
items où j'aurai "une variable cachée" qui me donnera son index.

> Ce que j'ai fait alors, c'est identifier chaque résultat par une
> concaténation de son identifiant propre avec celui de sa catégorie.
> Cela permet ensuite toute manipulation, côté client ou serveur, comme du
> tri, masquage, etc.
>
> Exemple, avec le schéma id="annonce_idRubrique_idAnnonce" :
>
> <div id="listeAnnonces">
> <p id="annonce_1_123>...</p>
> <p id="annonce_3_789>...</p>
> <p id="annonce_1_456>...</p>
> ... etc.
> </div>
>
> Très facile, ensuite de masquer, par javascript, les annonces de la
> rubrique "1", par exemple.
> Et aucune chance que deux identifiants soient identiques !

je n'ai pas besoin de cela car ma recherche se fait par sql via php et
xhr.
la solution :
<li class="categorie">Formulaires<span class="cache">1</span></li>

avec
span.cache { hidden };

me va très bien.

vu qu"autour de "Formulaires<span class="cache">1</span>" je vais mettre
un a href, ou onclick sur le li qui va m'envoyer this dans lequel je
pourrai trouver le contenu du span cache et donc l'index.

--
« C'est aujourd'hui que commence le reste de ta vie. »
(Dale Carnegie)

Une Bévue

unread,
Aug 24, 2011, 6:42:45 AM8/24/11
to
Une Bévue <unbewus...@fai.invalid> wrote:

> je n'ai pas besoin de cela car ma recherche se fait par sql via php et
> xhr.
> la solution :
> <li class="categorie">Formulaires<span class="cache">1</span></li>

ce que j'ai mis dans le code php :
echo ' <li class="categorie" onlick="selectCat(this);return
false">'.$row['name'].'<span
class="cache">'.$row['idx'].'</span></li>'.$lf;

ce qui donne en html :
<li class="categorie" onlick="selectCat(this);return
false">Formulaires<span class="cache">0</span></li>

la function selectCat( n'est pas appellée :

function selectCat(o) {alert("toto")
alert(o.getElementsByTagName('span')[0].text);

Pascal Poncet

unread,
Aug 24, 2011, 6:51:02 AM8/24/11
to
Le 24/08/2011 12:10, Une Bévue a écrit :
> la solution :
> <li class="categorie">Formulaires<span class="cache">1</span></li>
>
> avec
> span.cache { hidden };

Tu veux peut-être dire :
span.cache { visibility: hidden; }

Mais dans ce cas, le contenu du <span> prendra sa place dans le flux !
Si tu veux qu'il ne soit pas affiché (différent de "invisible"), il faut
écrire :
span.cache { display: none; }

>
> me va très bien.
>
> vu qu"autour de "Formulaires<span class="cache">1</span>" je vais mettre
> un a href, ou onclick sur le li qui va m'envoyer this dans lequel je
> pourrai trouver le contenu du span cache et donc l'index.

Je crois avoir compris, mais alors il me semble plus simple de faire :

<ul class="categories">
<li id="cat_1">Formulaires</li>
...
</ul>

Au niveau CSS, déjà, tu remonte la classe au conteneur, ça évite les
répétitions inutiles, avec :
ul.categories li {...ton style d'item de liste...}

Ensuite, au niveau HTML et JS, tu ne devrais pas avoir de risque de
doublons sur les attributs "id", non ?

Enfin, avec JS, tu auras beaucoup plus de facilité (et de rapidité) à
récupérer l'id du <li> que le contenu du <span>, pour le balancer à XHR
ou autres.

Je pars du principe que tu auras géré un "onclick" sur chaque <li>.
Si tu préfère ajouter un lien explicite, alors il vaut mieux mettre l'id
sur le lien <a>, plutôt que sur le <li>.


--
Cordialement,
Pascal

SAM

unread,
Aug 24, 2011, 6:58:14 AM8/24/11
to
Le 24/08/11 12:10, Une Bévue a écrit :

>
> vu qu"autour de "Formulaires<span class="cache">1</span>" je vais mettre
> un a href, ou onclick sur le li qui va m'envoyer this dans lequel je
> pourrai trouver le contenu du span cache et donc l'index.

function affiche(BdD) {
var n = BdD.length,
c,
z = 0,
cible = document.getElementById('categories');
cible.innerHTML = '';
while(z<n) {
c = document.createElement('LI');
c.idx = BdD[z].idx;
c.innerHTML = BdD[z].texte;
c.onclick = recup;
cible.appendChild(c);
z++
}
}
function recup() {
alert('index = '+ this.idx +
'\ncontenu = '+this.innerHTML);
}


<ul id="categories">
<li onclick="affiche(
[{idx:1,texte:'salut'},{idx:2,texte:'Yvon'}]
)">cliquez-moi</li>
</ul>


et, au clic, ça donne :

<ul id="categories">
<li>salut</li>
<li>Yvon</li>
</ul>

dont auquel le JS connaitra les index idx

Une Bévue

unread,
Aug 24, 2011, 7:08:16 AM8/24/11
to
Pascal Poncet <poncet.pas...@gmail.com.invalid> wrote:

> > avec
> > span.cache { hidden };
>
> Tu veux peut-être dire :
> span.cache { visibility: hidden; }


oui, oui, c'était du "symbolique", j'ai mis :
li.categorie span.cache { display: none }

> Mais dans ce cas, le contenu du <span> prendra sa place dans le flux !
> Si tu veux qu'il ne soit pas affiché (différent de "invisible"), il faut
> écrire :
> span.cache { display: none; }
>
> >
> > me va très bien.
> >
> > vu qu"autour de "Formulaires<span class="cache">1</span>" je vais mettre
> > un a href, ou onclick sur le li qui va m'envoyer this dans lequel je
> > pourrai trouver le contenu du span cache et donc l'index.
>
> Je crois avoir compris, mais alors il me semble plus simple de faire :
>
> <ul class="categories">
> <li id="cat_1">Formulaires</li>
> ...
> </ul>
>

oui, mais il y a encore plus simple, comme le code html est généré par
xhr/php/sql, j'ai mis ca :


<li class="categorie" onlick="selectCat(this);return
false">Formulaires<span class="cache">0</span></li>

qui peut se simplifier en :
<li class="categorie" onlick="selectCat(-1);return
false">Formulaires</li>

mais bon, pour l'instant, mon onclick n'active pas le selectCat...


> Au niveau CSS, déjà, tu remonte la classe au conteneur, ça évite les
> répétitions inutiles, avec :
> ul.categories li {...ton style d'item de liste...}
>
> Ensuite, au niveau HTML et JS, tu ne devrais pas avoir de risque de
> doublons sur les attributs "id", non ?

non les indexes sont uniques, SQL request...

> Enfin, avec JS, tu auras beaucoup plus de facilité (et de rapidité) à
> récupérer l'id du <li> que le contenu du <span>, pour le balancer à XHR
> ou autres.

avec ma -nouvelle- version; j'ai directement le bon index, sans
tripatouillage.

> Je pars du principe que tu auras géré un "onclick" sur chaque <li>.

oui mais il ne marche pô...

> Si tu préfère ajouter un lien explicite, alors il vaut mieux mettre l'id
> sur le lien <a>, plutôt que sur le <li>.

oui, c'est sur
--
« Les seuls problèmes que l'argent peut résoudre sont
des problèmes d'argent. »
(Kin Hubbard)

SAM

unread,
Aug 24, 2011, 7:08:35 AM8/24/11
to
Le 24/08/11 12:42, Une Bévue a écrit :

>
> ce qui donne en html :
> <li class="categorie" onlick="selectCat(this);return
> false">Formulaires<span class="cache">0</span></li>
>
> la function selectCat( n'est pas appellée :

ben oui !
onlick
onclick
attention à l'orthografeux

> function selectCat(o) {alert("toto")
> alert(o.getElementsByTagName('span')[0].text);
> }
>

o.getElementsByTagName('span')

marchicotera si on n'est pas en Xhtml

à ce compte :
o.getElementsByTagName('span')[0]
on se demande si vraiment la classe 'cache' sert à qque chose ?!

#categories li span { display: none } /* ou visibility:hidden; */


Ou, si on ne veut que le 1er span en invisible :

#categories li span:first-child { display: none }

<ul id="categories">
<li>bla bla <span>un</span> <pan>deux</span></li>
</ul>

Une Bévue

unread,
Aug 24, 2011, 7:18:50 AM8/24/11
to
SAM <stephanemor...@wanadoo.fr.invalid> wrote:

> dont auquel le JS connaitra les index idx

ouais te fatigues pas trop, j'ai trouvé un truc extrêmement simple :
<li class="categorie" onlick="selectCat(1);return false">Groupes de
discussion</li>

avec le js :
function selectCat(cat) {
alert("cat = "+cat);
}

mais bon, je ne pige pas pourquoi mais la fonction selectCat( n'est pas
activée...

Une Bévue

unread,
Aug 24, 2011, 7:23:30 AM8/24/11
to
SAM <stephanemor...@wanadoo.fr.invalid> wrote:

> > la function selectCat( n'est pas appellée :
>
> ben oui !
> onlick
> onclick
> attention à l'orthografeux

Arff putingue, difficile à voir pour moi !!!

merci beaucoup, je n'aurai pas regardé de ce côté là...

> > function selectCat(o) {alert("toto")
> > alert(o.getElementsByTagName('span')[0].text);
> > }
> >
>
> o.getElementsByTagName('span')
>
> marchicotera si on n'est pas en Xhtml
>
>
>
> à ce compte :
> o.getElementsByTagName('span')[0]
> on se demande si vraiment la classe 'cache' sert à qque chose ?!

là elle ne sert plus à rien; je n'ai plus de span non plus...

> #categories li span { display: none } /* ou visibility:hidden; */
>
>
> Ou, si on ne veut que le 1er span en invisible :
>
> #categories li span:first-child { display: none }
>
> <ul id="categories">
> <li>bla bla <span>un</span> <pan>deux</span></li>
> </ul>


--

SAM

unread,
Aug 24, 2011, 7:33:25 AM8/24/11
to
Le 24/08/11 13:18, Une Bévue a écrit :

> SAM<stephanemor...@wanadoo.fr.invalid> wrote:
>
>> dont auquel le JS connaitra les index idx
>
> ouais te fatigues pas trop,

Ho! ça m'fatigue pas, ça vient tout seul ;-)

> j'ai trouvé un truc extrêmement simple :
> <li class="categorie" onlick="selectCat(1);return false">Groupes de
> discussion</li>

y a + simple :

<li class="categorie" onclick="return selectCat(1)">discussion</li>

et même (vu que ce n'est pas un A)

<li class="categorie" onclick="selectCat(1)">discussion</li>

> avec le js :
> function selectCat(cat) {
> alert("cat = "+cat);
> }
>
> mais bon, je ne pige pas pourquoi mais la fonction selectCat( n'est pas
> activée...

à cause de la typo sur le onlick !

Pascal Poncet

unread,
Aug 24, 2011, 7:35:01 AM8/24/11
to
Le 24/08/2011 13:08, Une Bévue a écrit :
> oui, mais il y a encore plus simple, comme le code html est généré par
> xhr/php/sql, j'ai mis ca :
> <li class="categorie" onlick="selectCat(this);return
> false">Formulaires<span class="cache">0</span></li>

Arrrgh ! PHP fait le sale boulot, alors on peut balancer trois tonnes de
HTML.
Bien sûr, cela peut fonctionner, mais avec beaucoup d'imperfections.

Essaye ce code en local, par exemple :

---------------------------
<html>
<head>
<title>Test JS</title>
<style>
ul#categories li {
text-decoration: underline;
cursor: pointer;
}
ul#categories li:hover {
color: red;
}
</style>
<script>
function lister(event) {
var item = event ? event.target : window.event.srcElement;
var categorie = item.id.split("_")[1];
var resultat = document.getElementById("resultat");
resultat.innerHTML = categorie;
}
</script>
</head>
<body>
<p>Liste de catégories</p>
<ul id="categories">
<li id="cat_1">Cat. 1</li>
<li id="cat_2">Cat. 2</li>
<li id="cat_3">Cat. 3</li>
</ul>
<p>Vous avez choisi la catégorie : <span id="resultat"></span></p>
<script>
document.getElementById("categories").onclick = lister;
</script>
</body>
</html>
---------------------------

Bon, à part le "hover" qui n'est toujours pas reconnu par MSIE, ça me
parait plus limpide, non ? Donc plus facile à déboguer !


--
Cordialement,
Pascal

SAM

unread,
Aug 24, 2011, 8:35:59 AM8/24/11
to
Le 24/08/11 13:23, Une Bévue a écrit :
> SAM<stephanemor...@wanadoo.fr.invalid> wrote:
>
>>> la function selectCat( n'est pas appellée :
>>
>> ben oui !
>> onlick
>> onclick
>> attention à l'orthografeux
>
> Arff putingue, difficile à voir pour moi !!!
>
> merci beaucoup, je n'aurai pas regardé de ce côté là...

Je commence touj par ça
(surtout si tte la fonction ne fonctionne pas)
trop de galères à cause d'une de ces bêtes typos :-(
(surtout à mes débuts)

et puis ... c'est souvent + facile avec un œuil neuf

Une Bévue

unread,
Aug 24, 2011, 9:01:00 AM8/24/11
to
Pascal Poncet <poncet.pas...@gmail.com.invalid> wrote:

> Bon, à part le "hover" qui n'est toujours pas reconnu par MSIE, ça me
> parait plus limpide, non ? Donc plus facile à déboguer !

of; ?SIE est le cadet de mes soucis vu que je suis sur mac et que ces
pâges sont d'usage perso...
--
« Le verbe aimer est difficile à conjuguer : son passé
n'est pas simple, son présent n'est qu'indicatif, et
son futur est toujours conditionnel. »
(Jean Cocteau)

Une Bévue

unread,
Aug 24, 2011, 9:01:01 AM8/24/11
to
SAM <stephanemor...@wanadoo.fr.invalid> wrote:

> <li class="categorie" onclick="selectCat(1)">discussion</li>

il n'y a donc pas besoin du "; return false" ???
je ne sais jamais quand il est nécessaire.

Pascal Poncet

unread,
Aug 24, 2011, 9:27:08 AM8/24/11
to
Le 24/08/2011 15:01, Une Bévue a écrit :
> il n'y a donc pas besoin du "; return false" ???
> je ne sais jamais quand il est nécessaire.

Nécessaire quand on veut contrarier le comportement par défaut de
l'élément HTML, hors gestion d'événement personnalisée.

Par exemple, pour empêcher un lien de demander la page référencée, ou un
formulaire d'envoyer les données saisies, il faut retourner la valeur
"false" à la propriété (ou l'attribut HTML) qui gère ces comportements.

--
Cordialement,
Pascal

Une Bévue

unread,
Aug 24, 2011, 11:11:42 AM8/24/11
to
Pascal Poncet <poncet.pas...@gmail.com.invalid> wrote:

> > il n'y a donc pas besoin du "; return false" ???
> > je ne sais jamais quand il est nécessaire.
>
> Nécessaire quand on veut contrarier le comportement par défaut de
> l'élément HTML, hors gestion d'événement personnalisée.
>
> Par exemple, pour empêcher un lien de demander la page référencée, ou un
> formulaire d'envoyer les données saisies, il faut retourner la valeur
> "false" à la propriété (ou l'attribut HTML) qui gère ces comportements.

OK, merci bien pour cette clarification !!!
--
« L'univers n'est qu'un défaut dans la pureté du non-être. »
(Paul Valéry)

0 new messages