Discussion :

[WeDgEMasTeR]

Bonjour!
En me fiant aux tutos disponible sur le site, j'ai commencé a écrire un code pour que ma liste de membre connecté soit automatiquement actualisé toute les x seconde sans rafraichissement de la page.

J'ai donc fait la partie php->XML.
J'ai créé quelque chose de ce type:

<lastseen>

<user>

<user_id>23</user_id>
<user_name>toto</user_name>
<time>8h</time>

</user>

<user>

<user_id>14</user_id>
<user_name>toto2</user_name>
<time>9h</time>

</user>

</lastseen>

Mais après pour afficher en une liste, j'y arrives pas, rien s'affiche.
J'ai écris ce code ci-dessous, toujours en m'inspirant du tutorial...

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
 
<script language='javascript' type='text/javascript'>
 
	function ajax()
	{
    var xhr=null;
 
    if (window.XMLHttpRequest) { 
        xhr = new XMLHttpRequest();
    }
    else if (window.ActiveXObject) 
    {
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }
    //on définit l'appel de la fonction au retour serveur
    xhr.onreadystatechange = function() { affichage_ajax(xhr); };
 
    //on appelle le fichier reponse.txt
    xhr.open('GET', 'mon_url_xml', true);
    xhr.send(null);
}
 
 
function affichage_ajax(xhr)
{
    if (xhr.readyState==4) 
    {
    	var docXML= xhr.responseXML;
    	var items = docXML.getElementsByTagName('user')
    	var html     = ''; /* Présentation HTML de la liste des connectés */
		/* Nombre de membre a afficher */
		count        = items.length;
		for(i = 0; i < count; i++) { /* POUR CHAQUE item */
			html += '<table cellpadding="0" cellspacing="0" width="100%">';
    		html += '<tr>
<td class="side-small" align="left"><img src="../themes/fusion/images/bullet.gif" alt="">
';
   			html += '<a href="../profile.php?lookup=' + items[i].getElementsByTagName("user_id")[0].firstChild.nodeValue + '" ';
			html += 'title="' + items[i].getElementsByTagName("user_name")[0].firstChild.nodeValue + '" class="side">
';
   			html += items[i].getElementsByTagName("user_name")[0].firstChild.nodeValue + '</a></td>';
			html += '<td class="side-small" align="right">' + items[i].getElementsByTagName("time")[0].firstChild.nodeValue + '</td>
</tr>
"';
			html += '</table>';
		}
		document.getElementById('content').innerHTML += html;
    }
}
 
ajax();
</script>
<table cellpadding='0' cellspacing='0' width='100%'>
    <tr>
        <td class='scapmain'>Last Seen Users</td>
    </tr>
    <tr>
        <td class='side-body'>
<div id='content'></div>
        </td>
    </tr>
</table>

Je suis completement débutant, et j'essais de commencer par un truc simple pour apprendre.

Et par ailleurs je voudrais savoir comment mettre à jour automatiquement la liste?

merci d'avance!


update: Bon j'arrive à afficher, mais maintenant j'aimerai une mise ajour automatique et que ca soit compatible opera car ca ne lai pas.
comment faire ?

[lodan]

Bonsoir,

Quel tuto as-tu utilisé ?

Quand appels-tu ajax ou affichage_ajax dans ton html ?

[WeDgEMasTeR]

celui là http://gael-donat.developpez.com/web/intro-ajax/

et un autre aussi.
M'enfin maintenant ca s'affiche très bien.
C'est que dans les html += .... j'avais laissé des \n qui me fesait bugé et donc rien ne s'affichait.

Maintenant ce que je voudrai, c'est pouvoir actualisé automatiquement le code. Je sais pas trop comment faire. Et puis j'aimerai rendre compatible avec opera car là cela marche que sur ie et firefox.

[lodan]

Si tu veux exécuter ton code en permance, il faut mettre un onload dans ton body.

Après tu peux temporiser.

Pour opéra, il faut être en version 8 minimum.

[WeDgEMasTeR]

Voilà mon code corriger et j'ai ajouté window.onload=ajax; pour lexecuter.

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
<script language='javascript' type='text/javascript'>
 
	function ajax()
	{
    var xhr=null;
 
    if (window.XMLHttpRequest) { 
        xhr = new XMLHttpRequest();
    }
    else if (window.ActiveXObject) 
    {
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }
    //on définit l'appel de la fonction au retour serveur
    xhr.onreadystatechange = function() { affichage_ajax(xhr);};
 
    //on appelle le fichier reponse.txt
    xhr.open('GET', 'http://www...mon adresse../reponse.php', true);
    xhr.send(null);
}
 
 
function affichage_ajax(xhr)
{
    if (xhr.readyState==4) 
    {
    	var docXML= xhr.responseXML;
    	var items = docXML.getElementsByTagName('user')
    	var html     = ''; /* Présentation HTML de la liste des connectés */
		/* Nombre de membre a afficher */
		count        = items.length;
 
	html += '<table cellpadding="0" cellspacing="0" width="100%">';
 
		for(i = 0; i < count; i++) { 	
    		html += '<tr><td class="side-small" align="left"><img src="../themes/fusion/images/bullet.gif" alt="">';
   			html += '<a href="../profile.php?lookup=' + items[i].getElementsByTagName("user_id")[0].firstChild.nodeValue + '" ';
			html += 'title="' + items[i].getElementsByTagName("user_name")[0].firstChild.nodeValue + '" class="side">';
   			html += items[i].getElementsByTagName("user_name")[0].firstChild.nodeValue + '</a></td>';
			html += '<td class="side-small" align="right">' + items[i].getElementsByTagName("time")[0].firstChild.nodeValue + '</td></tr>';		
		}
		html += '</table>';
		document.getElementById('lastseen').innerHTML += html;	
    }	
}
 
window.onload=ajax;
</script>
<table cellpadding='0' cellspacing='0' width='100%'>
    <tr>
        <td class='scapmain'>Last Seen Users</td>
    </tr>
    <tr>
        <td class='side-body'>
<div id='lastseen'></div>
        </td>
    </tr>
</table>

Mais je sais pas executer en permanence le code.
Et j'ai opera 9.20 et rien ne s'affiche :/

[lodan]

Tu places ceci à la fin de ajax

Code :

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

setTimeout("ajax()",1000);

J'ai mis 1000, mais à toi de mettre le temps que tu veux

Pour Opera que te dis la console javascript ?

Utilises-tu un outils comme firebug pour voir le Dom ?