Probleme deRafraichissment d'une div

Signaler
Messages postés
498
Date d'inscription
lundi 24 août 2009
Statut
Membre
Dernière intervention
1 mars 2020
-
Messages postés
1771
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
20 novembre 2020
-
Bonjour,
je veux mettre en place un système de tchat .
je voudrais que lorsque quelqu'un reçois un message il soit informé par un infobulle . mais il se trouve que tant qu'on ne clique pas pour actualiser la page l'infobulle n appâtait pas . Alors je me suis dit qu'il fallai que cette partie se rafraichisse seul chaque 2 secondes. j'ai fouillé partout et j'ai eu un code mais ça ne fonctionne pas . pas de raafraichissement.
je vous le met pour avoir de l'aide merci d 'avance

page_ou_se_trouve_la_div.php

<div id="chat">

</div>
..............
code a afficher
...............


le script

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<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 = 'GET';

var filename = 'page_ou_se_trouve_la_div.php';

xhr_object.open(method, filename, true);

xhr_object.onreadystatechange = function()

{

if(xhr_object.readyState == 4)

{

var tmp = xhr_object.responseText;

document.getElementById('chat').innerHTML = tmp;

}

}

xhr_object.send(null);

setTimeout('refresh_div()', 2000);

}

</script>

15 réponses

Messages postés
30309
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
24 novembre 2020
338
Bonjour,

1 - Si tu utilises JQUERY... préfère passer par ça pour gérer ton AJAX.
(plus simple et plus lisible que la syntaxe "pure" javascript)

2 - Ton setTimeout('refresh_div()', 2000); .. il faut le mettre EN DEHORS de ta fonction refresh_div()


bizzar la page qui est appélé et qui doi etre raffraichi diaparait
Messages postés
30309
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
24 novembre 2020
338
Il faut initialiser le timeOut au chargement de ta page...


$(document).ready(function(){ 
    setTimeout('refresh_div()', 2000); 
});


je viens d'avoir ce code mais le problème est que toute la page est chargé. je veux pas que la page se chage
Messages postés
30309
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
24 novembre 2020
338
Comment ça Toute la page est chargée ??

Certes... votre page se charge... PUIS initialise le TIMER.
Puis... toutes les 2 secondes.. lance la fonction refresh_div().... fonction qui ne met à jour QUE la partie de la page qui vous intéresse....
-> Par contre.. j'ai un petit doute....

Vous avez bien :

Une page contenant la DIV à rafraichir... et qui est celle qui lance le script refresh_div() ?
(la même qui contient le SetTimeout...)

Puis une page appelée par AJAX qui contient les données qui seront actualisées dans votre div ?

=> Il ne faut pas que ce soit la même page...!!


PS2 : Avez-vous.. comme je vous l'ai indiqué précedement essayé de passer par l' AJAX de jquery plutôt que par le "pur" javascript ?
Quel est le "nouveau" code que vous utilisez maintenant ??
Messages postés
1771
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
20 novembre 2020
107
met une alert dans la fonction refresh_div() pour voir si elle est appelé

alert('sa passe')

je reprend ma preocupation.
j'ai 2 pages :

header.php
et page.php

page.php est appelé dans header.php a l'aide de:
 <code php><div id="chat" style="position:absolute; top:200px">
<?php   include("Menu_page_defilant/page_defilante.php"); ?>
</div>
</code>
et j'ai mis le script :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<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 = 'GET';

var filename = 'page.php';

xhr_object.open(method, filename, true);

xhr_object.onreadystatechange = function()

{

if(xhr_object.readyState == 4)

{

var tmp = xhr_object.responseText;

document.getElementById('chat').innerHTML = tmp;

}

}

xhr_object.send(null);

}
setTimeout('refresh_div()', 2000);

</script
il m'affiche dans la partie ou doit s'afficher page.php :

No database selected
Messages postés
30309
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
24 novembre 2020
338
Merci de bien vouloir utiliser la coloration syntaxique (les balises de code) lorsque tu postes du
code sur le forum.
Explications disponibles ici :
http://codes-sources.commentcamarche.net/faq/10686-le-nouveau-codes-sources-comment-ca-marche#balises-code
Messages postés
30309
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
24 novembre 2020
338
<mode ironique ON >
Un message d'erreur ????
Ah.. ben c'est bien de nous le dire enfin......
</mode ironique>

Plus sérieusement....
Je pense qu'au vu de ton message d'erreur.
il m'affiche dans la partie ou doit s'afficher page.php :
No database selected
... tu as une erreur dans ta page PHP...
Quelque chose du genre : Une erreur de connexion à ta base de données... comme par exemple : Aucune base de selectionnée....

Donc: 1 - Quel est le code qui est présent dans ta page PHP... ?
2 - Es-tu sur que la connexion à ta BDD y fonctionne correctement ?


Bref... il semble qu'il n'y ai aucun rapport avec ta question initiale....





ok je viens de mettre :
<?php   
include("../functions/connect.php");
<?php

et il y a plus d'erreur qui s'affiche mais j'ai l'impression qu'il n as pas de refraichissement
Messages postés
30309
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
24 novembre 2020
338
Déjà... A la place d' INCLUDE ... utilises plutot require_once
http://www.php.net/manual/fr/function.require-once.php

il y a plus d'erreur qui s'affiche mais j'ai l'impression qu'il n as pas de refraichissement

1 - As-tu... comme il t'a été proposé plus haut... mis un ALERT pour t'assurer que ta fonction était bien apellée via le setTimeout ??

2 - Quel code as tu mis dans ton AJAX ?

3 - Utilises tu enfin l' AJAX via Jquery au lieu du PUR Javascript comme je te l'ai conseillé ??
( Si oui... montres ton code !! )
oui l'alerte fonctionne bien.
et voici le code que j'utilise:
<div id="chat" style="position:absolute; top:200px">
<?php   
include("Menu_page_defilant/page_defilante.php");
 ?>
</div>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<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 = 'GET';

var filename = 'Menu_page_defilant/page_defilante.php';

xhr_object.open(method, filename, true);

xhr_object.onreadystatechange = function()

{

if(xhr_object.readyState == 4)

{

var tmp = xhr_object.responseText;

document.getElementById('chat').innerHTML = tmp;

}

}

xhr_object.send(null);

}
alert('sa passe');
</script>


nb: la page se rafraichie une seule fois et plus de rafraichissament

je sais pas comment le faire en AJAX

je sais pas comment le faire en AJAX
Messages postés
30309
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
24 novembre 2020
338
Normal..

SetTimeOut : Déclenche une minuterie et appelle le code javascript fonc dans delai millisecondes.
http://www.toutjavascript.com/reference/reference.php?iref=13

Il te faut, si tu souhaites du répétitif :
setInterval() : Lance un traitement javascript code répété à intervalle régulier de delai millisecondes.
http://www.toutjavascript.com/reference/reference.php?iref=205

ok ça marche voici ce que j'ai mis .
$(document).ready(function(){ 
    setInterval('refresh_div()', 2000); 
});


mais j'ai un souci avec windows Internet Explorer

quand le page se rafraichi mon menu se deforme
pour FF et chrome pas de problème
Messages postés
1771
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
20 novembre 2020
107
avec setTimeout doit pouvoir marcher mais il est mal placé il doit etre mis apres la reception des donné de la page et la fonction doit etre lancé au chargement de la page

<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 = 'GET';

var filename = 'Menu_page_defilant/page_defilante.php';

xhr_object.open(method, filename, true);

xhr_object.onreadystatechange = function()

{

if(xhr_object.readyState == 4)

{

var tmp = xhr_object.responseText;

alert(tmp)

document.getElementById('chat').innerHTML = tmp;

setTimeout(refresh_div, 2000);

}

}

xhr_object.send(null);

}

</script>

typeof window.addEventListener == 'undefined' ? attachEvent("onload",function(){setTimeout(refresh_div, 2000);}) : addEventListener("load",function(){setTimeout(refresh_div, 2000);}, false);

cours Forest cours !
je ne comprends pas bien cette phrase :
avec setTimeout doit pouvoir marcher mais il est mal placé il doit etre mis apres la reception des donné de la page et la fonction doit etre lancé au chargement de la page

et en plus pourquoi "typeof window.addEventListener == 'undefined' ? attachEvent("onload",function(){setTimeout(refresh_div, 2000);}) : addEventListener("load",function(){setTimeout(refresh_div, 2000);}, false);"
n'est pas entre les balises <script> ...</script>
Messages postés
30309
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
24 novembre 2020
338
Re,

setTimeOut.. ne fonctionne QU'UNE SEULE FOIS.
Il ne se repete.. QUE si on ACTUALISE la page....
Hors... l'utilisateur ne veut afficher sa page qu' UNE SEULE fois puis actualiser à intervalles réguliers des données dans un DIV.

Donc je persiste.. mais setInterval devrait mieux fonctionner...

<html>
<head>
<title> Test TimeOut</title>
</head>

<body>
Test d'utilisation d'un timer..
<div id="maDiv">
</div>

<script type="text/javascript">
function maZoliFunc(){
 var oDiv = document.getElementById("maDiv");
     var ctn = oDiv.innerHTML;	
		 var today = new Date();
		 var now = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
		 oDiv.innerHTML = ctn +  now + " Ajout de données...<br> " 
}
// Initialisation du timer...
typeof window.addEventListener == 'undefined' ? attachEvent("onload",function(){setInterval(maZoliFunc, 2000);}) : addEventListener("load",function(){setInterval(maZoliFunc, 2000);}, false);
</script>

</body>
</html>

Messages postés
30309
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
24 novembre 2020
338
Après... il est possible de faire (en effet) une "boucle" en relançant le setTimeOut DANS la fonction AJAX ...

DOnc : Il faut attacher l'évènement :
1 fois au chargement de la page.
1 fois DANS la fonction ajax.

<script type="text/javascript">
function maZoliFunc(){
 var oDiv = document.getElementById("maDiv");
     var ctn = oDiv.innerHTML;	
		 var today = new Date();
		 var now = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
		 oDiv.innerHTML = ctn +  now + " Ajout de données...<br> " 
		 setTimeout(maZoliFunc, 2000);
}
// Initialisation du timer...
typeof window.addEventListener == 'undefined' ? attachEvent("onload",function(){setTimeout(maZoliFunc, 2000);}) : addEventListener("load",function(){setTimeout(maZoliFunc, 2000);}, false);
</script>
Messages postés
1771
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
20 novembre 2020
107
je ne comprends pas bien cette phrase :
setTimeout doit etre mis dans la fonction qui est executé quand le serveur a repondu a la requete


setInterval devrait mieux fonctionner



onreadystatechange est appelé durant toute la durée de la requête a interval régulier et ce de manière automatique et une requête comporte quatre états et quand on arrive a l'état 4 (xhr_object.readyState == 4) c'est que la requete est terminé donc a ce moment la on recupere les donnés et on les insères dans le document c'est ce que fait le script, et a mon avis c'est le meilleur moment pour relancer la fonction par l'intermédiaire de setTimeout car on est sur que la requete en cour est terminé c'est pour ca que setTimeout me parait plus approprié que setInterval car quoi qu'il arrive setInterval lancerait la fonction toutes les deux secondes meme si la requete precedente n'est pas terminé.


xhr_object.onreadystatechange = function()

{

if(xhr_object.readyState == 4)

{

var tmp = xhr_object.responseText;

alert(tmp)

document.getElementById('chat').innerHTML = tmp;

setTimeout(refresh_div, 2000);

}

}




cours Forest cours !