Problème avec AJAX.

Résolu

Val_3990 Messages postés 21 Date d'inscription Statut Membre Dernière intervention -
jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention - 22 mai 2020 à 15:20

Bonjour,
Je travail actuellement sur un chat que je souhaite rendre dynamique (récupérer les nouveaux message et enregistrer les message envoyés dans ma BDD sans avoir a refresh ma page), j'ai donc choisi de travailler avec AJAX :
Mon code JS :

La section de ma page contenant la div visé et l'appel au script :

Le code PHP appelé dans mon code JS :

La requette en soit fonctionne puisque quand je vais la séction network (ou réseaux) + filtre XHR de mon navigateur j'ai bien une réponse et quand j'injecte directement (a la main) la réponse que je reçois dans ma div tout fonctionne comme je voudrai.
D'un autre coté je ne pense pas que le probleme vienne de innerHTML puisque quand je remplace :
document.getElementsByClassName('testert').innerHTML = HttpRequest.responseText

par quelque chose comme :

document.getElementsByClassName('testert').innerHTML = '<p>bonjour</p>'

Cela fonctionne.
Je n'ai pas l'habitude de poster dans des forums mais je n'ai trouver aucun autre poste avec un problème correspondant.
Merci d'avance et bonne journée !

Afficher la suite

A voir également:

Problème avec AJAX.
Shoutbox avec ajax - Forum Javascript
Yggtorrent erreur ajax ✓ - Forum PHP
Erreur ajax c est quoi ✓ - Forum PHP
Easyphp ajax ✓ - Forum PHP
Ajax ne fonctionne pas... ? - Forum Programmation

5 réponses

Réponse 1 / 5

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 753

Bonjour,

Commence par nous poster ton code en utilisant les balises de code ( les images ne nous permettant pas de le copier/coller au besoin...)
Explications disponibles ici : https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code

Il serait bien également de nous faire une capture écran de ton retour ajax dans la console de ton navigateur qu'on voit ce que ça te renvoie exactement.

Réponse 2 / 5

Val_3990 Messages postés 21 Date d'inscription Statut Membre Dernière intervention

Le code php complet de ma page principale (ce qui nous intéresse est à la fin) :



 
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->

<!DOCTYPE html>
<html>
 <head>
  <title>Chat</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css">
  <link rel="stylesheet" href="../style/interface3.css" />
 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.js"></script>
  
  
 </head>

 <body>
 
 <!-----connection --->
<?php
$pdo_options[PDO::ATTR_ERRMODE] = PDO::ERRMODE_EXCEPTION;
 try {
    $con = new PDO('mysql:host=localhost;dbname=mysql;charset=utf8','root','',$pdo_options);
} catch (PDOException $e) {
 
    echo 'Connection failed: ' . $e.getMessage();
}
?>
 
<!-----Récupération des infos du formulaire et ouverture de la session------>
 <?php 
 session_start();
    $nom=$_POST['nom_client'];
    $_SESSION['prenom'] = $nom;
 echo ($_SESSION['prenom']);
    $_SESSION['id_user'] = getIdByName($con,$nom); 

 session_destroy();
?>
 

<?php $i=1 ?>

<?php
/*
 $pdo_options[PDO::ATTR_ERRMODE] = PDO::ERRMODE_EXCEPTION;
 $text=$_POST['msg_txt'];
 $to='supplier';
 $id_custo=1;
 $date_ad=date('Y-m-d H:i:s');
 $data4=array(':Text' => $text,':To' => $to, ':Date_ad' => $date_ad, ':Id_cust' => $id_custo);
 $insertStatement = $con->prepare('INSERT INTO ps_private_message (`message`,`to`,`date_add`,`id_customer`) VALUES (:Text,:To,:Date_ad,:Id_cust)');
 $con->BeginTransaction();
 try {
  $insertStatement->execute($data4);
 } catch (PDOException $e) {
  echo 'Query failed: ' . $e->getMessage();
 } 
 $con->commit();
*/
?>

<?php $id_cli=1;?> <!--- En attendant ajax--->
<!---- retourne les message lié un client indiqué en parrametre ----->
<?php
function getSpecificMessage($idcli,$conec){
 $querry="SELECT * FROM ps_private_message where `id_customer`=$idcli";
 $req = $conec->query($querry);
 return $req;
}

function getLastMessage($conec,$idcli){
 $querry="SELECT `message`,MAX(`date_add`) from ps_private_message WHERE id_customer=$idcli;";
 $req = $conec->query($querry);
 $data = $req->fetch();
 return $data['message'];
}

function getCurentUserInfo($idcli,$conec){
 $querry="SELECT name FROM client where `id_client`=$idcli";
 $req = $conec->query($querry);
 $data = $req->fetch();
 return $data['name']; 
}

function countMessage($idcli,$conec){
 $querry="SELECT COUNT(message) AS nbMsg FROM ps_private_message WHERE (id_customer=1);";
 $req = $conec->query($querry);
 $data = $req->fetch();
 return $data['nbMsg']; 
}

function getIdByName($conec,$noms){
 $querry="SELECT `id_suplier` AS id FROM `suplier` WHERE (`suplier_name`=('$noms'));";
 $req = $conec->query($querry);
 $data = $req->fetch();
 return $data['id']; 
 
}
?>
 
 <?php
  $querry="SELECT * FROM client";
  $req = $con->query($querry);

  $querry2="SELECT * FROM ps_private_message";
  $req2 = $con->query($querry2);
?> 
 <?php $listeChat=getSpecificMessage($id_cli,$con);?>
  <div class="container-fluid h-100">
   <div class="row justify-content-center h-100">
    <div class="col-md-4 col-xl-3 chat"><div class="card mb-sm-3 mb-md-0 contacts_card">
     <div class="card-header">
      <div class="input-group">
       <input type="text" placeholder="Search..." name="" class="form-control search">
       <div class="input-group-prepend">
        <span class="input-group-text search_btn"><i class="fas fa-search"></i></span>
       </div>
      </div>
     </div>
     
     
     <div class="card-body contacts_body">
      <ul class="contacts">
      <?php while ($data = $req->fetch(PDO::FETCH_ASSOC)) { ?>
      <li class="active">
       <a href="#" class="chat_friend" data-id="<?php $data['id_client']; ?>">
        <div class="d-flex bd-highlight">
         <div class="img_cont">
          <img src="https://static.turbosquid.com/Preview/001292/481/WV/_D.jpg" class="rounded-circle user_img">
          <span class="online_icon"></span>
         </div>
         <div class="user_info">
          <span><?php echo ($data['name'])?></span>
          <p><?php
          echo(getLastMessage($con,$data['id_client'])); 
          ?></p>
         </div>
        </div>
       </a>
      </li>
      <?php } ?>
      </ul>
     </div>
     <div class="card-footer"></div>
    </div></div>
    <div class="col-md-8 col-xl-6 chat">
     <div class="card">
      <div class="card-header msg_head">
       <div class="d-flex bd-highlight">
        <div class="img_cont">
         <img src="https://static.turbosquid.com/Preview/001292/481/WV/_D.jpg" class="rounded-circle user_img">
         <span class="online_icon"></span>
        </div>
        <div class="user_info">
         <span>Chat with <?php echo (getCurentUserInfo($id_cli,$con)) ?></span>
         <p><?php echo(countMessage($id_cli,$con)) ?></p>
        </div>
        <div class="video_cam">
         <span><i class="fas fa-video"></i></span>
         <span><i class="fas fa-phone"></i></span>
        </div>
       </div>
       <span id="action_menu_btn"><i class="fas fa-ellipsis-v"></i></span>
       <div class="action_menu">
        <ul>
         <li><i class="fas fa-user-circle"></i> View profile</li>
         <li><i class="fas fa-users"></i> Add to close friends</li>
         <li><i class="fas fa-plus"></i> Add to group</li>
         <li><i class="fas fa-ban"></i> Block</li>
        </ul>
       </div>
      </div>
      
      
      <div class="card-body msg_card_body">
      
      <?php while ($data = $listeChat->fetch(PDO::FETCH_ASSOC)) { ?>
      <?php if($data['to']=='customer') { ?>
       <div class="d-flex justify-content-start mb-4">
        <div class="img_cont_msg">
         <img src="https://static.turbosquid.com/Preview/001292/481/WV/_D.jpg" class="rounded-circle user_img_msg">
        </div>
        <div class="msg_cotainer">
         <?php echo ($data['message']);?>
         <span class="msg_time"><?php echo ($data['date_add'])?></span>
        </div>
       </div>
      <?php }else{ ?>
      
      
   
      <div class="d-flex justify-content-end mb-4">
        <div class="msg_cotainer_send">
         <?php echo ($data['message']);?>
         <span class="msg_time_send"><?php echo ($data['date_add'])?></span>
        </div>
      </div>
      <?php }} ?>
      </div>
      
      <div class="card-footer">
       <div class="input-group">
        <div class="input-group-append">
         <span class="input-group-text attach_btn"><i class="fas fa-paperclip"></i></span>
        </div>
        
        <textarea name="msg_txt" class="form-control type_msg" placeholder="Type your message..."></textarea>
        <div class="input-group-append">
         <a href="../php/monChat.php?message='bonjour'" class="input-group-text send_btn"> <input type="button" > </a>
         <!----<button href="php/monChat.php" id="send_msg" class="input-group-text send_btn"><i class="fas fa-location-arrow"></i></button>---->
        </div>
        
       </div>
      </div>
      
     </div>
    </div>
   </div>
  
  </div>
<div class="testert"></div>
<script type="text/javascript" src="../js/interface3.js"></script>
 </body>
</html>

Le code JS :


var getHttpRequest = function (){
 var HttpRequest = new XMLHttpRequest();
 return HttpRequest
}


var HttpRequest = getHttpRequest()

   //document.getElementById('card-body.msg_card_body').innerHTML = HttpRequest.responseText;
   
  
  
HttpRequest.open('GET','monChat.php?message="bonjour"',true)
HttpRequest.send()

document.getElementsByClassName('testert').innerHTML = HttpRequest.responseText

//}

Le code de monChat.php soit la page que j'apelle dans ma requette AJAX :

<?php
session_start();  
include('../phpscript/phpfunction.php');
$conec=db_connect();
$_SESSION['id_user']=1;
$id=$_SESSION['id_user'];
//echo ($_GET['message']);
$querry="SELECT * from `ps_private_message` WHERE `id_supplier`=('$id');";
$req = $conec->query($querry);
?>
 

  
<?php while ($data = $req->fetch(PDO::FETCH_ASSOC)) { ?>
 <?php echo ("on est dans monChat.php"); ?>
  <?php if($data['to']=='customer') { ?>
   <div class="d-flex justify-content-start mb-4">
    <div class="img_cont_msg">
     <img src="https://static.turbosquid.com/Preview/001292/481/WV/_D.jpg" class="rounded-circle user_img_msg">
    </div>
    <div class="msg_cotainer">
     <?php echo ($data['message']);?>
     <span class="msg_time"><?php echo ($data['date_add'])?></span>
    </div>
   </div>
   <?php }else{ ?>
     
   <div class="d-flex justify-content-end mb-4">
    <div class="msg_cotainer_send">
     <?php echo ($data['message']);?>
      <span class="msg_time_send"><?php echo ($data['date_add'])?></span>
    </div>
   </div>
<?php }} ?>

Capture d'écran navigateur :

Je reste disponible si tu as besoin de toute informations complémentaires, merci de prendre du temps pour ma requête.

Réponse 3 / 5

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 753

Un souci et une remarque pour ton code Javascript :
Le souci... c'est que tu n'attends pas la réponse de ton ajax avant de vouloir faire l'affichage
La remarque.. c'est qu'il est préférable d'envoyer les données en POST au lieu du GET

Donc

var http = new XMLHttpRequest();
var url = 'monChat.php';
var message = "bonjour";
var params = 'message='+message;
http.open('POST', url, true);

//Send the proper header information along with the request
http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

http.onreadystatechange = function() {//Call a function when the state changes.
    if(http.readyState == 4 && http.status == 200) {
        var tester = document.getElementsByClassName('testert')[0];
        tester.innerHTML = http.responseText;
        
    }
}
http.send(params);

A noter également qu'en javascript il est préférable de cibler les éléments par leur ID plutôt que par leur "name".

Ensuite, côté PHP pour l'ajax :
Déjà, on évite de retourner du html dans l'ajax....
On retourne les données "brut".. et c'est le Javascript qui construit le html.

Et enfin, pour le PHP en général ..:
On essaye également de placer le plus possible de code php AVANT le html

Je t'invite à lire et à appliquer le contenu de ce lien pour tes prochains codes :
https://forums.commentcamarche.net/forum/affich-37584947-php-gestion-des-erreurs-debogage-et-ecriture-du-code

Réponse 4 / 5

Val_3990 Messages postés 21 Date d'inscription Statut Membre Dernière intervention

Merci pour ta réponse,
j'ai modifier quelque peu mon code :
- j'ai enlever le passage de paramètre par get.
-j'ai remplacer une class par un ID dans ma div cible.
-j'ai rajouter la gestion d’événement dans mon code JS.

Et malgré toujours pas d'affichage.

J'ai aussi jeter un coup d’œil a l'article que tu m'a envoyé et en effet je vais faire un grand nettoyage dans mon code.
Cependant je veux absolument faire fonctionner ce code avant sur le quelle je me casse la tête depuis déjà trop longtemps.

Nouveau code JS :



var getHttpRequest = function (){
	var HttpRequest = new XMLHttpRequest();
	return HttpRequest
}


var HttpRequest = getHttpRequest()
	
HttpRequest.open('GET','monChat.php',true)


HttpRequest.onreadystatechange = function() {
	if(HttpRequest.readyState == 4 &HttpRequest.status == 200) {
		document.getElementById('testert').innerHTML = HttpRequest.responseText
		alert("je rentre")
	}
}

HttpRequest.send()

La ligne:
alert("je rentre")
ne se déclenche jamais alors que le statue est bien afficher a 200 dans le navigateur, le probléme viendrai donc du parrametre status ? Après quelque recherche pour comprendre a quoi correspond chaque valeur de "status" je ne comprend pas pourquoi celui ci ne passe pas a 4 alors que j'obtient bien une réponse.
Merci beaucoup encore pour le temps que tu m'accorde.

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 753

Tu es toujours en 'GET' pour ton appel ajx.
et par contre.. tu n'as plus de paramètres ?

Tu as également oublié des points-virgules dans ton code JS

De plus, n'as tu pas de message d'erreur dans la console javascript de ton navigateur ?

Pense bien également à vider le cache de ton navigateur ( à faire après chaque modif de code Javascipt ou css... )

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

Posez votre question

Réponse 5 / 5

Val_3990 Messages postés 21 Date d'inscription Statut Membre Dernière intervention

C'est bon ça fonctionne, je n'avait pas vider mon cache alors que je code toute la journée depuis 2 semaine.
Merci beaucoup pour l'aide précieuse que tu m'a apporter je te souhaite une bonne journée / continuation !

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 753

l'oubli du cache... c'est systématique chez les "jeunes" développeurs :-)

Par contre, le fait de ne pas attendre la réponse...ça, ça n'aurait rien changé.

Bonne journée.

PS: Pense à mettre le sujet en RESOLU.

Discussions similaires

probléme avec ajax svp

Problème requête Ajax avec jquery

Afficher un message d'erreur avec l'Ajax

Ajax qui ne fonctionne pas

problème ajax

Votre réponse

Discussions similaires