Discussion :

[tim1789]

Bonjour,
Voici ci-dessous une partie d'une fonction javascript d'un site dynamique fonctionnant sous firefox.

Une chaine est transmise à la fonction, chaque ligne de la chaine se termine par \n et chaque ligne est composée de 4 strings séparées par des ; (fichier csv).
Je veut créer un select avec comme options les premiers éléments de chaque ligne. Ça, c'est bon.

Je veut déclencher une fonction afficher_select(a,b) au passage de la souris sur les options du select (afficher une photo et un commentaire d'aide) et en déclencher une autre (mem_select(a,b)) quand on clique sur une des options.

Je peux appeler cette fonction avec plus de 15 fichiers csv, chaque fichier peut comporter plusieurs centaines de lignes, il est donc impératif d'automatiser tout cela.

Pas de pb avec firefox. Avec ie8, la liste de sélection est bien créé, mais il ne se passe rien au passage de la souris ou au click. J'ai essayé la partie en commentaire (setAttribute.onmouseove...), mais au premier passage de la boucle for, on exécute la fonction afficher_select(0,sc), et c'est terminé). Avec opera10, le click fonctionne mais pas onmouseover, mais je n'ai pas vraiment chercher avec opera.

Que de temps perdu avec ces navigateurs ne respectant rien !

Merci de votre aide

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
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
  if(val!="flo") ligne.sort();
  l=document.getElementById("liste_selection");
  if(l.childNodes.length>0){  
    l.removeChild(l.lastChild);
    document.getElementById("liste_selection").innerHTML="";
   }    
  sel=document.createElement("select");
  alert("nb lignes= "+ligne.length)
  for(i=0;i<ligne.length;i++){
    cara=ligne[i].split(';')
    cara1[i]=cara[0]
    cara2[i]=cara[1]
    cara3[i]=cara[2]
    cara4[i]=cara[3]
    var k = document.createElement('option');
    k.setAttribute("value", i);    
//    if(document.all){
 //     essai pour ie
//      k.setAttribute.onmouseover=afficher_select(i,sc);
//      k.setAttribute.onclick={mem_select(i,sc);
//    }else{
//      pour firefox qui fonctionne
      eval("k.setAttribute('onMouseOver','afficher_select(\""+i+"\",\""+sc+"\")')");    
      eval("k.setAttribute('onClick','mem_select(\""+i+"\",\""+sc+"\")')");
//    }           
    t=document.createTextNode(cara1[i])
    k.appendChild(t);
    sel.appendChild(k);       
  }
  l.appendChild(sel);

[SpaceFrog]

les options ne supportent pas le mouseover

il existe des selects emulés à base de li et ul et du coup le li accèpte le onmouseover

[tim1789]

Oui, bien sur, mais bonjour la présentation pour une liste de plus de 100 éléments.
J'ai bien tenté de mettre l'attribut sur le nœud texte, mais je pense que ce type de nœud ne peut recevoir ce genre d'attribut.

[Invité]

jour

tout a fait ie ne supporte apparement pas setAttribute pour l'ajout d'evenement

il faudrait passer par un attachEvent

Code :

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

k.attachEvent('onmouseover',function(){lafonction(les parametres)});

[SpaceFrog]

attachevent ne changera pas grand chose l'option ne supporte pas l'évènement onmouseover sous ie

Pour ce qui est de la presentation avec des ul et des lis ?
Bn ce sera invisible pour le user, il aura l'impression d'avoir affaire à un select normal ...

[jnore]

jour

tout a fait ie ne supporte apparement pas setAttribute pour l'ajout d'evenement

il faudrait passer par un attachEvent

Code :

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

k.attachEvent('onmouseover',function(){lafonction(les parametres)});

IE supporte très bien le setAttribute pour l'ajout d'événements.
Je l'exploite depuis un moment maintenant...
le attachEvent fera aussi l'affaire, mais comme cela a été dit, le faire sur une <option> n'a pas d'intérêt.

[Invité]

j'ai refait des testes au sujet de attachevent et les evenement et il est vrais que sa marche avec ie 8 mais apparement pas sur ie 6 c'est pour cela que j'ai du abandonne cette solution pour ie.

[tim1789]

J'ai un ie8 tout à fait à jour qui ne connait pas les attachEvent sur option, pas plus que les onmouseover. Il ne réagit absolument pas à k.attachEvent('onmouseover',function(){alert('toto')});

Je ne comprends pas pourquoi jnore dit que cela ne présente pas d'intérêt de le faire sur une <option>. Il peut aller voir (avec firefox), le site en construction http://petiteflore.perso.sfr.fr/ qui utilise ce fait. Bien sur ce site n'est encore qu'un draft, j'y travaille dessus, il peut être modifié à tout moment.

Quant aux ul li émulant un select, peux-tu préciser, Spacefrog ? Je n'ai rien trouvé sur le web concernant cette possibilité.

[SpaceFrog]

encore une fois ce n'est pas une question de attach event ...
les options ne supportent tout simplement pas l'évènement onmousover.
C'est comme si tu essayais de mettres des boutons de manchettes à un tee shirt à manches courtes !

[tim1789]

J'ai bien compris le non fonctionnement de onmouse ou onclick sur option avec ie, mais ça ne résout pas la question. La solution ul li marche, je l'ai testée, mais n'est pas possible au point de vue présentation, même en coupant la liste avec un bouton suite. Je crois que je ne peux éviter une liste avec ascenseur et je ne sais pas faire. Y a t'il une solution ?

[SpaceFrog]

cette fois ci je vais essaye de parler français ...
émuler ...
rien a voir avec une mule ...
ça veut dire en gros déguiser les ul et les li en select
il existe des scripts et en particulier sous jquery sous le nom de dropdown menu qui arrivent à imiter un select à partir de ul et de li ...
Donc pour l'utilisateur il ne voit pas la différence !

[tim1789]

Zut, j'avais cru qu'il s'agissait d'une mule, ou pourquoi pas d'un âne !

Bref, j'en suis toujours au même point. J'ai remplacé le select par une liste enfermée dans une scroll box à partir du framework mootolls. Pas trop aisé comte tenu que c'est une liste calculée à créer, mais ça fonctionne....sous firefox mais pas sous ie8, qui conserve superbement sa liste bien traditionnelle, avec tout de même la reconnaissance de onmouse et de onclick.

[SpaceFrog]

regarde plutot la librairie jquery et les plugins dropdownmenu ...

[tim1789]

"Laisse faire le temps, ta vaillance et ton roi". Je vais "donner du temps au temps".

Je vais poursuivre le reste du site avec un select pour firefox et une liste classique, donc beaucoup trop longue pour IE, en guettant l'inspiration.
Je reviendrai sur ce point plus tard et donnerai ici la solution finalement adoptée (s'il y en a une).
Enfin, j'ai aussi constaté que sur opera 10 onmouseover ne fonctionne pas sur une option de select, du moins avec le code donné dans mon premier message, alors que onclick fonctionne normalement.
Que de temps perdu à cause de la fantaisie de certains développeurs. Et si on allait un peu moins vite en respectant les standards ?
Je suis toujours preneur d'une solution ! Merci

[Bovino]

Et en plus, on en a même ici !
http://khayyam.developpez.com/articl...jquery/plugin/

[tim1789]

Comme me l'a conseillé Bovino, je suis allé faire un tour dans le coin des plugins jquery. Pas trop facile à utiliser dans le cas qui m'intéresse, probablement parce que c'est javascript qui me domine et non l'inverse.

J'ai su modifier le script js pour déclencher un événement sur onmouseover, mais je n'ai pas su transmettre à cet événement le numéro de la ligne de la liste de façon à particulariser cet événement pour chaque liste (appeler une fonction avec le numéro de la ligne). Idem pour particulariser l'événement click.

Sans doute faut-il entrer plus en détail dans jquery, un gros travail en perspective.

[tim1789]

Non, je n'ai pas renoncé.
Après pas mal de recherche et d'essais infructueux avec différents frameworks dont jquery, j'ai finalement jeté l'éponge. La solution que j'ai retenue est la suivante :

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
18
19
20
21
22
23
24
25
26
 
    var sel=document.createElement("select");
    if(nav[0]=="ie"){
      eval('sel.onclick=new Function ("afficher_select(this.value,sc)")');
      eval('sel.ondblclick=new Function ("mem_select(this.value,sc)")');               
    }
    if(lg>20) sel.setAttribute("size","20");
    else  sel.setAttribute("size",lg);
    for(i=0;i<ligne.length;i++){
      cara=ligne[i].split(';')
      cara1[i]=cara[0]
      cara2[i]=cara[1]
      cara3[i]=cara[2]
      cara4[i]=cara[3]
      var k = document.createElement('option');
      k.setAttribute("value", i);
    if(nav[0]=="ff" ){
      //firefox     
      eval("k.setAttribute('onMouseOver','afficher_select(\""+i+"\",\""+sc+"\")')");    
      eval("k.setAttribute('onClick','mem_select(\""+i+"\",\""+sc+"\")')");
    }else if(nav[0]=="ie"){       
    }else{
      //opera
      eval("k.setAttribute('onclick','afficher_select(\""+i+"\",\""+sc+"\")')"); 
      eval("k.setAttribute('onDblClick','mem_select(\""+i+"\",\""+sc+"\")')");    
    }

Pour IE8, on déclenche une première fonction en cliquant une fois sur une option du select et en transmettant la valeur sélectionnée et une seconde par un double click, et ces fonctions sont écrites sur l'élément select
Pour FF3, on déclenche une fonction par onmouseover et une autre par onclick
Pour Opéra10, même chose que pour IE, mais fonctions sont écrites sur les éléments option
Pas trop sympa, et je n'ai pas testé les autres browsers.
Bien sur, si quelqu'un à d'autres idées !!!