Liste double et javascript [Résolu]

Signaler
Messages postés
49
Date d'inscription
lundi 9 janvier 2006
Statut
Membre
Dernière intervention
17 février 2009
-
Messages postés
197
Date d'inscription
jeudi 27 avril 2006
Statut
Membre
Dernière intervention
10 juillet 2011
-
Bonjour,

J'ai mis en place un système liste double en m'inpirant de ce site.
Mais je sollicite de l'aide car mon scripte ne fonctionne pas convenablement.

J'ai un formulaire comme ci dessous avec deux function javascript:

<HTML>
<HEAD>
<TITLE></TITLE>

<SCRIPT LANGUAGE="JavaScript">
    function Deplacer(l1,l2) {
        if (l1.options.selectedIndex>=0) {
            o=new Option(l1.options[l1.options.selectedIndex].text,l1.options[l1.options.selectedIndex].value);
            l2.options[l2.options.length]=o;
            l1.options[l1.options.selectedIndex]=null;
            //document.formulaire.PROJET_ID+= l1.options[l1.options.selectedIndex].value+"," ;
        }else{
            alert("Aucune activite selectionnee");
        }
    }
</SCRIPT>

 <SCRIPT  LANGUAGE="JavaScript">
    function posterListes()
{
     // On compte le nombre d'item de la liste select
    NbCol1 = document.forms['formulaire'].ListeDroite.length;
   
    // On lance une boucle pour selectionner tous les items
    for (a = 0; a < NbCol1; a++)
    {
    document.forms['formulaire'].ListeDroite.options[a].selected = true;
    }
   
     // On compte le nombre d'item de la liste select
    NbCol2 = document.forms['formulaire'].ListeGauche.length;
      
    // On modifie l'ID  du champ select pour que PHP traite cette
    // derni?re comme un array
   //document.forms['formulaire'].ListeDroite.name = "ListeDroite[]"; 
}

</SCRIPT>

                ......
                    <td align="left" colspan="" rowspan ="2">
                     <select align="top" name="ListeGauche" multiple="multiple" size="6" style="width:200px">
                    <?php
                    foreach($tab1 as $cle => $valeur){
                    ?>
                        <OPTION VALUE=<?=urlencode($cle)?>><?=$cle." - ".$valeur?></OPTION> <?php
                    }
                    ?>       
               </select>
               </td>
               <TD align="center" colspan="" rowspan ="2">
                    >>"    onClick="Deplacer(this.form.ListeGauche,this.form.ListeDroite);posterListes()" >
                   

                   
                </TD>    
                <TD align="left" colspan="" rowspan ="2">
                    <select align="top" name="ListeDroite" multiple="multiple" size="6" style="width:200px">
                    <?php
                    foreach($tab2 as $key => $value){
                    ?>
                        <OPTION  VALUE=<?=urlencode($key)?>><?=$key." - ".$value?></OPTION> <?php
                    }
                    ?>
                    </select>
                </TD>
Mon objectif  est que les deux listes soient remplis au chargement du formulaire  graces aux resultats des requetes sql que j'ai mis dans les tableux($tab1 et $tab2 ) et qu'après j'ai la possibilité de modifier les élément de chaque liste  par les bouton >><ajouter et <<<Enlever.
Mon problème est le suivant:
    Je n'arrive pas avec ce code à afficher mes valeurs de la ListeDroite.
    Parcontre si dans si dans la deuxieme select je mets name="ListeDroite[]" , l'affichage de la ListeDroite se fait au chargement du formulaire mais la fonction Deplacer() ne marche plus.

Si vous avez des idée  pour m'aider à débloquer cette situation.

Merci d'avance.

Daris

15 réponses

Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
34
"bien entendu"    ;o)

   var NbCol1 = document.formulaire['ListeDroite[]'].length

   document.formulaire['ListeDroite[]'].options[a].selected = true;
  
... et autres 'il y a.

<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
34
Bonjour,
pas tout suivi, mais si tu nommes ta liste ListeDroite[], quand tu l'utilises
il ne faut pas mettre this.form.ListeDroite !
peut-être this.form['ListeDroite[]']
ou document.name_du_formulaire['ListeDroite[]']

pour le reste, traiter les select,  si tu veux un exemple : ici
<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
Messages postés
49
Date d'inscription
lundi 9 janvier 2006
Statut
Membre
Dernière intervention
17 février 2009

Bonjour, Merci pour ton attention.
Effectivement en faisant this.form['ListeDroite[]'] ca marche parcontre je pense qu'il faut aussi modifier l'ecriture de ListeDroite dans  poster liste car javascript me signale une erreur de syntax que je n'arrive pas à debeguer.

// On compte le nombre d'item de la liste select
    NbCol1 = document.forms['formulaire'].ListeDroite.length;

L'erreur :  document.forms['formulaire'].ListeDroite as no properties se porte sur la ligne ci dessus

Merci d'avance
Messages postés
49
Date d'inscription
lundi 9 janvier 2006
Statut
Membre
Dernière intervention
17 février 2009

Merci beaucoup pour ton aide bultez
Messages postés
197
Date d'inscription
jeudi 27 avril 2006
Statut
Membre
Dernière intervention
10 juillet 2011

J'avais vu ce bout de code hier soir, mais il y avait beaucoup de chose
qui manquait:
forms['formulaire']   mais  formulaire n'existe pas?
this.form.listegauche ressort des erreurs aussi (cf bultez).

En plus pour ajouter, et ou supprimer des options dans un select,
il y a des fonction déjà existante.

Mais bon l'idée du code m'a paru sympa et je m'y suis penché;
voila donc une solution en version js pur, a toi de voir l'adaptation avec php:

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<SCRIPT LANGUAGE="JavaScript">
    function Ajout_Supprime_2(P_M)
    {
        if(P_M=="+")
        {
        //Mise a jour du Select:
            //Nombre d'option deja present
        var NbsOptionExistant = document.getElementById("ListeComplete").length;
        var NewNbsOption=NbsOptionExistant+1;
            //Ajout d'une option
        var newOPT=document.createElement("OPTION");
            //Ajout du texte de cette option
        newOPT.text=texte.value;
            //insertion de l'option
        ListeComplete.add(newOPT,4);
        }

        if(P_M=="-")
        {
        var i=0,j=0;
        for(i=0;i<document.getElementById("ListeComplete").length;i++)
            {
            if(document.getElementById("ListeComplete").options[i].selected==true)
                {ListeComplete.remove(i);j--;}
                else j++;
            }
        if(i==j) alert("Aucune option selectionnee");
        }
    }
</SCRIPT>

                ......

    Un tableau avec posibilité d'ajouter et ou d'enlever (1 ou plus d'un coup),

----

          <select align="top" id="ListeComplete" name="ListeComplete" multiple="multiple" size="10"

style="width:200px">
        <OPTION  VALUE=0>n°0</OPTION>
        <OPTION  VALUE=1>n°1</OPTION>
        <OPTION  VALUE=2>n°2</OPTION>
        <OPTION  VALUE=3>n°3</OPTION>
      </select>
   ,
           
       
       

        <textarea name="instruction" cols="30" rows="3" wrap="VIRTUAL">Cliquer sur l'option a

supprimer puis appuyer sur Enlever</textarea>
       
   

</html>

P.S: la fonction ajout ne marche pas sous firefox

@+

L'entre-aide est la force de notre savoir
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
34
passer par le ID est une alternative.
>>la fonction ajout ne marche pas sous firefox
pas de raisons ( mais pas contrôlé le script ! )
une erreur doit être signalée :
•————————•——————————————————————————————————————————————————————————•
|FireFox |regarder la "console d'erreurs" |
| | Outils / Console d'erreurs |
| | et mieux, : télécharger FireBug |
•————————•——————————————————————————————————————————————————————————•

<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
Messages postés
197
Date d'inscription
jeudi 27 avril 2006
Statut
Membre
Dernière intervention
10 juillet 2011

Merci bultez,
Je regarderais plus en profondeur ce w-e avec la console


@+

L'entre-aide est la force de notre savoir
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
34
sinon reviens et dis nous... on regardera de plus près.
<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
Messages postés
197
Date d'inscription
jeudi 27 avril 2006
Statut
Membre
Dernière intervention
10 juillet 2011

Bon me reloiva, apres un petit bout de temps.

L'erreur signalé par la console sous FireFox est:
ligne           newOPT.text=texte.value;
erreur :       text is not define
Il semblerais que le texte tapé dans l'input text n'est pas pris en compte.


alors que tout passe bian sous IE.


Y-a-t-il une subtilité pour FF au niveau de l'input?


Merci de me le dire si tu connait bultez


P.S: petite correction dans la partie du script:
            //insertion de l'option
        ListeComplete.add(newOPT,4);  
Il faut mettre NewNbsOption au lieu de 4




L'entre-aide est la force de notre savoir
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
34
>>  
  
et utiliser document.toto.texte.value

ou mettre un id
                   Cordialement            Bul         [mon Site]     [M'écrire]
Messages postés
49
Date d'inscription
lundi 9 janvier 2006
Statut
Membre
Dernière intervention
17 février 2009

Bonjour!
J'arrive un peut en retard mais juste une petite intrevention sur:
 forms['formulaire']   mais  formulaire n'existe pas?
formulaire est le nom de mon formulaire car mon application est faite de la facon que la balise <form> ne peut apparaitre dans ce scipt.
Mon script fonctionne bien  sous firefox et ne renvoi pas d'erreur. J'utilise la console d'erreur de web developpeur pour suivre les les retours javascript.

Merci
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
34
tu as les posibilités, avec un exemple de balise form de name "toto"
met le name qui convient.
où as tu vu forms['toto']  dans mon exemple ?  avec FF, ça ne devrait pas fonctionner !
et pouquoi la balise ne peut-elle pas apparaitre ?
<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
34
>>J'utilise la console d'erreur de web developpeur
regarde celle de FireFox et télécharge firebug pour l'avenir.
<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
Messages postés
197
Date d'inscription
jeudi 27 avril 2006
Statut
Membre
Dernière intervention
10 juillet 2011

Evidement bultez,
je suis trop nul , moi qui aime tant le ID,
je n'y ai pas pensé.
Je testerais
Merci, t'es trop fort

L'entre-aide est la force de notre savoir
Messages postés
197
Date d'inscription
jeudi 27 avril 2006
Statut
Membre
Dernière intervention
10 juillet 2011

Salut a tous, bon voila un correctif: ligne 55, il faut ajouter l'ID:

(MERCI BULTEZ)


Dans le script, ligne 19
newOPT.text=document.getElementById("texte").value; //texte.value;


Le tout passe sous IE et FF


Par contre c'est cette ligne qui me pose probleme maintenant:
//insertion de l'option
ListeComplete.add(newOPT,NewNbsOption);


Voila les 2 erreur qui ressorte:


un warning:
Avertissement : Élément référencé par son ID/NAME dans le contexte global. Utilisez la propriété standard du W3C « document.getElementById() » à la place.
Fichier Source : ...
Ligne : 19


et surtout une erreur que je ne pige pas:
Erreur : uncaught exception: [Exception... "Could not convert JavaScript argument arg 1 [nsIDOMHTMLSelectElement.add]"  nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)"  location: "JS frame :: ... :: Ajout_Supprime_2 :: line 19"  data: no]




Pour enveler lme warning, J'ai donc tenté de remplacé par
//insertion de l'option
document.getElementById("ListeComplete").add(newOPT,NewNbsOption);


Du coup le warning est bien parti, mais l'erreur reste toujours,
et la du coup je vous solicite.
Merci d'avance

L'entre-aide est la force de notre savoir