[AJAX] Mise en forme : periodical updater
bonjour, j'ai suivi une partie du tuto consacré à ajax. J'ai besoin dans mon appli de mettre à jour des champs issus d'une base de données. Sans le lancement de de periodical updater je n'ai aucun problème (génération XML récupération des données, insertion dans html dans une div (génération des balises html pour la présentation) style :
titre :
nom :
prenom :
titre :
nom :
prenom :
Lorsque que j'utilise periodical updater la mise en forme disparait et toutes données sont affichées à la suite.
Comment concerver la mise en forme ?
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
| setInterval("getXMLHttpRequest()", 200 );
var xhr = getXMLHttpRequest();
xhr.onreadystatechange = handleHttpResponse;
var url = "../ajax/reponse.php";
o_options = new Object();
o_options = {method:'get',frequency:1};
xhr.open("GET", url, true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(null);
function handleHttpResponse() {
if(xhr.readyState == 4 && xhr.status == 200) {
response = cleanXML(xhr.responseXML.documentElement);
response =new Ajax.PeriodicalUpdater('content',url,o_options);
/* R�cuperer la liste des items donc la liste des DVD */
var items = response.getElementsByTagName("item");
var html = ''; /* Pr�sentation HTML de la liste des DVD */
/* Nombre de DVD */
count = items.length;
for(i = 0; i < count; i++) { /* POUR CHAQUE item */
html += '<h1>' + items[i].getElementsByTagName("title")[0].firstChild.nodeValue + '</h1>';
html += '<table class="item"><tr><th>absent</th><th>retard</th><th>present</th></tr>';
html += '<tr><td>' + items[i].getElementsByTagName("absent")[0].firstChild.nodeValue + '</td>';
html += '<td>' + items[i].getElementsByTagName("retard")[0].firstChild.nodeValue + ' </td>';
html += '<td>' + items[i].getElementsByTagName("present")[0].firstChild.nodeValue + ' </td></tr>';
html += '</table>';
}
document.getElementById('content').innerHTML += html;
}
} |
