affecter une fonction à un évènement
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:
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:
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:
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 .
