cacher des infos

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

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

Pascal Poncet <poncet.pascal.nospam@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)

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>


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

SAM <stephanemoriaux.NoAdmin@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...


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

SAM <stephanemoriaux.NoAdmin@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>

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

Le 24/08/11 13:18, Une Bévue a écrit :

SAM<stephanemoriaux.NoAdmin@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 !


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

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

Le 24/08/11 13:23, Une Bévue a écrit :

SAM<stephanemoriaux.NoAdmin@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

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

Pascal Poncet <poncet.pascal.nospam@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)

SAM <stephanemoriaux.NoAdmin@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.

--
« 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)