Effacer le texte qui vient de s'inscrire dans un minichat

Résolu
sunev Messages postés 39 Date d'inscription   Statut Membre Dernière intervention   -  
 sunev -
Bonjour,

Dans un minichat aprés avoir appuyer sur "envoyer" le message s'affiche sur la page.
J'aimerai a laide d'un bouton "effacer" enlever le texte qui vient de s'inscrire.
j'avais trouvé un code qui le faisait mais je l'ai perdu.
le bouton "Effacer" appelait une fonction javascript.
Si quelqu'un a la solution, merci d'avance, je suis pas assez calé en js pour le refaire,
pourtant c'était un code tout simple, quand on faisait "reset " le texte qui venait d'apparaitre s’effaçait.

A voir également:

10 réponses

Réponse 1 / 10
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
Bonjour,

Il suffit de taper sur l'élément contenant tes messages via son id.. puis d'utiliser la propriété innerHTML pour la mettre à vide. 
function effacer(){
  var elm = document.getElementById('id_de_ton_container');  
       elm.innerHTML = '';
}


0
Réponse 2 / 10
sunev Messages postés 39 Date d'inscription   Statut Membre Dernière intervention  
 
OK merci ça fonctionne, merci 

  <script type="text/javascript">   
function effacer(){
  var elm = document.getElementById('effa');  
       elm.innerHTML = '';
}  </script>

<input type="button" onclick="effacer()" value="Reset" />

<?php
  // Affichage de chaque message (toutes les données sont protégées par htmlspecialchars)
while ($donnees = $reponse->fetch()){
    echo '<p id="effa"> ' . $donnees['date_fr']. ':<strong> ' . htmlspecialchars($donnees['pseudo']) . '</strong> :
          ' . htmlspecialchars($donnees['message']) . '</p>';
}


le petit bémol c'est que ça n’efface que le message que l'on vient d'envoyer,
(la date reste) le code que j'avais avant, si on appuyait plusieurs fois, le dernier message de la liste s’effaçait complétement au fur et a mesure (date compris) jusqu’à plus de message.
0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
Y'a un petit problème dans ton code .... tu mets le même ID à TOUS tes messages ....
hors un ID ( comprendre : identifiant....) se doit d'être UNIQUE !

De plus .. le code que je t'ai donné n'éfface que "visuellement" le message ... il est toujours présent en BDD ...
Pour l'éffacer également de la BDD ... il faudra le faire en AJAX.


Pour pouvoir t'en dire plus... il faudra que tu nous donnes la structure de ta table de ta BDD (celle qui contient les messages).
0
Réponse 3 / 10
sunev Messages postés 39 Date d'inscription   Statut Membre Dernière intervention  
 
BDD minichat
TABLE chatcheurs


id INT AUTO_INCREMENT,
speudo VARCHAR (50),
message text,
date_creation datetime
PRIMARY KEY(id)
0
Réponse 4 / 10
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
Ok,

Donc on va non pas "vider" le contenu de ta balise <p> .. mais complètement la retirer...


Dans ton script d'origine : 

<input type="button" onclick="effacer()" value="Reset" />

<?php
// Affichage de chaque message (toutes les données sont protégées par htmlspecialchars)
$last_id = 0;
while ($donnees = $reponse->fetch()){
  echo '<p id="msg_'.$donnees['id'].'"> ' . $donnees['date_fr']. ':<strong> ' . htmlspecialchars($donnees['pseudo']) . '</strong> :
          ' . htmlspecialchars($donnees['message']) . '</p>';
  $last_id = $donnees['id'];
}


?>

<!-- Javascript à placer A LA FIN de ton document juste avant le </body> -->
<script type="text/javascript">   
/**
* Fonction pour supprimer un message en AJAX
*/
function effacer(){
  var last_id = '<?php echo $last_id; ?>';
  
  //on fait un ajax pour supprimer en bdd:
  var urlAjx = "delete_msg.ajx.php";
  var data = {id:last_id};
  $.ajax({ 
      type: "POST",
      url: urlAjx,
      data: data,
      async: async,
      dataType: "json",
      success: function(reponse){
         //on retire la ligne
         $('#msg_'+last_id).fadeOut(300, function(){ $(this).remove();});
       },
      error:function(jqXHR, textStatus){
        var error = formatErrorMessage(jqXHR, textStatus);
            alert('error :' + error);
        }
     }); 
}
 
 /**
  Format les messages erreurs AJAX pour les afficher
 */
 function formatErrorMessage(jqXHR, exception) {
 var errorTxt="";
 var err = jqXHR.responseText ;
    if (jqXHR.status === 0) {
        errorTxt = ('Not connected.\nPlease verify your network connection.');
    } else if (jqXHR.status == 404) {
        errorTxt = ('The requested page not found. [404]');
    } else if (jqXHR.status == 500) {
        errorTxt = ('Internal Server Error [500].');
    } else if (exception === 'parsererror') {
        errorTxt = ('Requested JSON parse failed.');
    } else if (exception === 'timeout') {
        errorTxt = ('Time out error.');
    } else if (exception === 'abort') {
        errorTxt = ('Ajax request aborted.');
    } else {
        errorTxt = ('Uncaught Error.\n' + jqXHR.responseText);
    }
    
    return errorTxt + " : " +err;
}  
</script>


Ensuite il faut créer un fichier ajax php pour le traitement...
=> fichier nommé delete_msg.ajx.php par exemple 
<?php

//connexion à la bdd (mettre ton fichier de connexion)
require_once "cnxbdd.php";


//récupération propre des variables AVANT de les utiliser
$id = !empty($_POST['id']) ? $_POST['id'] : NULL

$result = $_POST;
if($id){
  $sql = 'DELETE FROM  chatcheurs WHERE id = :id'
  $datas = array(":id"=>$id);

  try{
    $req=$bdd->prepare($sql);
    $result = $req->execute();
  }catch(Exception $e){
    echo "Erreur :".$e->getMessage();
    echo "<br>Requete :".$sql;
    
  }
}

echo json_encode($result);
?>


NB: Tu auras, au préalable, chargé la librairie JQUERY dans ton site.... ( récupérable ici : https://code.jquery.com/jquery-3.2.1.min.js et à enregistrer sous (et le mettre sur ton site))
puis l'inclure dans ton html (en général .. dans le HEAD de ta page ou au moins au début de celle ci au début de ton body) 
<script src="jquery-3.2.1.min.js"></script>


NB² : En cas de soucis, pense à regarder dans la CONSOLE de ton navigateur si il n'y a pas des messages d'erreurs et/ou le résultat de l'appel ajax.
pour ça.. soit tu utilises Firefox .. soit tu penses à installer le plugin : ajax debuger pour Chrome.

NB3 : Tu utilises PDO ... penses à activer la gestion de erreurs PDO : https://forums.commentcamarche.net/forum/affich-37584941-php-pdo-gerer-les-erreurs

.

0

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

Posez votre question
Réponse 5 / 10
sunev Messages postés 39 Date d'inscription   Statut Membre Dernière intervention  
 
Merci jordane45 de toutes tes réponses.

Je vais essayer de faire comme tu m'a dis, mais l'ajax je n'y connais rien,
je me défend bien en html, css, j'ai étudié le php que je commence a peine a comprendre, le javascript un peu ça ressemble au php avec une autre syntaxe, les BDD, mais l'ajax c'est l'inconnue, en plus ça a l'air d'une vraie usine a gaz, je m'y intéresserais que quand j'aurais bien intégré php , js et sql
Merci encore de ton aide que j’apprécie d'autant plus que ce n'est pas la première fois que tu m'indique la marche à suivre.
0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 

mais l'ajax c'est l'inconnue

L'ajax n'est rien de "nouveau" pour toi ... après tout ce n'est qu'une méthode pour faire appel à du PHP dans du code javascript ...
0
Réponse 6 / 10
sunev Messages postés 39 Date d'inscription   Statut Membre Dernière intervention  
 
Bonjours jordane45

jusqu'a maintenant je pensais que l'on pouvait mettre du javascript dans du php mais pas le contraire.

J'ai tout bien mis ton code mais ça m'affiche une erreur de la variable
$reponse, pourtant cette variable existe et fonctionnait bien avec l’ancien
code:
<?php
while ($donnees = $reponse->fetch()){
    echo '<p id="effa"> ' . $donnees['date_fr']. ':<strong> ' . htmlspecialchars($donnees['pseudo']) . '</strong> :
          ' . htmlspecialchars($donnees['message']) . '</p>';
}
$reponse->closeCursor(); ?>


Erreurs qui s'affichent avec le nouveau:

Notice: Undefined variable: reponse in C:\EasyPHP-12.1\www\00siteencourdu092016\mini_chat.php on line 108

Fatal error: Call to a member function fetch() on a non-object in C:\EasyPHP-12.1\www\00siteencourdu092016\mini_chat.php on line 108

La ligne 108 est soulignée et mis en gras dans le code
le code de la page complet: 
<script src="jquery-3.2.1.min.js"></script> <!-- appel du fichier pour le code ajax -->
    </head>
    
 <body>   
<form action="mini_chat_post.php" method="post">
        <p><label for="pseudo">Pseudo :</label><input type="text" name="pseudo" id="pseudo" /></p>
        <p><label for="message">Message :</label><textarea id="message" name="message"  cols="40" rows="4" autofocus></textarea></p>

        <p><input type="submit" value="Envoyer" /></p>
<input type="button" onclick="effacer()" value="Reset" />

<?php
$last_id = 0;
while ($donnees = $reponse->fetch()){
  echo '<p id="msg_'.$donnees['id'].'"> ' . $donnees['date_fr']. ':<strong> ' . htmlspecialchars($donnees['pseudo']) . '</strong> :
          ' . htmlspecialchars($donnees['message']) . '</p>';
  $last_id = $donnees['id'];
} ?>
</form>
    
 <?php      // Connexion à  la base de données
try{
    $bdd = new PDO('mysql:host=localhost;dbname=minichat', 'root', '');
}
catch(Exception $e){
        die('Erreur : '.$e->getMessage());
}
// Récupération des 15 derniers messages
$reponse = $bdd->query('SELECT pseudo, message, DATE_FORMAT(date_creation, \'%d/%m/%Y a %Hh%i\') 
AS date_fr FROM chatcheurs ORDER BY ID DESC LIMIT 0, 15');
?>


<!-- Javascript à placer A LA FIN de ton document juste avant le </body> -->
<script type="text/javascript">   
/*** Fonction pour supprimer un message en AJAX*/
function effacer(){
  var last_id = '<?php echo $last_id; ?>';
 //on fait un ajax pour supprimer en bdd:
  var urlAjx = "delete_msg.ajx.php";
  var data = {id:last_id};
  $.ajax({ 
   type: "POST",
   url: urlAjx,
  data: data,
  async: async,
  dataType: "json",
  success: function(reponse){
  //on retire la ligne
  $('#msg_'+last_id).fadeOut(300, function(){ $(this).remove();});
    },
   error:function(jqXHR, textStatus){
  var error = formatErrorMessage(jqXHR, textStatus);
   alert('error :' + error);
        }
     }); 
}
 
 /**Format les messages erreurs AJAX pour les afficher*/
 function formatErrorMessage(jqXHR, exception) {
 var errorTxt="";
 var err = jqXHR.responseText ;
  if (jqXHR.status === 0) {
 errorTxt = ('Not connected.\nPlease verify your network connection.');
    } else if (jqXHR.status == 404) {
        errorTxt = ('The requested page not found. [404]');
    } else if (jqXHR.status == 500) {
        errorTxt = ('Internal Server Error [500].');
    } else if (exception === 'parsererror') {
        errorTxt = ('Requested JSON parse failed.');
    } else if (exception === 'timeout') {
        errorTxt = ('Time out error.');
    } else if (exception === 'abort') {
        errorTxt = ('Ajax request aborted.');
    } else {
        errorTxt = ('Uncaught Error.\n' + jqXHR.responseText);
    }
     return errorTxt + " : " +err;
}  
</script>    
</body>
0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
Tu as oublié de mettre le code de connexion à ta bdd ....AVANT de faire ta requête et ta boucle while ...
De plus .. appliques ceci : https://forums.commentcamarche.net/forum/affich-37584941-php-pdo-gerer-les-erreurs
0
Réponse 7 / 10
sunev Messages postés 39 Date d'inscription   Statut Membre Dernière intervention  
 
Je viens de faire ce que tu m’a dis, maintenant ça met entre les messages qui s’affiche sur la page du minichat qui s'ouvre :

Notice: Undefined index: id in C:\EasyPHP-12.1\www\00siteencourdu092016\mini_chat.php on line 132

Notice: Undefined index: id in C:\EasyPHP-12.1\www\00siteencourdu092016\mini_chat.php on line 130

les lignes 132 et 130 sont soulignées en gras dans le code: 

<?php try{
$bdd =new PDO('mysql:host=localhost; dbname=minichat; charset=utf8', 'root', '');
// Activation des erreurs PDO
 $bdd->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
// mode de fetch par défaut : FETCH_ASSOC / FETCH_OBJ / FETCH_BOTH
 $bdd->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE, PDO::FETCH_ASSOC);
} catch(PDOException $e) {
    die('Erreur : ' . $e->getMessage());
}
?>
 <?php
// Récupération des 15 derniers messages
$reponse = $bdd->query('SELECT pseudo, message, DATE_FORMAT(date_creation, \'%d/%m/%Y a %Hh%i\') 
AS date_fr FROM chatcheurs ORDER BY ID DESC LIMIT 0, 15');
?>

<?php
// Affichage de chaque message (toutes les données sont protégées par htmlspecialchars)
$last_id = 0;
while ($donnees = $reponse->fetch()){
  echo '<p id="msg_'.$donnees['id'].'"> ' . $donnees['date_fr']. ':<strong> ' . htmlspecialchars($donnees['pseudo']) . '</strong> :
          ' . htmlspecialchars($donnees['message']) . '</p>';
 $last_id = $donnees['id']; 
}
?>
0
Réponse 8 / 10
sunev
 
salut
Je ne comprends pas

echo '<p id="msg_'.$donnees['id'].'">
il est demandé d'afficher une chaine de carractéres ayant comme identifiant msg_( on est ici en html ?) puis on concaténe le php qui est la $donnees, mais ou ce trouve cet identifiant msg_ placé derrière la balise P on devrait le retrouver en css ?
Il y a une erreur quelque part

je ne comprends pas cette commande, sur php.net
on trouve :
msg_receive — Reçoit un message depuis une file de messages
msg_remove_queue() - Détruit une file de messages
msg_send() - Envoie un message dans une file
msg_stat_queue() - Retourne des informations sur la file de messages
msg_set_queue() - Modifie des informations dans la file de messages

mais msg_ tout court ça n'existe pas
0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
oula ;... de quoi tu me parles avec les fonctions php msg ????
J'ai mis msg comme j'aurai pu mettre toto ....
Je donne juste un identifiant à ta balise p ....

Pour ce qui est du message
Notice: Undefined index: id in C:\EasyPHP-12.1\www\00siteencourdu092016\mini_chat.php on line 130

Ta requête (que je n'avais pas jusqu'à maintenant.... )
ne retourne pas le champ id ... Il faudrait donc la modifier en mettant (par exemple ) 
 <?php
// Récupération des 15 derniers messages
$reponse = $bdd->query('SELECT id,pseudo, message, DATE_FORMAT(date_creation, \'%d/%m/%Y a %Hh%i\') 
AS date_fr FROM chatcheurs ORDER BY ID DESC LIMIT 0, 15');
?>
0
Réponse 9 / 10
sunev
 
Ok l'erreur est corrigée et ne s'affiche plus, mais je ne comprends pas le but de l'id
<p id="msg_'.$donnees['id'].'">
De toute façon quand j’appuie sur "reset" rien ne se passe.

Alors j'ai créé le fichier "delete_id.php" qui fonctionne trés bien et efface la derniére ligne de la table"chatcheurs" ; 

<?php
// effacer_les_derniéres données d'une table
    $serveur ="127.0.0.1";
    $login ="root";
    $pass ="";
    try {
      $connexion = new PDO("mysql:host=$serveur;dbname=minichat",$login,$pass);
      $connexion -> setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION)
     $requete = "DELETE FROM chatcheurs ORDER BY id DESC LIMIT 1";
      $connexion->exec($requete);
       }
        catch (PDOException $e) {
     	echo 'Echec de la connection :'.$e->getMessage();
}
?>


Mais je n'arrive pas a le lancer avec 
<input type="button" onclick="delete_id.php" value="Reset" />

j'ai essayé avec une fonction, mais je ne trouve pas le code, si quelqu'un a une idée merci de m'instruire, je suis sur que c'est tout simple mais je suis pas assez calé, alors je cherche .............
0
Réponse 10 / 10
sunev
 
ça y est j'ai réussi a le faire fonctionner

le fichier "delete_id.php" avec une redirection a lafin: 
<?php
// effacer_les_donnes d'une table
    $serveur ="127.0.0.1";
    $login ="root";
    $pass ="";

    try {
      $connexion = new PDO("mysql:host=$serveur;dbname=minichat",$login,$pass);
      $connexion -> setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
          //$requete = "DELETE FROM chatcheurs WHERE  id=1";
          $requete = "DELETE FROM chatcheurs ORDER BY id DESC LIMIT 1";

      $connexion->exec($requete);
      echo "Valeurs bien effacees dans la table chatcheurs de la BDD  minichat<br/>";
      }
    
    catch (PDOException $e) {
     	echo 'Echec de la connection :'.$e->getMessage();
}
  header('Location: mini_chat.php');
  exit();
?>


et le bouton "reset": dans une deuxiéme balise <form action="delete_id.php">: 

<form action="mini_chat_post.php" method="post">
        <p><label for="pseudo">Pseudo :</label><input type="text" name="pseudo" id="pseudo" /></p>
        <p><label for="message">Message :</label><textarea id="message" name="message"  cols="40" rows="4" autofocus></textarea></p>
 <p><input type="submit" value="Envoyer" /></p>
</form>

 <form action="delete_id.php" method="post">
               <input type="submit"  value="Reset" /> 
              </form>

si ça peut intéresser quelqu'un, et merci de vos réponces.
0

Discussions similaires

copie de texte
jean -
jean -

5 réponses