fonction expand() : attribuer un onClick

**pc.bertineau** · 22/03/2007, 15h15

Bonjour,

J'ai un problème pour attribuer dynamiquement un évènement onClick sur un noeud créé lui aussi dynamiquement.

Voici le code :

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
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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**pc.bertineau** · 23/03/2007, 09h04

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 :

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
		
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 :

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
<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 ??

**SpaceFrog** · 23/03/2007, 09h17

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

onclick

**pc.bertineau** · 23/03/2007, 09h36

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
//plus.setAttribute("onclick","expand(this.parentNode.getAttribute(\"id\"))");
plus.onclick = expand(newLi.id);
newLi.appendChild(plus);

j'ai testé les deux méthodes avec le 'c' au lieu de 'C'. IE ne veut toujours pas du set Attribute mais avec plus.onclick = ....., j'ai une erreur du type "Non implémenté".
Je crois que je n'ai plus qu'à essayer avec du innerHTML mais en général j'avais des pbs avec cette technique dès que je dépassais un niveau de profondeur avec mes requêtes SQL...

Sinon j'ai une petite question qui n'a rien à voir : sous IE, chaque erreur donne lieu à une boîte de dialogue qui indique la ligne, mais aussi la mention 'Car' : à quoi correspond-elle ?

**SpaceFrog** · 23/03/2007, 09h41

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

plus.onclick = function(){alert('tu vas y arriver!')

**pc.bertineau** · 23/03/2007, 09h57

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
plus.alt = "plus";
//plus.setAttribute("onclick","expand(this.parentNode.getAttribute(\"id\"))");
//plus.onclick = expand(newLi.id);
plus.onclick = function() {alert("que la force soit avec moi !")}
newLi.appendChild(plus);

ça marche, je sens un souffle nouveau m'animer !

maintenant faut que je réussisse à déclencher, non pas un alert mais ma fonction expand() avec le paramètre en question..

merci !

**SpaceFrog** · 23/03/2007, 10h00

ça ne devrait pas poser de souci cette syntaxe autorise les fonctions avec paramètres ...

**pc.bertineau** · 23/03/2007, 10h01

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

plus.onclick = function() {expand(this.parentNode.getAttribute('id'))}

ça marche nickel ! Merci beaucoup

**SpaceFrog** · 23/03/2007, 10h07

Juste une précision sur cette syntaxe le seul souci que tu puisses rencontrer c'est lorsque il faut attribuer une à des objets dasn une boucle avec un paramètre qui s'incrémente avec la boucle en general l'erreur calssique est de coller directement le paramètre incrémenté dans la fonction...
Le resultat est que tous les objets se retrouvent avec en paramètre la dernière valeur de la boucle ...
SI tu rencontre ce souci un jour reviens donc nous voir

tiens l'essone ... j'y habitais dans ma jeunesse

**pc.bertineau** · 23/03/2007, 10h23

j'ai pas mal hésité (et testé) entre passer mes valeurs par valeur en dur ou par référence... la complexité augmente, ça commence à devenir intéressant

au plaisir !

**SpaceFrog** · 23/03/2007, 10h26

ha voilà une journée qui commence bien ...
quelqu'un vient à nouveau d'ouvrir les yeux sur le fait que javascript EST INETRESSANT

fonction expand() : attribuer un onClick

JavaScript

Discussions similaires

Partager

Partager