Sujet Précédent Sujet Suivant

Probleme deRafraichissment d'une div

msi79 Messages postés 509 Date d'inscription lundi 24 août 2009 Statut Membre Dernière intervention 2 mai 2023 - 15 mai 2014 à 18:14
@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 - 19 mai 2014 à 20:30
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

Réponse 1 / 15
jordane45 Messages postés 38139 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 avril 2024 344
15 mai 2014 à 18:30
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()


0
Réponse 2 / 15
msi79
19 mai 2014 à 13:26
bizzar la page qui est appélé et qui doi etre raffraichi diaparait
0
Réponse 3 / 15
jordane45 Messages postés 38139 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 avril 2024 344
19 mai 2014 à 13:40
Il faut initialiser le timeOut au chargement de ta page... 


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

0
Réponse 4 / 15
msi79
19 mai 2014 à 13:56
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
0
jordane45 Messages postés 38139 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 avril 2024 344
19 mai 2014 à 14:02
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 ??
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 15
@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 153
19 mai 2014 à 14:38
met une alert dans la fonction refresh_div() pour voir si elle est appelé 

alert('sa passe')
0
Réponse 6 / 15
msi79
Modifié par kazma le 19/05/2014 à 15:33
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
0
jordane45 Messages postés 38139 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 avril 2024 344
19 mai 2014 à 15:12
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
0
Réponse 7 / 15
jordane45 Messages postés 38139 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 avril 2024 344
19 mai 2014 à 15:12
<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....





0
Réponse 8 / 15
msi79
19 mai 2014 à 15:38
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
0
jordane45 Messages postés 38139 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 avril 2024 344
19 mai 2014 à 16:40
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 !! )
0
Réponse 9 / 15
msi79
Modifié par kazma le 19/05/2014 à 17:45
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
0
Réponse 10 / 15
jordane45 Messages postés 38139 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 avril 2024 344
19 mai 2014 à 17:17
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

0
Réponse 11 / 15
msi79
19 mai 2014 à 17:50
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
0
Réponse 12 / 15
@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 153
Modifié par kazma le 19/05/2014 à 17:55
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 !
0
Réponse 13 / 15
msi79
19 mai 2014 à 18:01
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>
0
Réponse 14 / 15
jordane45 Messages postés 38139 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 avril 2024 344
19 mai 2014 à 18:21
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>

0
jordane45 Messages postés 38139 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 avril 2024 344
Modifié par jordane45 le 19/05/2014 à 18:25
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>
0
Réponse 15 / 15
@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 153
Modifié par kazma le 19/05/2014 à 23:01
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 !
0

Discussions similaires

comment ajouter ajax control toolkit
cs_faridas -
Grafritz -

16 réponses
la division en java
cs_aliomar -
KIRAIII -

3 réponses
automatisation des donnees (windev)
dmi88 -
dmi88 -

2 réponses
coller deux div avec du css
leon237 -
jordane45 -

2 réponses
Ajax et ASP.NET/C# passage de paramètre
cs_eddynamique -
yann_lo_san -

7 réponses
Rejoignez-nous