enieme sujet sur onchange / ListBox

enieme sujet sur onchange / ListBox - HTML/CSS - Programmation

Marsh Posté le 11-04-2006 à 15:53:31    

Salut ;)
 
Bon je craque, ca fait 2h que je lutte avec Javascript qui d'ailleurs devrais pas exister tellement c'est chiant  :o .. mais bon d'un autre coté j'en ai besoin :d
 
J'ai ce code :

Code :
  1. function aff_matos_on_off(){
  2.     if( document.forms.modif_infos_dossier.type_aide.options.value ==0)
  3.         document.getElementById("matos_on_off" ).className="aff_div";
  4.     else
  5.         document.getElementById("matos_on_off" ).className="cache_div";
  6. }


et

Code :
  1. <form name="modif_infos_dossier" class="form_profil" action="<? echo 'modif_dossier.php?infos_dossier='.$code_dossier.'&action=majdossier'; ?>" method="post">
  2.                          <label for="type_aide">Type d'aide :</label>
  3.                          <select name="type_aide"  size='1' onchange=aff_matos_on_off() />
  4.                                 <option value="titre" class="selec_rub" style="margin: 0px;">Selection d'un type d'aide</option>
  5.                                 <option value="0">blabla</option>
  6.                                 etc...
  7.                          </select><br class="clearall" />
  8.                          <div id='matos_on_off' class="cache_div">YAHOO</div>


 
Donc en gros: quand je clique sur l'option dont la valeur est égale a 0 ca m'affiche la div et un beau YAHOOO
 
Probleme : ca marche sous IE mais pas sous Firefox.. JS est bien activé partout, firefox execute du JS ailleurs mais la ca bloque.
 
Une idée? je pige pas :(
merci

Reply

Marsh Posté le 11-04-2006 à 15:53:31   

Reply

Marsh Posté le 11-04-2006 à 16:10:18    

C'est ton test avec le if qu'est n'importe quoi :o
Pour avoir la valeur de l'option selectionné, il faut utiliser selectedIndex, un truc dans le genre ( avec un id type_aide sur ton select):

Code :
  1. function aff_matos_on_off(){
  2.          var selNode= document.getElementById('type_aide');
  3.          alert(selNode);
  4.          if( selNode.options[selNode.selectedIndex].value ==0){
  5.              document.getElementById("matos_on_off" ).className="aff_div";
  6.          } else {
  7.              document.getElementById("matos_on_off" ).className="cache_div";
  8.          }
  9.       }


 
Par ailleurs les " autour de la fonction appelée dans le onchange ça coute rien ;)

Reply

Marsh Posté le 11-04-2006 à 16:23:06    

Merci de m'aider, c'est sympa..
 
Mais la je suis carrement démoralisé, j'ai une erreur "objet attendu" sous IE.
J'ai bien fait tout comme toi pourtant, j'ai meme pas l'alert
 
Je rend les armes

Reply

Marsh Posté le 11-04-2006 à 16:26:32    

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
  4. <head>
  5.   <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  6.   <title>Test</title>
  7.   <script type="text/javascript">
  8.       function aff_matos_on_off(){
  9.          var selNode= document.getElementById('type_aide');
  10.          if( selNode.options[selNode.selectedIndex].value ==0){
  11. document.getElementById("matos_on_off" ).className="aff_div";
  12.          } else {
  13. document.getElementById("matos_on_off" ).className="cache_div";
  14.          }
  15.       }
  16.   </script>
  17.   <style type="text/css">
  18.   .cache_div{
  19.     display: none;
  20.   }
  21.   .aff_div{
  22.     display: block;
  23.   }
  24.   </style>
  25. </head>
  26. <body >
  27. <form name="modif_infos_dossier" class="form_profil" action="a.php" method="post">
  29.   <label for="type_aide">Type d'aide :</label>
  30.   <select name="type_aide" id="type_aide" size='1' onchange="aff_matos_on_off()" >
  31.          <option value="titre" class="selec_rub" style="margin: 0px;">Selection d'un type d'aide</option>
  32.          <option value="0">blabla</option>
  33.   </select>
  34.   <br class="clearall" />
  35.   <div id='matos_on_off' class="cache_div">YAHOO</div>
  36. </form>
  38. </body>
  39. </html>


 
edit: Ah oui et le / a la fin de ta balise d'ouverte de select ça suxxe!


Message édité par anapajari le 11-04-2006 à 16:27:56
Reply

Marsh Posté le 11-04-2006 à 16:31:48    

Ok Bon je me suis repris en main :d
 
Ta solution marche parfaitement sous IE, l'alert me donne un "[object]"
Par contre sous FF j'ai une alerte avec dedans : "null"
 
Pas cool :(
 
edit:que je clique sur la bonne option ou pas j'ai "null"
 
pour le /> du select, merci j'avais pas vu! C'est un scandale


Message édité par bixibu le 11-04-2006 à 16:33:55
Reply

Marsh Posté le 11-04-2006 à 16:36:36    

Hum.. en recopiant ton code dans un nouveaudoc, FF affiche parfaitement comme il faut..
 
Je vais regarder mon code de bout en bout pour trouver l'erreur :(

Reply

Marsh Posté le 11-04-2006 à 16:41:05    

Ok quel con, j'ai oublié le id=" dans mon select..
 
Ca marche nikel maintenant.. Tous ca pour ca
 
Meric pour ton coup de main encore une fois ;)

Reply

Marsh Posté le 11-04-2006 à 20:09:26    

et pourquoi passer par le selected index alors que monselect.value marche ???

Message cité 1 fois
Reply

Marsh Posté le 11-04-2006 à 23:51:22    

Oui, c'est pareil, j'avais fait comme ca avant.
 
M'enfin ca marche, maintenant je dois alimenter une liste en fonction du clik sur option d'une autre list
Je connais la methode mais je vais en chier
 
en gros et normalement : je me suicide demain :d

Message cité 1 fois
Reply

Marsh Posté le 12-04-2006 à 09:30:50    

Salut ;)
 
J'ai une autre petite question :
 
Est il possible en Javascript de compter le nombre d'options qui compose un select?
J'ai besoin de ce nombre pour incrementer la valeur de size="" du select .
Si ca existe pas, je me debrouillerais en php+javascript
 
EDIT:
bon j'ai compter le nombre d'options que je créé avec ma boucle php et j'ai ensuite modifier la valeur size avec javascript :
document.getElementById('choix_matos').size = <? echo $i; ?>


Message édité par bixibu le 12-04-2006 à 09:37:48
Reply

Marsh Posté le 12-04-2006 à 09:30:50   

Reply

Marsh Posté le 12-04-2006 à 09:44:31    

gatsu35 a écrit :

et pourquoi passer par le selected index alors que monselect.value marche ???


Argh oui c'est vrai, c'est juste que j'ai tellement l'habitude de faire comme ça pour récuperer d'autres attributs sur les options que j'oublie que pour la valeur on peut faire si simplement...
 

bixibu a écrit :

M'enfin ca marche, maintenant je dois alimenter une liste en fonction du clik sur option d'une autre list
Je connais la methode mais je vais en chier
en gros et normalement : je me suicide demain :d


Utilise le DOM a fond et essaye de faire ça proprement...Un gros tu te fais une fonction qui génère tes options( et qui prend par exemple l'id du select visé et un array en params)

Code :
  1. function buildOptions(idSel, arOpt){
  2.   var selNode;
  3.   if ( (selNode = document.getElementById(idSel)) == undefined){
  4.     return false;
  5.   }
  6.   /*** on vide les options qui peuvent déjà être dans le select ***
  7.   *** la version propre ( si il n'y a pas d'optgroup dans le bouzin)
  8.   while(selNode.getElementsByTagName('option').length){
  9.     selNode.removeChild(selNode.lastChild);
  10.   }
  11.   ***
  12.   *** version rapide et bourrine: ***/
  13.   selNode.innerHTML = '';
  15.   /*** on ajoute les nouvelles options ***/
  16.   var optNode;
  17.   for(var i=0; i<arrOpt.length; i++){
  18.     optNode = document.createElement('option');
  19.     selNode.appendChild(optNode); /*** toujours faire l'appendChild avant de setter l'attribut value d'un option sinon IE se vautre comme une enorme merde, pourquoi? je sais pas ***/
  20.     optNode.setAttribute('value', arrOpt[i]); /***valeur retourné ***/
  21.     optNode.nodeValue = arrOpt[i]; /*** valeur affichée ***/
  22.   }
  23.   return true;
  24. }


Voilou un truc comme ça, bon c'est non testé mais l'idée y est!!!

Reply

Marsh Posté le 12-04-2006 à 10:12:59    

Wowowow lol. Toujours aussi efficace anapajari.  
 
En fait, j'ai un peu laissé tombé cette idée de liste qui en alimente une autre (mais ce que tu as posté, je m'en reservirais surement dans pas longtemps).
EN fait mon probleme est que je dois permettre a l'utilisateur de choisir un materiel qui fait partie d'une arborescence de type de materiel (Arbre de 2 sous catégorie max)
 
Je pensais donc faire selectionner a l'user la premiere catégorie via une listbox1.. qui affiche une autre listbox2 alimentée en fonction de listbox1 qui affiche cette fois les sous-catégorie de la catégorie
Puis cette listbox2 en appelerais ensuite une autre, avec cette fois les materiels eux meme! (seuls les matos de la cat et sous-cat precedemment renseigné bien sur) enfin!
 
Mais la je me suis tournée vers 1 seule grosse liste avec une taille fixe (pas les liste on clik et ca déroul mais la liste directement déroulé)
 
Pour l'instant une centaine de ligne sont affichés, ca passe.. Le plus gros prob c'est l'indentation des sous-cat sous IE.
 
Si vous voyez une meilleure soluce , je suis tout ouie :)
 
Merci :hello:


Message édité par bixibu le 12-04-2006 à 10:14:41
Reply

Marsh Posté le 12-04-2006 à 10:50:15    

Perso j'aurais fait ça:

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
  4. <head>
  5.   <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  6.   <title>Test</title>
  7.   <script type="text/javascript">
  8.   /*** param is a node which has been clicked ***/
  9.   function show(lnkNode){
  10.     var i;
  11.     /*** hiding all select***/
  12.     selNodes = document.getElementsByTagName('select');
  13.     for(i=0; i<selNodes.length; i++){
  14.       selNodes[i].className = "";
  15.     }
  16.     /*** hiding all parentNode.parentNode ul ***/
  17.     ulNodes=lnkNode.parentNode.parentNode.getElementsByTagName('ul');
  18.     for(i=0; i<ulNodes.length; i++){
  19.       ulNodes[i].className = "";
  20.     }
  21.     /*** showing lnk parentChild child ( either ul or select )***/
  22.     var sonsNode = lnkNode.parentNode.getElementsByTagName('*');
  23.     /*** first child is always lnk, so watching the second one ***/
  24.     sonsNode[1].className="disp";
  25.    
  26.     return false;
  27.   }
  28.   </script>
  29.   <style type="text/css">
  30.   ul{
  31.     display: none;
  32.   }
  33.   ul.disp{
  34.     display: block;
  35.   }
  36.   select{
  37.     display: none;
  38.   }
  39.   select.disp{
  40.     display: inline;
  41.   }
  42.   </style>
  43. </head>
  44. <body >
  45. <form name="modif_infos_dossier" class="form_profil" action="a.php" method="post">
  47.    <ul class="disp">
  48.      <li><a href="" onclick="return show(this)">Cat 1:</a>
  49.        <ul>
  50.          <li><a href="" onclick="return show(this)">Cat 1_1:</a>
  51.    <select>
  52.      <option>1_1_1</option>
  53.      <option>1_1_2</option>
  55.      <option>1_1_3</option>
  56.    </select>
  57.  </li>
  58.          <li><a href="" onclick="return show(this)">Cat 1_2:</a>
  59.    <select>
  60.      <option>1_2_1</option>
  61.      <option>1_2_2</option>
  63.    </select>
  64.  </li>
  65.        </ul>
  66.      </li>
  67.      <li><a href="" onclick="return show(this)">Cat 2:</a>
  68.        <ul>
  69.          <li><a href="" onclick="return show(this)">Cat 2_1:</a>
  70.    <select>
  72.      <option>2_1_1</option>
  73.      <option>2_1_2</option>
  74.      <option>2_1_3</option>
  75.    </select>
  76.  </li>
  77.          <li><a href="" onclick="return show(this)">Cat 2_2:</a>
  78.    <ul>
  80.              <li><a href="" onclick="return show(this)">Cat 2_2_1:</a>
  81.        <select>
  82.          <option>2_2_1_1</option>
  83.          <option>2_2_1_2</option>
  84.        </select>
  85.      </li>
  86.              <li><a href="" onclick="return show(this)">Cat 2_2_2:</a>
  88.        <select>
  89.          <option>2_2_2_1</option>
  90.          <option>2_2_2_2</option>
  91.        </select>
  92.      </li>
  93.    </ul>
  94.  </li>
  95.        </ul>
  97.      </li>
  99.    </ul>
  100. </form>
  101. </body>
  102. </html>


 
C'est super vite fait, il y a surement un ou deux bugs cachés mais ça doit pas être long... En plus c'est indépendant du niveau, si jamais tu as besoin tu peux en mettre autant que tu veux...

Reply

Marsh Posté le 12-04-2006 à 11:03:59    

Comment dire... C'est parfait!
 
Il m'aurait fallu 2 jours pour faire ca vu mon niveau en JS!
 
Merci Beaucoup !

Message cité 1 fois
Reply

Marsh Posté le 12-04-2006 à 11:20:29    

bixibu a écrit :

Comment dire... C'est parfait!
Il m'aurait fallu 2 jours pour faire ca vu mon niveau en JS!
Merci Beaucoup !


Bin si tu regardes bien y'a rien de vraiment compliqué :o
Une fois que tu sais te promener dans les noeuds de ton document(et si celui-ci est correctement écrit) avec le DOM tu peux tout faire.

Reply

Marsh Posté le 12-04-2006 à 14:08:52    

Bon ;)
 
j'ai 2 probleme et 1 question :
 
Question:
J'ai 1 formulaire tout bete dont un champs texte qui se rempli en cliquant sur un bouton. Ce bouton ouvre une pop-UP. Dans cette pop-up un autre formulaire contenant une listbox.
 
J'aimerais savoir comment faire pour récupérer dans mon champs texte de la page principal la valeur de l' "option" que l'utilisateur a cliqué. POST? GET? ou carrement du Javascript pur et dur?
ps:la page principal peut etre réactualisée.
 
 
Probleme:
Concernant cette meme pop-up, son ouverture se déclenche parfaitement sous Mozilla mais pas sous IE (5.0)
Est-ce normal (IE trop vieu ?) :

Code :
  1. function aff_matos_on_off(){
  2.     if( document.getElementById('type_aide').value == 0){
  3.         window.open('choix_mat.php', 'Choix du matériel', 'width=500, height=400; top=100, left=100, toolbar=no, menubar=yes, location=yes, resizable=yes, scrollbars=yes, status=no');
  4.     }
  5. }


Si je vire les 2 derniers parametre ca marche par contre (window.open('choix_mat.php') ca c ok ) :/
 
 
Sinon, sous IE5 ton script bug a la ligne 25:
    sonsNode[1].className="disp";
IE me dit que le 1 n'est pas un objet :/
pourtant ca devrait etre OK non?
 
Ca devrait etre mes dernieres questions ^^

Message cité 1 fois
Message édité par bixibu le 12-04-2006 à 14:09:55
Reply

Marsh Posté le 12-04-2006 à 14:33:39    

bixibu a écrit :


Question:
J'ai 1 formulaire tout bete dont un champs texte qui se rempli en cliquant sur un bouton. Ce bouton ouvre une pop-UP. Dans cette pop-up un autre formulaire contenant une listbox.
J'aimerais savoir comment faire pour récupérer dans mon champs texte de la page principal la valeur de l' "option" que l'utilisateur a cliqué. POST? GET? ou carrement du Javascript pur et dur?
ps:la page principal peut etre réactualisée.


Vu que tu es parti sur du js de partout autant l'utiliser/en profiter/en abuser !
Dans la page html du popup, tu créées une fonction:

Code :
  1. function setInputValue( obj, idInpText){
  2.   opener.document.getElementById(idInpText).value = obj.value;
  3.   /*** tu peux rajouter une fermeture automatique de la fenetre si tu as envie ***/
  4. }


Et sur le select en question tu fais:

Code :
  1. <select ... onchange="setInputValue(this, 'idDuChampsTexteViseDansLaPagePrincipale')">


Le "mot clé" à connaitre c'est opener, ça te permet d'acceder a la fenêtre ayant ouvert le pop-up dans lequel "tu es".
La fonction, tu peux t'en resservir ailleurs ci-besoin, il suffit juste de passer les bons paramètres.
note: code non testé comme d'hab, donc non garanti bug-proof
 

bixibu a écrit :


Probleme:
Concernant cette meme pop-up, son ouverture se déclenche parfaitement sous Mozilla mais pas sous IE (5.0)
Est-ce normal (IE trop vieu ?) :

Code :
  1. function aff_matos_on_off(){
  2.     if( document.getElementById('type_aide').value == 0){
  3.         window.open('choix_mat.php', 'Choix du matériel', 'width=500, height=400; top=100, left=100, toolbar=no, menubar=yes, location=yes, resizable=yes, scrollbars=yes, status=no');
  4.     }
  5. }


Si je vire les 2 derniers parametre ca marche par contre (window.open('choix_mat.php') ca c ok ) :/


Le deuxième paramètre est le "nom de ta fenêtre", en fait c'est trompeur parce que c'est le "nom de la variable qui te permet d'accèder à ta fenêtre", et les espaces dans les noms de variables s'pas top :o
Dans enleve juste les espaces.
 

bixibu a écrit :


Sinon, sous IE5 ton script bug a la ligne 25:
    sonsNode[1].className="disp";
IE me dit que le 1 n'est pas un objet :/
pourtant ca devrait etre OK non?


ça devait arriver... Le support du DOM sur IE5.5 est ... pas comme sur IE6 :o
Tu peux essayer de ruser en forçant la récupération du 1er UL ( qui manque dans un coin ;) ):

Code :
  1. var sonsNode = lnkNode.parentNode.getElementsByTagName('*');
  2. for( var j=0; j<sonsNode.length; j++){
  3.   if ( sonsNode[j].tagName == "UL" && sonsNode[j].className == "" ){
  4.     sonsNode[j].className = "disp";
  5.     /*** la tu peux meme sortir de la boucle en fait parce que "normalement" il ne peut en rester(enfin avoir) qu'un  ***/
  6.   }
  7. }


Reply

Marsh Posté le 12-04-2006 à 16:18:42    

Bon he ben je dois te remercier !
Tout marche parfaitement (sous mozilla :d) et j'y serais jamais arrivé seul (et dieu sais que google est mon meilleur ami)
 
Je présente mon site demain, il va y avoir des gloussements ^^
 
Bon sinon pour IE, j'ai le 5.0 sur ma machine, pas le 5.5 dont tu m'as parlé. Mon probleme vient il de la d'apres toi ?
 
Sinon, le javascript en fait, c'est vraiment.. jouissif!

Code :
  1. function setInputValue( obj, idInpText){
  2.            if( obj.value != 'titre'){
  3.                opener.document.getElementById(idInpText).innerHTML = obj.options[obj.selectedIndex].text;
  4.                opener.document.getElementById(idInpText).style.display = "block";
  5.                opener.document.getElementById("label_"+idInpText).style.display = "block";
  6.                window.close();
  7.             }
  8. }

j'suis trop fier :p
Le label de ma div , je peut le récupérer sans doute plus proprement mais bon...
 
Allez Merci Encore pour le temps que tu as passé à m'aider.
 

Citation :

/*** la tu peux meme sortir de la boucle en fait parce que "normalement" il ne peut en rester(enfin avoir) qu'un  ***/


 
Effectivement il ne m'en reste qu'un (de cheveu :d) et je sort de la boucle a 17h Alleluya

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed