AJAX / Mise à jour de div

**bastiencb** · 24/06/2008, 16h22

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 :

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

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 :

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

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
 
<!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.

**E.Bzz** · 24/06/2008, 18h09

Bonjour,
il s'agit vraisemblablement du récurent problème de cache (sous IE).

Ajoute un timestamp (paramètre variable, ex : date en ms) à l'url appelée par Ajax, pour forcer la rafraîchissement du cache ...
Sinon, voir les entête PHP "no-cache".

Pour plus de précisions, une petite recherche s'impose

A+

AJAX / Mise à jour de div

Bibliothèques & Frameworks

Discussions similaires

Partager

Partager