[DOM] DOM, setAttribut, �v�nements et IE...

**Cyrano** · 15/04/2006, 10h12

Bonjour,
je viens de faire le tour de quelques sujets qui traitent le probl�me, mais il me manque un d�tail.

Je cr�e un formulaire extensible : je dois rajouter des lignes dynamiquement. Chaque ligne comporte (entre autre) deux listes d�roulantes li�es, la seconde d�pendant du choix fait dans la premi�re. �a, pas de probl�me, �a fonctionne tr�s bien.

Mais dans la premi�re liste, je dois ajouter un gestionnaire d'�v�nement param�tr� dans la balise <select>. Apr�s avoir essay� setAttribute et eu quelques id�es de meurtre � l'endroit d'un certain �diteur de Internet Explorer, j'ai fini par trouver une autre m�thode qui fonctionne partout.

Je cr�e donc mon �l�ment et ajoute l'�v�nement comme ceci:

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

elt_11.setAttribute("onchange", function(){if(this.value != -1){list_f2_famille(y);ajout_ligne_f2(y);}});

Le probl�me vient du param�tre que je mets dans les fonctions : mon param�tre "y" est un num�rique re�u dans la fonction de g�n�ration de la ligne. Mais lorsque la ligne est cr��e, le code g�n�r� ressemble � ceci :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
...<select style="width: 120px;" class="med1" name="FamilleProduit[]" id="FamilleProduit2" onchange="function () {
    if (this.value != -1) {
        list_f2_famille(y);
        ajout_ligne_f2(y);
    }
}">...etc...

Le "y" est envoy� tel quel alors que je devrais voir par exemple:

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
...<select style="width: 120px;" class="med1" name="FamilleProduit[]" id="FamilleProduit2" onchange="function () {
    if (this.value != -1) {
        list_f2_famille(2);
        ajout_ligne_f2(2);
    }
}">...etc...

J'ai d� oublier un truc quelque part, mais quoi ?

Notez que je ne suis pas un grand sp�cialiste en JavaScript, surtout sur la POO JavaScript.

Une id�e � me sugg�rer ?

**FremyCompany** · 15/04/2006, 10h30

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

"function(){alert($y);}".replace(new RegExp("$y","gi"), y)

1) Gestion de la fonction au format texte
2) Remplacement des donn�es
OU

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

elm_11.onchange = function(){alert(y);}

1) Propri�t� JS (non HTML)
2) Y d�clar� � une port�e publique
ex :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
var y = 0
function Test()
{
   //
}

MAIS PAS

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
function Test()
{
   var y = 0
   //
}

Fremy

**Cyrano** · 15/04/2006, 10h43

Bon, j'ai du mal expliquer un truc.

Dans ma page, j'ai une ligne qui est de toutes fa�on pr�sente et vide au d�part. Pour illustrer, ce que je cherche � faire, c'est d'avoir la possibilit� d'ajouter dynamiquement une nouvelle ligne de fa�on � ce que si besoin est je puisse ajouter une ligne de donn�es.

Cette nouvelle ligne est vide et le premier champ est une liste d�roulante contenant un gestionnaire d'�v�nement avec deux appels de fonctions: le premier via Ajax pour alimenter le second champ qui est une autre liste d�roulante, le second qui va cr�er une nouvelle ligne vide en dessous.

Lorsque l'appel est fait, j'envoie en param�tre le num�ro de la ligne en cours de facon � ce que la prochaine ligne ait des �l�ments identifi�s individuellement : donc si ma ligne en cours a un champ avec un id "champ4", la prochaine ligne devra avoir le m�me �l�ment avec un id "champ5". Mon param�tre est donc un num�rique que je ne peux pas fixer en dur.

Ma fonction de cr�ation de ligne ressemble donc �:

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
function ajout_ligne_f2(x)
{
    // ... reste du code dont :
    var y = x + 1;
    elt_11.setAttribute("onchange", function(){if(this.value != -1){list_f2_famille(y);ajout_ligne_f2(y);}});
    // ...
}

Voil�, maintenant, reste � comprendre comment ins�rer "y" de telle sorte que ce soit sa valeur qui soit inscrite dns les param�tres de la ligne g�n�r�e...

**javatwister** · 15/04/2006, 10h43

c'est peut-�tre normal que y ne soit pas interpr�t� dans le dhtml "affich�";

dans les faits, �a ne marche vraiment pas?

**Cyrano** · 15/04/2006, 10h47

Envoy� par javatwister

c'est peut-�tre normal que y ne soit pas interpr�t� dans le dhtml "affich�"

Heu... il y a environ 200 lignes de code, je ne suis pas certain que ce soit tr�s pertinent, je bute juste l� dessus : ma ligne est cr��e correctement, ce ne sont que les gestionnaires d'�v�nements qui ne sont pas fonctionnels sous IE...

Enfin si tu y tiens, je pourrais, dis-moi

**FremyCompany** · 15/04/2006, 10h51

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
var y = 0 
function ajout_ligne_f2(x) 
{ 
   //
   y = x + 1 
   elm_11.onchange = function(){if(this.value != -1){list_f2_famille(y);ajout_ligne_f2(y);}}
   //
}

Juste une question :
le "this" de ta fonction, il se raporte � quoi ???
Tu es sur qu'il ne faudrait pas utiliser une variable locale ?
Fremy

**Cyrano** · 15/04/2006, 10h54

Le this fait r�f�rence � l'�l�ment dans lequel est ins�r� l'attribut, en l'occurence une balise <select>

Je vais essayer pour ma variable y. merci pour le coup de main en tout cas

**FremyCompany** · 15/04/2006, 11h02

Si ca ne marche pas, tente de faire un alert(this); pour voir si il existe bien, sinon, tu peux faire ca :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
 
function elt_11_onchange(obj)
{
   if (obj.value != -1) {/*...*/}
}

et attribuer

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

elt_11.setAttribute("onchange","elt_11_onchange(this)")

� onchange...
Ca vaut ce que ca vaut (comme je ne suis pas un pro) mais ca vaut la peine d'�tre essayer si (this == null || this.value == "undefinied").
Fremy

**javatwister** · 15/04/2006, 11h12

et tu dis que firefox interpr�te correctement y?

**javatwister** · 15/04/2006, 11h16

ce qui m'�tonne toujours c'est

Mais lorsque la ligne est cr��e, le code g�n�r� ressemble � ceci

comment �values-tu le html g�n�r�? par innerHTML?

**javatwister** · 15/04/2006, 11h17

tu peux faire une alerte du dernier id de ligne g�n�r�?

**FremyCompany** · 15/04/2006, 11h18

Envoy� par javatwister

et tu dis que firefox interpr�te correctement y?

Ca me semblerait pour le moins �trange puisque y �tait une varialbe locale (de fonction) et pas une variable � port�e globale.
N�amoins, JS nous r�serve toujours des surprises...

**javatwister** · 15/04/2006, 11h22

ben m�me avec un y local, la moindre des choses est quand m�me de passer sa valeur � la fonction si le code le demande

d'ailleurs, c'est �a ou undefined!

**Cyrano** · 15/04/2006, 11h29

L�, j'ai tellement tritur� ce code depuis deux jours que plus rien ne fonctionne nulle part...

Bon, voil� une version tr�s simplifi�e : maintenant, ceci fonctionne sous IE mais plus sous Firefox, je vais devenir ch�vre...

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Formulaire et ajout de lignes dynamiques.</title>
<style type="text/css">
/* <![CDATA[ */
body {background-color: #ece9d8; color: #000}
/* GENERAL FORMS */
select {width: 180px;  border: 1px solid #cccccc;  font-size: 12px;  font-family: arial;}
/* ]]> */
</style>
<script type="text/javascript">
//<![CDATA[
function ajoutLigne_f2(x)
{
    x++;
    var insert = document.getElementById('ligne_f2');
    var familleProduits    = new Array('-1', 'ADJUVANTS', 'ENGRAIS AZOTES', 'ENGRAIS BINAIRE ET TERNAIRE',
                                       'ENGRAIS BULK', 'ENGRAIS OLIGO-ELEMENT', 'ENGRAIS ORGANIQUE',
                                       'ENGRAIS SIMPLE', 'FONGICIDES', 'HERBICIDES BETTERAVES',
                                       'HERBICIDES CEREALES', 'HERBICIDES DIVERS', 'HERBICIDES MAIS',
                                       'HERBICIDES PROT-OLEAG', 'INSECTICIDES AERIENS', 'INSECTICIDES DIVERS',
                                       'INSECTICIDES DU SOL', 'OLIGO-ELEMENTS', 'REGULATEURS', 'SEMENCES BLE',
                                       'SEMENCES BLES DUR', 'SEMENCES COLZA', 'SEMENCES FEVEROLE',
                                       'SEMENCES MAIS', 'SEMENCES ORGE HIVERS', 'SEMENCES ORGE PRINTEMPS',
                                       'SEMENCES POIS', 'SEMENCES TOURNESOL');
    var familleProduitval  = new Array('_', 'ADJUVANTS', 'ENGRAIS AZOTES',
                                       'ENGRAIS BINAIRE ET TERNAIRE', 'ENGRAIS BULK', 'ENGRAIS OLIGO-ELEMENT',
                                       'ENGRAIS ORGANIQUE', 'ENGRAIS SIMPLE', 'FONGICIDES',
                                       'HERBICIDES BETTERAVES', 'HERBICIDES CEREALES', 'HERBICIDES DIVERS',
                                       'HERBICIDES MAIS', 'HERBICIDES PROT-OLEAG', 'INSECTICIDES AERIENS',
                                       'INSECTICIDES DIVERS', 'INSECTICIDES DU SOL', 'OLIGO-ELEMENTS',
                                       'REGULATEURS', 'SEMENCES BLE', 'SEMENCES BLES DUR',
                                       'SEMENCES COLZA', 'SEMENCES FEVEROLE', 'SEMENCES MAIS',
                                       'SEMENCES ORGE HIVERS', 'SEMENCES ORGE PRINTEMPS', 'SEMENCES POIS',
                                       'SEMENCES TOURNESOL');
    var stadeFertilIndex   = new Array('_', '2N', '3F', 'AS', 'AV', 'DE', 'DM', 'E', 'G', 'PT', 'S', 'T');
    var stadeFertilValeurs = new Array('_', 'deux noeuds', 'trois feuilles', 'Après semis', 'Avant semis', 'Début épiaison', 'Dédbut montaison', 'Epiaison', 'Gonflement', 'Plein tallage', 'Semis', 'Tallage');
    var indicateur         = new Array('_', 'Azotés', 'Jubil', 'PK Fast', 'Reliquats');
    /* La nouvelle ligne */
    var nouvelleLigne = document.createElement('tr');
    /* Insertion des éléments les uns dans les autres */
    var nligne = insert.appendChild(nouvelleLigne);
    /* création des éléments pour chaque cellule */
    /* Cellule 1 */
    var cell_1        = document.createElement('td');
    var ncel_1 = nligne.appendChild(cell_1);
    var elt_11        = document.createElement('select');
    ncel_1.appendChild(elt_11);
    //var evt_1 = "ajoutLigne_f2("+ x +");";
    //nelt_11.setAttribute("onchange", evt_1);
    elt_11.setAttribute('onchange', function(){ajoutLigne_f2(x);});
    elt_11.setAttribute("id", "FamilleProduit"+ x);
    elt_11.setAttribute("name", "FamilleProduit[]");
    elt_11.setAttribute("class", "");
    var nbOptions11   = familleProduits.length;
    var sselt_11      = new Array;
    for(var o11 = 0; o11 < nbOptions11; o11++)
    {
        sselt_11[o11] = document.createElement('option');
        elt_11.appendChild(sselt_11[o11]);
        sselt_11[o11].setAttribute("value", familleProduits[o11]);
        sselt_11[o11].appendChild(document.createTextNode(familleProduitval[o11]));
    }
}
//]]>
</script>
  </head>
  <body>
    <form action="" method="post" id="f2">
      <table summary="">
        <tbody id="ligne_f2">
          <tr>
            <td>
              <select class="" name="FamilleProduit[]" id="FamilleProduit0" onchange="ajoutLigne_f2(0);">
                <option value='-1'>_</option>
                <option value="ADJUVANTS">ADJUVANTS</option>
                <option value="ENGRAIS AZOTES">ENGRAIS AZOTES</option>
                <option value="ENGRAIS BINAIRE ET TERNAIRE">ENGRAIS BINAIRE ET TERNAIRE</option>
                <option value="ENGRAIS BULK">ENGRAIS BULK</option>
                <option value="ENGRAIS OLIGO-ELEMENT ">ENGRAIS OLIGO-ELEMENT</option>
                <option value="ENGRAIS ORGANIQUES">ENGRAIS ORGANIQUES</option>
                <option value="ENGRAIS SIMPLE">ENGRAIS SIMPLE</option>
                <option value="FONGICIDES">FONGICIDES</option>
                <option value="HERBICIDES BETTERAVES">HERBICIDES BETTERAVES</option>
                <option value="HERBICIDES CEREALES">HERBICIDES CEREALES</option>
                <option value="HERBICIDES DIVERS">HERBICIDES DIVERS</option>
                <option value="HERBICIDES MAIS">HERBICIDES MAIS</option>
                <option value="HERBICIDES PROT-OLEAG">HERBICIDES PROT-OLEAG</option>
                <option value="INSECTICIDES AERIENS">INSECTICIDES AERIENS</option>
                <option value="INSECTICIDES DIVERS">INSECTICIDES DIVERS</option>
                <option value="INSECTICIDES DU SOL">INSECTICIDES DU SOL</option>
                <option value="OLIGO-ELEMENTS">OLIGO-ELEMENTS</option>
                <option value="REGULATEURS">REGULATEURS</option>
                <option value="SEMENCES BLE ">SEMENCES BLE</option>
                <option value="SEMENCES BLES DUR">SEMENCES BLES DUR</option>
                <option value="SEMENCES COLZA">SEMENCES COLZA</option>
                <option value="SEMENCES FEVEROLE">SEMENCES FEVEROLE</option>
                <option value="SEMENCES MAIS">SEMENCES MAIS</option>
                <option value="SEMENCES ORGE HIVERS">SEMENCES ORGE HIVERS</option>
                <option value="SEMENCES ORGE PRINTEMPS ">SEMENCES ORGE PRINTEMPS</option>
                <option value="SEMENCES POIS">SEMENCES POIS</option>
                <option value="SEMENCES TOURNESOL">SEMENCES TOURNESOL</option>
              </select>
            </td>
          </tr>
        </tbody>
      </table>
    </form>
  </body>
</html>

J'ai simplifi� � l'extr�me et int�gr� les JavaScript pour rendre �a plus facile � suivre dans une seule page...

[Edit] J'ai trop simplifi�, j'en ai oubli� mon param�tre..., je recommence, j'arrive, excusez-moi

[/Edit]
[Edit 2]code �dit� et remis en ordre avec param�tre et incr�mentation normale.[/Edit]

**FremyCompany** · 15/04/2006, 11h32

La fonction n'est pas appel�e directement, c'est un �v�nement, donc "y" a d�j� �t� supprim� de la m�moire (la fonction s'�tant arr�t�e)... il aurait fallu mettre y en global pour qu'il accessible.
C'est comme ceci :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
function changeclass(objid, classname)
{
   setTimeOut("document.getElementById(objid).class = classname",100);
}

Ca ne marchera jamais sur un interpr�teur digne de ce nom. Or le principe est semblable.

**Cyrano** · 15/04/2006, 12h22

Bon, j'ai fini par trouver une mani�re de proc�der. COmme �a pourrait �ventuellement servir, je met le bout de code ici.

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
//...
    var isExplorer = (navigator.userAgent.toLowerCase().indexOf('msie')!=-1) ? true : false;
    if(isExplorer == false)
    {
        elt_11.setAttribute('onchange', 'ajoutLigne_f2('+ x +');');
    }
    else
    {
        elt_11.setAttribute('onchange', function(){ajoutLigne_f2(x);});
    }
//...

Si quelqu'un voit une objection technique � ce syst�me, je suis ouvert aux observations

Merci pour les r�ponses � tous.

++
Cyrano

**Cyrano** · 15/04/2006, 12h58

Petit ajout : effectivement, certains navigant sous Opera se font identifier comme IE... ce qui fout en l'air mon petit montage : mais Opera �tant malgr� tout indqu�, j'ai rajout� un petit test suppl�mentaire :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

var isExplorer = ((navigator.userAgent.toLowerCase().indexOf('msie')!=-1) && (navigator.userAgent.toLowerCase().indexOf('opera') == -1)) ? true : false;

Et l�, tout baigne 8)

Joyeuses Paques tout le monde.

[DOM] DOM, setAttribut, �v�nements et IE...

JavaScript

Vue hybride

Discussions similaires

Partager

Partager