Discussion :

[Pragmateek]

Bonjour,

le but de ce script est de gérer une petite arborescence, pour cela chaque élément de l'arborescence possède un bouton qui invoque la fonction "f" en lui passant en paramètre l'id de l'élément qui l'invoque, puis demande au script PHP la sous-arborescence correspondant à cet élément .
Enfin il construit à l'aide de "div" l'arborescence HTML correspondante .

Voilà le problème :
impossible d'associer aux nouveaux boutons générés dans la boucle "for" l'appel à la fonction "f" avec leur id en paramètre .
En effet avec ce 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
<script type="text/javascript">
        function f(element_id)
        {
                alert('f : ' + element_id);
                var str = 'element=' + element_id;
                var xhr = new XMLHttpRequest();
 
                xhr.onreadystatechange = function(){handler(xhr, element_id)};
                xhr.open('POST', 'http://127.0.0.1/test.php');
                xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
                xhr.setRequestHeader('Content-length', str.length);
                xhr.setRequestHeader('Connection', 'close');
                xhr.send(str);
        }
 
        function handler(xhr, element_id)
        {
                if (xhr.readyState == 4)
                {
                        var data = xhr.responseXML.documentElement;
                        alert(data.nodeName);
                        if (data.nodeName == 'database')
                        {
                                var tables = data.getElementsByTagName('table');
                                for (var i = 0; i < tables.length; i++)
                                {
                                        var div = '';
                                        var table_name = tables[i].getAttribute('name');
                                        div += '<div id="table_' + table_name + '" >\n';
                                        div += '| ' + '<input type="button" id="button_table_' + table_name + '" \/>\n';
                                        div += '</div>\n';
                                        document.getElementById(element_id).innerHTML += div;
                                        alert('button_table_' + table_name);
                                        document.getElementById('button_table_' + table_name).onclick = function(){f('table_' + table_name)};
                                }
                        }
                }
        }
</script>
 
<div id="database_test">
<input type="button" id="button_database_test" />
</div>

seul le dernier bouton invoque la fonction "f", les autres restent inactifs .

De plus en mettant l'assignation des évènements en dehors de la boucle "for" ainsi :

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
<script type="text/javascript">
        function f(element_id)
        {
                alert('f : ' + element_id);
                var str = 'element=' + element_id;
                var xhr = new XMLHttpRequest();
 
                xhr.onreadystatechange = function(){handler(xhr, element_id)};
                xhr.open('POST', 'http://127.0.0.1/test.php');
                xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
                xhr.setRequestHeader('Content-length', str.length);
                xhr.setRequestHeader('Connection', 'close');
                xhr.send(str);
        }
 
        function handler(xhr, element_id)
        {
                if (xhr.readyState == 4)
                {
                        var data = xhr.responseXML.documentElement;
                        alert(data.nodeName);
                        if (data.nodeName == 'database')
                        {
                                var tables = data.getElementsByTagName('table');
                                for (var i = 0; i < tables.length; i++)
                                {
                                        var div = '';
                                        var table_name = tables[i].getAttribute('name');
                                        div += '<div id="table_' + table_name + '" >\n';
                                        div += '| ' + '<input type="button" id="button_table_' + table_name + '" \/>\n';
                                        div += '</div>\n';
                                        document.getElementById(element_id).innerHTML += div;
                                }
                                for (var i = 0; i < tables.length; i++)
                                {
                                        var table_name = tables[i].getAttribute('name');
                                        alert('id : ' + 'button_table_' + table_name + '\nparametre : ' + 'table_' + table_name);
                                        document.getElementById('button_table_' + table_name).onclick = function(){f('table_' + table_name)};
                                }
                        }
                }
        }
</script>
 
<div id="database_test">
<input type="button" id="button_database_test" />
</div>

Tous les boutons sont actifs mais font tous appel à la fonction "f" avec comme paramètre l'id du dernier élément créé .

Voilà le code du script PHP :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<?php
header('Content-Type: text/xml');
echo '<?xml version="1.0"?>' . "\n";
if ($_POST['element'] == 'database_test')
{
        echo '<database>';
        $str = '<table name="toto" /><table name="titi" /><table name="tutu" />';
        echo $str;
        echo '</database>' . "\n";
}
?>

Merci .

[SpaceFrog]

j'ai du coller un truc dans la FAQ là dessus ...

ha ben oui voilà :
http://javascript.developpez.com/faq...lick.dynamique

[madevilts]

Perso je ferais :

Code :

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

document.getElementById('button_table_' + table_name).onclick = function(){f('table_' + this.id.substr(13)};]

this.id représente "button_table_valeurtable_name", donc on fait un substr et on obtient "valeurtable_name"

Lors d'un stockage de fonction comme tu le fais, 'table_'+table_name ne se concatène pas au stockage, la fonction est stocké tel quel, du coup à l'exécution elle prend la valeur courante de table_name.

[SpaceFrog]

par exemple,
ou comme proposé dasn, la FAQ, rajouter une propriété à l'objet et l'appeler par this.propriété dans l'appel de fonction

[Pragmateek]

Merci à vous deux, vos solutions fonctionnent .

Voici le code final qui s'inspire de l'exemple de la FAQ pour la création des éléments "div", "button" et "text" :

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
for (var i = 0; i < tables.length; i++)
{
        var div = document.createElement('DIV');
        var button = document.createElement('INPUT');
        var text = document.createElement('TEXT');
 
        var table_name = tables[i].getAttribute('name');
 
        div.id = 'table_' + table_name;
        div.innerHTML = '|--';
 
        button.setAttribute('type', 'button');
        button.setAttribute('id', 'button_' + div.id);
        button.setAttribute('onclick', function(){f(this.getAttribute('id').substr(7));});
        button.onclick = function(){f(this.id.substr(7));}
 
        div.appendChild(button);
 
        text.textContent = table_name;
 
        div.appendChild(text);
 
        document.getElementById(element_id).appendChild(div);
}

Une dernière question :
pourquoi la ligne :

Code :

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

button.setAttribute('onclick', function(){f(this.id.substr(7));});

?

En la commentant tout fonctionne de la même façon .
Certains navigateurs ne tiennent compte que de l'attribut "onclick" de la balise ?

Merci .

[SpaceFrog]

Personnellement pour plsu de compatibilité j'utiliserais la syntaxe suivante:

Code :

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

button.onclick= function(){f(this.id.substr(7));};

et ceci d'ailleurs également pour toutes les autres propriétés ...

[madevilts]

Personnellement pour plsu de compatibilité j'utiliserais la syntaxe suivante:

Code :

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

button.onclick= function(){f(this.id.substr(7));};

et ceci d'ailleurs également pour toutes les autres propriétés ...

Pareil. passer par un getAttribute ou setAttribute ne sert à rien.

[SpaceFrog]

Pareil. passer par un getAttribute ou setAttribute ne sert à rien.

je n'irais pas jusque là pour getAttribute qui peut dasn certains cas s'avérer utile pour une propriété not hasOwnProperty dans la balise au départ ...

Mais setAttribute c'est un nid à ennuis

[Pragmateek]

Quels problèmes peut poser l'utilisation de "setAttribut" ?

Est-ce que "setAttributeNS" les résout ?

[SpaceFrog]

Principalement des problèmes de compatibilité...

pourquoi se compliquer l'existance avec des syntaxes différentiées par naviagteur alors que la syntaxe donnée précédemment marche partout ! ??

[madevilts]

je n'irais pas jusque là pour getAttribute qui peut dasn certains cas s'avérer utile pour une propriété not hasOwnProperty dans la balise au départ ...

Mais setAttribute c'est un nid à ennuis

Exact. J'essai autant que possible de n'utiliser aucune des 2 car j'avais lu que ce n'était supporté que par IE. J'ai du faire l'amalgame.