Problème avec AJAX. Résolu/Fermé

Question

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 = '

bonjour

' 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 !

jordane45 · Answer

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.

Val_3990 · Answer

Le code php complet de ma page principale (ce qui nous intéresse est à la fin) : Chat $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(); */ ?> 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']; } ?> query($querry); $querry2="SELECT * FROM ps_private_message"; $req2 = $con->query($querry2); ?>

Chat with

View profile
Add to close friends
Add to group
Block

fetch(PDO::FETCH_ASSOC)) { ?>

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 : query($querry); ?> fetch(PDO::FETCH_ASSOC)) { ?>

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.

jordane45 · Answer

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

Val_3990 · Answer

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.

Val_3990 · Answer

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 !

Problème avec AJAX.

5 réponses

Discussions similaires