Actualisation d'un minichat

sunev -  
 sunev -
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 } ?>


3 réponses

Réponse 1 / 3
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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



0
Réponse 2 / 3
sunev
 
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.
0
Réponse 3 / 3
sunev
 
bien sur ce code ne sert a rien, sauf si on veut réactualiser la page manuellement

<!--<p><input type="button" onclick='window.location.reload(false)' value="Actualiser"/> <p/>-->

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

Discussions similaires

Actualisation carte sim en permanence
Patlemortel -
Patlemortel -

1 réponse
Score qui augmente de 20 à 30 points d'un coup
Titebreizh35 -
theo.ngr17 -

2 réponses
Augmentation d'un score Snapchat : comment c'est possible ?
Emile402 -
Moi -

9 réponses
ou se trouve le bouton d'actualisation sur l'
DYLAN -
Smahan -

6 réponses
Actualiser page Internet
Craftyfox -
scinarf -

5 réponses