fonction expand() : attribuer un onClick
Bonjour,
J'ai un problème pour attribuer dynamiquement un évènement onClick sur un noeud créé lui aussi dynamiquement.
Voici le code :
Code:
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
| function expand(id,type)
{
var xhr = getXhr();
// On définit ce qu'on va faire quand on aura la réponse
xhr.onreadystatechange = function()
{
// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
if(xhr.readyState == 4 && xhr.status == 200)
{
var resp = xhr.responseText;
var tabResult;
//IL FAUT EVALUER LE RESP !!
alert(resp);
eval(resp);
if (tabResult.length > 0)
{
//On ajoute un noeud de liste
var newUl = document.createElement("menu");
newUl.id = "ul-"+id;
newUl.style.listStyleType = 'none';
//Pour chaque sous-élément, on ajoute un élément à la liste
for(i=0;i<tabResult.length;i++)
{
var newLi = document.createElement("li");
newLi.id = id+"-typ."+tabResult[i][0];
var liText = document.createTextNode(" "+tabResult[i][1]);
//Si on est pas au dernier niveau; on affiche un 'plus' devant l'item
if (type == 'projet')
{
var plus = document.createElement("img");
plus.src = "../res/exp_plus.gif";
plus.onClick = expand(newLi.id,"type_veh");
newLi.appendChild(plus);
}
newLi.appendChild(liText);
newUl.appendChild(newLi);
}
var loc = document.getElementById(id);
alert(newUl.id);
loc.appendChild(newUl);
//On change le 'plus' en 'moins'
var moins = document.createElement("img");
moins.src = "../res/exp_minus.gif";
loc.replaceChild(moins,loc.firstChild);
loc.firstChild.onClick = collapse(loc.id);
}
}
}
// Ici on va voir comment faire du post
xhr.open("POST","ajaxArbo.php",true);
// ne pas oublier ça pour le post
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// ne pas oublier de poster les arguments
alert("id="+id+"&type="+type);
xhr.send("id="+id+"&type="+type);
} |
voici le bout de code ou j'affiche mon premier niveau de la liste, au chargement de la page :
Code:
1
2
3
4
5
6
7
8
9
10
11
| <?php
$query = "SELECT id_proj,projet FROM projets ORDER BY projet";
$result = mysql_query($query);
echo "<menu id='main' name='main' style=\"list-style-type:none\">";
while ($tab = mysql_fetch_array($result))
{
echo "<li id='proj.".$tab['id_proj']."'><img src='../res/exp_plus.gif' alt='plus' onClick='expand(\"proj.".$tab['id_proj']."\",\"projet\")'/> ".$tab['projet']."</li>";
}
echo "</menu>";
?> |
J'arrive bien à passer les paramètres en utilisant des variables locales de la fonction qui créé les noeuds, mais les fonctions associées aux onClick sont directement exécutées.
En clair, quand je clique sur mon 'plus' pour dérouler un niveau, il se referme aussitôt..
J'ai essayé de déclarer mes onclick de cette façon :
Code:
plus.onClick = function () {expand(newLi.id,"type_veh");};
mais ça ne fonctionne pas...
En bref, j'aimerais savoir pourquoi mes fonctions attribuées aux onClick sont exécutées directement, et si vous avez une solution pour y remédier.
Merci
Nouveau code qui fonctionne sur FF
Bonjour,
J'ai remanié un peu mon code et j'arrive à quelquechose qui fonctionne sous Firefox, mais impossible de le faire marcher sous IE6...
Code:
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
|
function expand(id)
{
var reg = new RegExp("[-]+", "g");
var tableau = id.split(reg);
var type;
if (tableau.length == 1)
type = 'projet';
else if (tableau.length == 2)
type = 'type_veh';
var xhr = getXhr();
// On définit ce qu'on va faire quand on aura la réponse
xhr.onreadystatechange = function()
{
// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
if(xhr.readyState == 4 && xhr.status == 200)
{
var resp = xhr.responseText;
var tabResult;
//IL FAUT EVALUER LE RESP !!
eval(resp);
if (tabResult.length > 0)
{
//On ajoute un noeud de liste
var newUl = document.createElement("menu");
newUl.id = "ul-"+id;
newUl.style.listStyleType = 'none';
//Pour chaque sous-élément, on ajoute un élément à la liste
for(i=0;i<tabResult.length;i++)
{
var newLi = document.createElement("li");
if (type == 'projet')
newLi.id = id+"-typ."+tabResult[i][0];
else if (type == 'type_veh')
newLi.id = id+"-veh."+tabResult[i][0];
var liText = document.createTextNode(" "+tabResult[i][1]);
//Si on est pas au dernier niveau; on affiche un 'plus' devant l'item
if (type == 'projet')
{
var plus = document.createElement("img");
plus.src = "../res/exp_plus.gif";
plus.alt = "plus";
//Cette méthode semble adaptée à FF, ça marche
plus.setAttribute("onClick","expand(this.parentNode.getAttribute(\"id\"))");
newLi.appendChild(plus);
//Celle-ci est plus ou moins interprétée par IE mais expand() est exécutée directement..
//newLi.firstChild.onClick = expand(this.parentNode.getAttribute('id'));
}
newLi.appendChild(liText);
newUl.appendChild(newLi);
}
var loc = document.getElementById(id);
loc.appendChild(newUl);
//On change le 'plus' en 'moins'
var moins = document.createElement("img");
moins.src = "../res/exp_minus.gif";
moins.alt = "moins";
moins.setAttribute("onclick","collapse(this.parentNode.getAttribute(\"id\"))");
loc.replaceChild(moins,loc.firstChild);
//loc.firstChild.onClick = collapse(loc.id);
}
}
}
// Ici on va voir comment faire du post
xhr.open("POST","ajaxArbo.php",true);
// ne pas oublier ça pour le post
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// ne pas oublier de poster les arguments
xhr.send("id="+id+"&type="+type);
}
function collapse(id)
{
var loc = document.getElementById(id);
loc.removeChild(loc.lastChild);
//On change le 'moins' en 'plus'
var plus = document.createElement("img");
plus.src = "../res/exp_plus.gif";
plus.alt = "plus";
plus.setAttribute("onClick","expand(this.parentNode.getAttribute(\"id\"))");
loc.replaceChild(plus,loc.firstChild);
} |
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <body>
<?php
$query = "SELECT id_proj,projet FROM projets ORDER BY projet";
$result = mysql_query($query);
echo "<menu id='main' name='main' style=\"list-style-type:none\">\n";
while ($tab = mysql_fetch_array($result))
{
echo "<li id='proj.".$tab['id_proj']."'><img src='../res/exp_plus.gif' alt='plus' onClick='expand(this.parentNode.getAttribute(\"id\"))'/> ".$tab['projet']."</li>\n";
}
echo "</menu>";
?>
</body> |
Auriez-vous des indications sur l'interprétation de setAttribute par Internet Explorer ou de l'attribution dynamique d'attribut onClick avec une fonction avec paramètres ??
