Actualisation d'un minichat

Fermé

sunev - 14 juin 2017 à 16:16
sunev - 14 juin 2017 à 17:05

Bonjour,

J'ai trouvé ce tuto sur youtube: Actualiser son code automatiquement (avec jQuery).mp4
je l'ai reproduit et il marche relativement bien, sauf qu' a l'envoie d'un message il ouvre une deuxième page entière réactualisée, et si on envoie un autre message il en ouvre une troisième et ainsi de suite.
Comment faire pour que la réactualisation se fasse sur la même page sans qu'une autre s'ouvre?
Il n'y a que la portion du code entre les balises <div id="messages" > qui devrait changer tout en restant sur la même page.
Si quelqu'un a une idée, merci.

LE CODE de la page principale: premafix.php

<?php
try
{
$bdd = new PDO('mysql:host=127.0.0.1;dbname=chatmini;charset=utf-8','root', '');
}catch (Exception $e)
{
die('Erreur : ' . $e->getMessage());
}
if (isset($_POST['pseudo']) AND isset($_POST['message'])  AND !empty($_POST['pseudo']) AND !empty($_POST['message'])) {
	$pseudo = htmlspecialchars($_POST['pseudo']);
	$message = htmlspecialchars($_POST['message']);
	$insertmsg = $bdd->prepare('INSERT INTO chat (pseudo,message) VALUE(?,?)');
    $insertmsg->execute(array($pseudo,$message));
}

?>
<!DOCTYPE html>
<html>
<head>
	<title>Chat</title>
	<meta charset="utf-8">
	
	<!--Google hosted jquery -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>


</head>
<body>
<center><h3>MiniChat Site-Art-Peinture</h3></center>
   <form method="post" action="">
       <input type="text" placeholder="PSEUDO" name="pseudo" value="<?php
       if (isset($pseudo)) { echo $pseudo; } ?>" /><br /><br />
       <textarea type="text" placeholder="MESSAGE" name="message"></textarea><br /><br />
	   <input type="submit"  value="Envoyer">
	   <!--<p><input type="button" onclick='window.location.reload(false)' value="Actualiser"/> <p/>-->
</form>

<!--  ////////////   PARTIE DU CODE A REACTUALISER  //////////////-->
<div id="messages" >
<?php
$allmsg = $bdd->query('SELECT * FROM 
chat ORDER BY id DESC LIMIT 0, 10');
while($msg = $allmsg->fetch()){
?>
  <b><?php echo $msg['pseudo']; ?> : </b> 
  <?php echo $msg['message']; ?> : <br/> 
<?php 
} 
?>
</div>
<!--  ////////////   REACTUALISation toutes les 2 secondes  //////////////-->
<script>
setInterval('load_messages()', 2000);
function load_messages(){
     $('#messages').load('load_messages.php');
}
</script>

</body></html>

Plus la page: load_messages.php

<?php

$bdd = new PDO('mysql:host=127.0.0.1;dbname=chatmini', 'root', '');

$allmsg = $bdd->query('SELECT * FROM chat ORDER BY id DESC LIMIT 0, 10');
while($msg = $allmsg->fetch()){
?>
  <b><?php echo $msg['pseudo']; ?> : </b> 
     <?php echo $msg['message']; ?> : <br/> 
<?php } ?>

A voir également:

Actualisation d'un minichat
Actualisation score snap - Forum Snapchat
Bouton d'actualisation ✓ - Forum Réseaux sociaux
Bouton d'actualisation sur page web ? ✓ - Forum Webmastering
Désactiver actualisation automatique chrome - Forum Réseaux sociaux
Actualisation automatique excel ✓ - Forum Excel

3 réponses

Réponse 1 / 3

jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
14 juin 2017 à 16:30

Bonjour,

Tu dis que le souci apparait lors de l'envoie d'un nouveau message ... donc.. quand tu cliques sur le bouton SUBMIT non ??
Ca n'a donc pas de rapport avec "l'actualisation" de ta div message....

Avant de regarder le reste ... sache déjà que le code PHP qui se trouve dans ta div est INUTILE puisque tu fais une actualisation via javascript...
Donc :

<!--  ////////////   PARTIE DU CODE A REACTUALISER  //////////////-->
<div id="messages" >
<?php
$allmsg = $bdd->query('SELECT * FROM 
chat ORDER BY id DESC LIMIT 0, 10');
while($msg = $allmsg->fetch()){
?>
  <b><?php echo $msg['pseudo']; ?> : </b> 
  <?php echo $msg['message']; ?> : <br/> 
<?php 
} 
?>
</div>

Ne devrait être que :

<!--  ////////////   PARTIE DU CODE A REACTUALISER  //////////////-->
<div id="messages" >
</div>

Ensuite .. si tu ne veux pas recharger complètement ta page à chaque fois que tu envoies un message ... il faut modifier ce code:

<form method="post" action="">
       <input type="text" placeholder="PSEUDO" name="pseudo" value="<?php
       if (isset($pseudo)) { echo $pseudo; } ?>" /><br /><br />
       <textarea type="text" placeholder="MESSAGE" name="message"></textarea><br /><br />
	   <input type="submit"  value="Envoyer">
	   <!--<p><input type="button" onclick='window.location.reload(false)' value="Actualiser"/> <p/>-->
</form

et .. au lieu de faire un SUBMIT via un FORMULAIRE .... le gérer en AJAX.

NB: Je te conseille également de mettre le code de connexion à ta BDD dans un fichier à part que tu n'auras qu'à inclure dans tes différentes pages au lieu de le copier/coller partout dans ton site !!!

NB² : Il faut également activer la gestion d'erreur PDO:
Voir ici : https://forums.commentcamarche.net/forum/affich-37584941-php-pdo-gerer-les-erreurs

Réponse 2 / 3

sunev
14 juin 2017 à 17:01

rebonjour

si on enleve le code dans le div, la page du formulaire apparait vide de messages pendant les deux secondes de réactualisation (c'est moche), puis tout apparait actualisé dans une deuxiéme page, c'est ce que ne comprends pas, nulle part dans le code on demande a une deuxieme page de s'ouvrir?
Ce code est brut, si j'arrive a le faire fonctionner correctement les connections a la bdd se feront avec des "include" et un fichier a part.
Aparament sur le tuto ça fonctionne bien.

je suis pas assez fort en ajax pour le rectifier.

Réponse 3 / 3

sunev
14 juin 2017 à 17:05

bien sur ce code ne sert a rien, sauf si on veut réactualiser la page manuellement



par contre l'actualisation se fait sur la méme page et n'en ouvre pas d'autre

Discussions similaires

ou se trouve le bouton d'actualisation sur l'

ou est il ce bouton actualiser,?

Actualisation carte sim en permanence

localisation tinder

actualisation des messages dans outlouk

Discussions similaires

Newsletters