[AJAX] Affichage en AJAX

Version imprimable

Voir 40 message(s) de cette discussion en une page

30/04/2014, 13h05
vinceom92

[AJAX] Affichage en AJAX

Bonjour,

Comme le titre du sujet l'indique, j'aimerais afficher des enregistrements issues de la base de données en AJAX.

Comme je l'explique en commentaires dans les deux fichiers PHP, je suis arrivé à établir une transmission entre les deux pages, j'arrive à envoyer la variable mais je n'arrive pas à la recevoir dans la page du traitement PHP.

En essayant de régler la réception de la variable, j'ai fait buggé l'envoi. Avant, il n'y avait pas de message d'erreur maintenant si !

Vous trouverez plus d'explications dans les fichiers PHP.

C'est quand même mieux que l'autre fois ;) !

En pièces jointes, je vous mets les deux fichiers.
30/04/2014, 13h36
freddou17

Slt,

Première chose

Code:

xhr.open("GET", "recuperation_donnees_correction.php", true);

n'est pas compatible avec

Code:

xhr.send (id_cours_tp);

si tu es en POST, tu mets les paramètres dans xhr.send("id_cours_tp="<?php echo $id_cours_tp; ?>)si tu es en GET, les paramètres se passent après l'url

Code:

xhr.open("GET", "recuperation_donnees_correction.php?id_cours_tp="<?php echo $id_cours_tp; ?>, true);

En regardant de plus près tes fichiers

Code:

$id_cours_tp = mysql_real_escape_string($_POST['id_cours_tp']);// Identifiant du Cours/TP dynamique; // J'ai essayé $_POST['id_cours_tp'] et $_GET['id_cours_tp'] mais pareil

ne pouvait pas marcher avec GET ou POST ...

;)

++

On avance puisque maintenant les données s'affichent mais pas dynamiquement.
Lors des tests, des messages d'erreurs s'affichent :
- "Error: returned status code 0"
- "Error: returned status code 200 OK".

Si je poste une réponse, elle ne s'affiche pas dynamiquement : il faut recharger la page pour qu'elles s'affichent.

Comment faire pour éliminer ces deux message d'erreurs et pour faire afficher les données SANS rechargement de la page ?

J'ai modifié la fonction go, la voici :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 <script type='text/javascript'> function go(id_cours_tp) { // Envoi de l'identifiant du cours var xhr = init_xhr(); xhr.onreadystatechange = function() { if(xhr.readyState == 4) { if(xhr.status == 200) { reponse=xhr.responseText; reponse=xhr.responseText; document.getElementById('reponse').innerHTML = reponse; } else { document.ajax.dyn.value="Error: returned status code " + xhr.status + " " + xhr.statusText; } } } xhr.open("POST", "recuperation_donnees_correction.php", true); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); var id_cours_tp = '<?php echo $id_cours_tp; ?>'; xhr.send("id_cours_tp=<?php echo $id_cours_tp; ?>"); } </script>
Il n'y a plus de message d'erreur mais ce n'est toujours pas dynamique, il faut recharger la page pour voir les nouvelles réponses postées.
Comment faut-il faire pour rendre dynamique l'affichage des réponses (sans rechargement de la page) dans le <div> reponse ?

A noter que j'appelle la fonction avec <body onload="go(<?php echo $id_cours_tp; ?>);">.

30/04/2014, 16h50
freddou17
Pas trop vite...prend le temps de debbuger et de transmettre les résultats de ton debug, (à partir de quel echo, quelle alert... ça plante...).
De plus la fonction que tu affiches dans le post n'est pas la même que dans ton fichier joint (un peu de concordance serait le bienvenu).

Pour les messages d'erreurs supprime
Code:

1 2 3 4 5 else { // La réception des données ne s'effectue pas alert("Error: returned status code " + xhr.status + " " + xhr.statusText); }
de ta fonction go

Ensuite que fais le résultat de

Code:

alert(xhr.responseText)

qui/quoi appelle go mis à pars onload parce que onload est appelée qu'une fois, au chargement de la page

;)
30/04/2014, 17h58
vinceom92

En pièces jointes, tu trouveras les trois fichiers. On part de ceux-là comme base.
-correction_reponses_cours.php est la page qui permet d'afficher les réponses du cours choisi (c'est sur celle-là que je voudrais afficher les enregistrements dynamiquement en AJAX)
-recuperation_donnees_correction.php est la page dans laquelle il y a le traitement PHP qui permet d'afficher les données
-gestion_cours_tpbis.php est la page dans laquelle il y a les deux formulaires : celui pour modifier les cours et celui pour corriger les cours (c'est celui-ci qui nous intéresse)
Avec ce code, je n'ai pas d'erreur qui s'affiche.

Il affiche les réponses issues de la base de données comme je voudrais... sauf qu'il ne le fait pas dynamiquement c'est-à-dire quand je teste : je choisi un cours, j'arrive sur la page (correction_reponses_cours.php) sur laquelle je vois les réponses, je vais poster une réponse et je retourne sur la page (correction_reponses_cours.php) sur laquelle la réponse postée n'est pas affichée. Pour pouvoir la voir, il faut recharger la page alors que je voudrais qu'elle s'affiche toute seule, sans recharger la page.

La fonction go() est appelée qu'une fois, au chargement de la page. Est-ce qu'il faut faire un setTimeout('go()',2000) ? Comment lui faire comprendre : dès qu'il y a un enregistrement de plus dans la base de données, tu l'affiches automatiquement, tout seul, sans rechargement de la page ?
A prendre en compte aussi : J'ai mis un <textarea> pour pouvoir poster des commentaires et des boutons radios. Il faut, donc, laisser du temps à l'utilisateur pour pouvoir y répondre.
01/05/2014, 11h07
freddou17

le setTimeout est une solution pour controler l'enregistrement d'une nouvelle réponse...
01/05/2014, 11h44
vinceom92

Donc, je ne peux pas l'utiliser pour rendre dynamique l'affichage des nouvelles réponses ?

Je ne comprends pas pourquoi ça ne fonctionne pas car il arrive à afficher les réponses en rafraichissant la page. Or, j'ai utilisé l'objet xhr pour rendre dynamique cette page, qu'est-ce qu'il ne va pas ?!

En gros, ça fonctionne mais comme si je n'utilisais pas l'objet xhr c'est-à-dire que si j'affichais les enregistrements tout simplement en PHP, j'obtiendrai le même résultat en rafraichissant la page.
02/05/2014, 09h03
freddou17

Si ta page peut être dynamique avec un setTimeOut qui rappelle la fonction go

Citation:

Je ne comprends pas pourquoi ça ne fonctionne pas car il arrive à afficher les réponses en rafraichissant la page

c'est normal, c'est le onload qui appelle ta fonction AJAX. En mettant un setTimeout tu vas rappeler ta fonction AJAX à intervalle régulier. Par contre si jamais l'utilisateur peut saisir dans les mêmes zones de travail que ta fonction de callback, c'est risqué;

L'objet xhr n'est pas le même que sur les pages ou tu saisis les réponses. Il ne peut pas deviner qu'une insertion a été faite en BDD. Dans ton cas je ferrais quelque chose du genre

- 1 page ou les gens affiche le cours et saisissent des réponses (insertion en BDD)
- 1 page admin qui affiche les réponses (pour moi le faite de rafraichir n'est pas déconnant, affichage des réponse sans AJAX)

Je pense que tu peux garder le rafraichissement totale de page pour les réponses et, par exemple faire une requete AJAX (avec setTimeOut) qui va faire un count en BDD du nombre de réponse et s'il a augmenté alors tu fais simplement alert("nouvelle réponse détéctée") et là tu rafraichis. (principe des notifications)

... ++
02/05/2014, 09h17
vinceom92

Donc pour toi, ce n'est pas gênant que la page qui affiche les réponses issues de la base de données ne soit pas dynamique ? En effet, le fait qu'il doit remplir et soumettre un formulaire oblige à lui laisser du temps.

Citation:

Envoyé par freddou17

Je pense que tu peux garder le rafraichissement totale de page pour les réponses et, par exemple faire une requete AJAX (avec setTimeOut) qui va faire un count en BDD du nombre de réponse et s'il a augmenté alors tu fais simplement alert("nouvelle réponse détéctée") et là tu rafraichis. (principe des notifications)

Je vais faire ça, je vais m'y mettre et je te donne des nouvelles.

A toute !!! :D
02/05/2014, 10h24
vinceom92

En pièce jointe, tu trouveras le fichier du traitement PHP dans lequel j'ai ajouté :
- une requête SQL $compte_reponses_eleves qui permet de compter les enregistrements
- une condition qui permet de tester s'il y a un nouvel enregistrement dans la table "reponses" dans laquelle j'ai mis l'alerte javascript et l'affichage des nouveaux enregistrements

Comme tu le verras en commentaires, j'ai essayé avec un COUNT mais il n'y a pas de différence. Merci de ton aide !

En faisant un echo '<script type="text/javascript" language="javascript">alert("Nouvelle réponse détéctée !!!");</script>'; dans le traitement PHP, l'alerte ne s'effectue pas. Pour essayer, je l'ai mis après echo "Passage avant empty<br />"; et elle ne s'affiche pas.
02/05/2014, 12h04
freddou17
Ta requête me parait compliquée! Pourquoi mettre une joint sur test_utilisateur vu que tu ne t'en sers pas.

Peux tu essayer ça dans phpMyAdmin
Code:

1 2 3 4 5 6 select count(id_reponse) from reponses r JOIN questions q ON q.id_question=r.id_question JOIN chapitres c ON (c.id_chapitre = q.id_chapitre AND c.id_cours='".$id_cours_tp."')
Je te rappelle que cette requête est appelée par ajax.

Au 1er chargement je stocke le résultat de cette requête dans un champs hidden puis après j'effectue mon appel AJAX tout les xx secondes (selon ce que j'ai paramétré dans mon setTiemOut). Si le résultat de mon chp hidden est différent de mon retour AJAX alors "alert..." + maj de mon champ hidden

Compris???

++
02/05/2014, 14h22
vinceom92

La requête SQL fonctionne, je l'ai modifié dans le fichier du traitement PHP.

En pièces jointes, tu trouveras les fichiers modifiés :
-dans recuperation_donnees_correction.php : j'ai ajouté echo '<input type="hidden" value="'.$affichage_reponses['id_reponse'].'">'; // Résultat de la requête SQL dans un champs hidden ajouté
-dans correction_reponses_cours.php : j'ai ajouté <script type="text/javascript">setTimeout("go(<?php echo $id_cours_tp; ?>)", 2000); </script>.

Ce n'est pas encore ça puisque ça ne fonctionne pas mais l'important est d'avancer ! ;)

Citation:

Envoyé par freddou17

Si le résultat de mon chp hidden est différent de mon retour AJAX alors "alert..." + maj de mon champ hidden

Maintenant, il faut s'occuper de ça...
02/05/2014, 14h34
freddou17

je te laisse me faire un récapitulatif de tes pages (celle là est affichée pour xxx, celle là est utilisée pour xxx...) parce que j'ai l'impression que tu as du mal à voir ou tu vas...

PI: Ce n'est pas parce que tu mets de l'AJAX dans ton site qu'il faut penser toutAJAX car là, à la vue des fichiers que tu m'a envoyé tu mélanges tout...
02/05/2014, 14h50
vinceom92

Voici le récapitulatif :
-la page recuperation_donnees_correction.php est le traitement PHP (celle qui s'occupe de faire les tests pour afficher les enregistrements issus de la base de données)
-la page correction_reponses_cours.php est la page sur laquelle les enregistrements issus de la base de données s'affichent avec le formulaire c'est celle là que j'aimerais que l'affichage soit dynamique

Citation:

Envoyé par vinceom92

Voici le récapitulatif :
-la page recuperation_donnees_correction.php est le traitement PHP (celle qui s'occupe de faire les tests pour afficher les enregistrements issus de la base de données)
// celle là doit contenir simplement la requête du count et faire un echo du résultat....
Citation:
Envoyé par vinceom92
Voici le récapitulatif :
-la page correction_reponses_cours.php est la page sur laquelle les enregistrements issus de la base de données s'affichent avec le formulaire c'est celle là que j'aimerais que l'affichage soit dynamique
celle là
- doit contenir le traitement php qui te permet d'afficher les réponses (pas d'AJAX pour cette action)
- doit contenir ton champ hidden value="le nombre de rep en base"
- doit contenir la fonction pour l'appel ajax
- sachant que la fonction de callback ajax doit faire quelques chose du genre
Code:

1 2 3 4 5 6 7 ... var ancienneVal = document.getElementById("monChampHidden").value; if(anciennceVal == xht.responseText){ alert("une nouvelle réponse a été détectée, veuillez recharger!") } ...
Et pour infos c'est un petit récapitulatif que tu as fait... je t'ai mis assez d'infos pour que tu obtiennes des résultats satisfaisants par toi même. Evite le copier coller de mon code (que je ne teste pas en plus) mais par contre s'il y a des concepts ou des points bloquants pour toi, n'hésites pas à le dire... parce que si ça continue je vais finir par tout te coder et tu n'auras rien appris (c'est pas le but ;) )

02/05/2014, 16h02
vinceom92

En pièces jointes, tu trouveras les deux fichiers avec les modifications effectuées.

L'alerte ne s'affiche pas.

Qu'est-ce qui bloque ?

NB : Avec if(ancienneVal != xhr.responseText) {, voici le déroulement :
-je suis sur cette page (pour corriger),
-je vais poster une réponse,
-je retourne sur la page : il n'y a pas de différence mais à chaque rafraichissement de la page, il y a l'alerte qui s'affiche même quand il n'y a pas de nouvelle réponse !
02/05/2014, 16h28
freddou17
alors

1) explique moi comment tu peux faire
Code:

1 2 3 echo html_entity_decode(stripslashes($query_compte_reponses_eleves['id_reponse'])); echo html_entity_decode(stripslashes($query_compte_reponses_eleves['texte_reponse']));
avec un select count( ... je te laisse lire des tuto sql et réfléchir un peu...:?:?

2) Explique moi pourquoi?
Code:

1 2 var ancienneVal = document.getElementById("id_reponse").value; //pourquoi id_reponse
et peux tu me dire à quoi sert l'input hidden déjà??

J'espère que tu te rendra compte tout seul des non sens que tu as codé...

PI: relis bien ce que je t'ai mis dans les autres post tu ne devrait pas avoir de while dans la requete AJAX. L'AJAX dans notre cas sert juste à remonter le nombre de ligne correspondant au nb de réponse pour un court donné. Une fois qu'on a ce nombre on le récupère grâce à xhr.responseText et on le compare à notre input hidden ancienneValeur et s'il est différent alors on met l'alert(recharger page).

3)
Code:

1 2 3 4 5 6 7 8 if(ancienneVal == xhr.responseText) { reponse=xhr.responseText; alert("une nouvelle réponse a été détectée, veuillez rafraichir la page !"); document.getElementById('reponse').innerHTML = reponse;// pas d'accord avec cette ligne }
Ici tu dis que si le nombre de réponse est inchangé alors tu demandes le rechargement... :alerte: :koi:
Code:

1 2 3 4 5 6 7 if (confirm("une nouvelle réponse a été détectée, veuillez rafraichir la page !")){ window.reload() // c'est une piste }

02/05/2014, 17h03
vinceom92

J'ai supprimé document.getElementById('reponse').innerHTML = reponse; dans le fichier d'affichage.
Dans le fichier d'affichage, var ancienneVal = document.getElementById("id_reponse").value; va chercher la valeur du champs hidden <input type="hidden" id="id_reponse" value="'.$affichage_reponses['id_reponse'].'" />.

J'ai enlevé la boucle while dans le fichier du traitement PHP.

Si je fais un alert(ancienneVal);, l'identifiant de la dernière réponse apparait.

Il faut lui dire que si et seulement si var ancienneVal = document.getElementById("id_reponse").value; n'est pas égal au dernier enregistrement trouvé dans la base de données alors il faut qu'il affiche l'alerte, c'est-à-dire ce test if(ancienneVal != xhr.responseText) { mais si je le change, l'alerte s'affiche à chaque chargement de la page qu'il y ait une nouvelle réponse dans la base de données ou non !

Dans le fichier correction_reponses_cours.php, qu'est-ce qu'il faut modifier et par quoi ?
Dans le fichier recuperation_donnees_correction.php, qu'est-ce qu'il faut modifier et par quoi ?
05/05/2014, 09h49
freddou17

Code:

<input type="hidden" id="id_reponse" value="'.$affichage_reponses['id_reponse'].'" />'; // Résultat de la requête SQL dans un champs hidden ajouté

Tu mets ce code dans un while et du coup ton id n'est pas unique dans ta page, je te le redis ça n'a pas de sens...

Dans ta page ajax tu ne fais de echo de ton count... comment récupérer le nombre de ligne en BDD???

Ton champs hidden doit être unique dans ta page il concerne le nombre de réponses pour un cours (complet) ...

bonne correction

++

Voir 40 message(s) de cette discussion en une page

Fuseau horaire GMT +2. Il est actuellement 02h26.