11548 sujets

JavaScript, DOM et API Web HTML5

Actualiser un DIV avec AJAX , mais sous condition

Salut à tous ,
Ce que je veux faire est simple à expliquer :

J'utilise pour l'instant ce code AJAX :

<script>
function refresh_div()
{
var xhr_object = null;
if(window.XMLHttpRequest)
{ // Firefox
xhr_object = new XMLHttpRequest();
}
else if(window.ActiveXObject)
{ // Internet Explorer
xhr_object = new ActiveXObject('Microsoft.XMLHTTP');
}
var method = 'POST';
var filename = 'affichage.php';
xhr_object.open(method, filename, true);
xhr_object.onreadystatechange = function()
{
if(xhr_object.readyState == 4)
{
var tmp = xhr_object.responseText;
document.getElementById('mon_div').innerHTML = tmp;
}
}
xhr_object.send(null);
setTimeout('refresh_div()', 5000);
}
</script>


Qui affiche la page dans cette DIV :



<body onload='refresh_div();'>
<div id='mon_div'>
</div> 

</body>


Ma page de traitement qui affiche les messages s'appelle : affichage.php
C'est juste une page qui liste une base de données

Cela fonctionne tres bien

Alors , ce que je veux faire , c'est d'actualiser mon DIV , que si il y a un nouveau message dans la base de données car avec mon exemple , la div est actualisé toutes les 5 secondes et sans interruption .

Pour ce faire , je choisis par exemple de compter le nombre d'enregistrement , et d'actualiser la DIV que si le nombre d'enregistrement à changé .
Pour l'exemple , soit $nb_lignes le nombre d'enregistrement

Quelqu'un a une idée .
Merci de m'aider
Modifié par tidave (21 Oct 2007 - 12:13)
Modérateur
Bonjour et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code Javascript[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance. Smiley smile

upload/1-code.gif

Pour ton problème, plutôt que de compter le nombre d'enregistrements, tu peux mémoriser le résultat dans une variable globale puis n'actualiser le conteneur que si le résultat de la requête Ajax est différent de celui précédemment mémorisé.
Merci de la réponse, mais pourrais-je avoir un exemple concrêt car la , je seche un peu !

Merci d'avance
Modérateur
var sText = '';

function refresh_div()
{
    ...
    if(xhr_object.responseText != sText)
        document.getElementById('mon_div').innerHTML = sText = xhr_object.responseText;
    ...
}
Ok , mais comment je mets en place : comme ça ?

<script>

var sText = '';

function refresh_div()
{
var xhr_object = null;
if(window.XMLHttpRequest)
{ // Firefox
xhr_object = new XMLHttpRequest();
}
else if(window.ActiveXObject)
{ // Internet Explorer
xhr_object = new ActiveXObject('Microsoft.XMLHTTP');
}
var method = 'POST';
var filename = 'affichage.php';
xhr_object.open(method, filename, true);
xhr_object.onreadystatechange = function()
{
if(xhr_object.readyState == 4)
{
var tmp = xhr_object.responseText;

if(xhr_object.responseText != sText) {
        document.getElementById('mon_div').innerHTML = sText = xhr_object.responseText;}
    
}
}
xhr_object.send(null);
setTimeout('refresh_div()', 5000);
}
</script>


Et dans la page affichage.php je mets quoi ?

Désolé de t'embêter !
ça fonctionne comme ça on dirait , je verrais ça en test

Mais ça m'a pas l'air trop juste ce code , j'ai fait des bétises
Help me
Modérateur
Typiquement, tu pourrais faire une requête en get plutôt qu'en post.
Par ailleurs, ce serait bien de prévoir l'annihilation de la requête en cas d'absence de réponse ainsi que de vérifier le status de la requête avant de récupérer le résultat :
...
var oTimer = setTimeout(
	function()
	{
		if(xhr_object)
			return xhr_object.abort();
	},
	5000
);

xhr_object.onreadystatechange = function()
{
	if(xhr_object.readyState == 4)
		if(xhr_object.status && /200|304/.test(xhr_object.status))
		{
			clearTimeout(oTimer);
			...
Aussi, pourquoi crées-tu une variable tmp si tu ne t'en sers pas ? Dans ce cas, soit tu l'enlèves soit tu peux t'en servir dans les instructions suivantes.
Et pour finir, tu peux appeler ta fonction refresh_div par référence dans ton setTimeout :
setTimeout(refresh_div, 5000);
Bonjour

J'aimerai savoir si il est possible d'utliser le script sur plusieur id different avec different contenu?
Modérateur
Salut,

Il suffit de passer l'identifiant en argument de la fonction et de la lancer en passant ces id en tant que paramètre. Si les contenus diffèrent, ça peut se gérer au sein du fichier php en passant l'id en paramètre au moment de la requête, te permettant ainsi de renvoyer la réponse correspondante.

function refresh_div([#blue]sId[/#])
{
   ...
   document.getElementById([#blue]sId[/#]).innerHTML = sText = xhr_object.responseText;
   ...
   xhr_object.send('identifiant=' + [#blue]sId[/#]);
   ...
}
var aIds = ['riri', 'fifi', 'loulou'];
var iId = aIds.length;
do refresh_div(aIds[iId]);
while(iId > 0);
<?php

if(!empty($_POST['identifiant']))
   switch($_POST['identifiant']) {
      case 'riri':
         echo 'riri';
         break;
      case 'fifi':
         echo 'fifi';
         break;
      case 'loulou':
         echo 'loulou';
         break;
   }

?>
Sujet clos
Aller à