[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

Discussions similaires

Partager

Partager