AJAX / Mise à jour de div
Bonjour, j'ai un code pourtant pas si compliqué mais qui semble ne pas fonctionner : il s'agit d'un tableau HTML dont les lignes sont filtrées et réaffichées avec Ajax lorsque l'on saisit des caractères dans un input correspondant à la colonne à filtrer (Equivalent du WHERE champ like 'abc%' SQL).
Voici le contenu du fichier XML de réponse (fo_filtrer.php), qui me renvoie les résultats attendus :
Code:
1
2
3
4
5
6
7
8
|
Header("content-type: text/xml");
$newContent .= '<?xml version="1.0" encoding="UTF-8"?>';
$newContent .= '<ajax-response>';
$newContent .= '<response type="element" id="d2">';
$newContent .= utf8_encode(fo_creer_corps($sql));
$newContent .= '</response>';
$newContent .= '</ajax-response>'; |
Je vous passe les détails de la fonction fo_creer_corps() qui me sert à sortir le fichier final (fo_filtrer.php) suivant :
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
|
<?xml version="1.0" encoding="UTF-8"?>
<ajax-response>
<response type="element" id="d2">
<tr id="tr_1" class="tr_paire">
<td id="td_1_0">
2185
</td>
<td id="td_1_1">
test
</td>
<td id="td_1_2">
2007-01-23
</td>
<td id="td_1_3">
2007-01-25
</td>
</tr>
<tr id="tr_2" class="tr_impaire">
<td id="td_2_0">
2186
</td>
<td id="td_2_1">
test2
</td>
<td id="td_2_2">
2002-01-16
</td>
<td id="td_2_3">
2002-01-18
</td>
</tr>
</response>
</ajax-response> |
Et voici le fichier index.php qui ne fonctionne pas :
(je précise que les alert(); placés dans le code pour vérification s'exécutent bien, la fonction javascript fo_filtrer est donc bien appelée)
Je place aussi la réponse dans le div d2 au lieu du div d1 pour mieux débugger et les détails de l'implémentation sont omis pour une meilleure visibilité.
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
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Tableau AJAX</title>
<script src="rico2rc2/src/prototype.js" type="text/javascript"></script>
<script src="rico2rc2/src/rico.js" type="text/javascript"></script>
<script type="text/javascript">
function registerStuff()
{
alert('ok1');
ajaxEngine.registerRequest('fo_filtrer','http://localhost/AJAXX/fo_filtrer.php');
ajaxEngine.registerAjaxElement('d2');
}
function fo_filtrer()
{
alert('ok2');
//Envoyer le formulaire form_filtre
//document.form_filtre.action='fo_filtrer.php';
//document.form_filtre.submit();
ajaxEngine.sendRequest('fo_filtrer');
}
</script>
</head>
<body onLoad="registerStuff()">
<div id="d1">
<table id="table1" cellspacing="0" border="1" width="800px">
<thead>
<tr id="tr_0">
<th id="th_0" width="80px">ID</th>
<th id="th_1" width="80px">TITRE</th>
<th id="th_2" width="80px">DATE_DEBUT</th>
<th id="th_3" width="80px">DATE_FIN</th>
<tr id="tr_filtre">
<form id="form_filtre" name="form_filtre">
<td id="td_filtre0" name="td_filtre"><input id="input_filtre_value0" name="input_filtre_value0" type="text" onKeyUp="fo_filtrer()" />
<input id="input_filtre_name0" name="input_filtre_name0" type="hidden" value="IDFI_MANIF" /></td>
<td id="td_filtre1" name="td_filtre"><input id="input_filtre_value1" name="input_filtre_value1" type="text" onKeyUp="fo_filtrer()" />
<input id="input_filtre_name1" name="input_filtre_name1" type="hidden" value="TITRE" /></td>
<td id="td_filtre2" name="td_filtre"><input id="input_filtre_value2" name="input_filtre_value2" type="text" onKeyUp="fo_filtrer()" />
<input id="input_filtre_name2" name="input_filtre_name2" type="hidden" value="DATE_DEBUT" /></td>
<td id="td_filtre3" name="td_filtre"><input id="input_filtre_value3" name="input_filtre_value3" type="text" onKeyUp="fo_filtrer()" />
<input id="input_filtre_name3" name="input_filtre_name3" type="hidden" value="DATE_FIN" /></td>
</form>
<tr>
<thead>
<tbody id="table_body">
<span id="span_body">
<tr id="tr_1" class="tr_paire">
<td id="td_1_0">2185</td>
<td id="td_1_1">test</td>
<td id="td_1_2">2007-01-23</td>
<td id="td_1_3">2007-01-25</td>
</tr>
<tr id="tr_2" class="tr_impaire">
<td id="td_2_0">2150</td>
<td id="td_2_1">test3</td>
<td id="td_2_2">2002-01-16</td>
<td id="td_2_3">2002-01-18</td>
</tr>
</span>
</tbody>
<div id="res"></div>
</table>
</div>
<div id="d2"></div>
</body>
</html> |
J'espère que quelqu'un saura m'aider.
Merci d'avançe.
