Discussion :

[double-m]

Bonsoir à tous et à toutes,

Je fais appel à votre aide puisque cela fait plusieurs heures que je sèche sur une anomalie, dont je n'arrive pas à trouver la cause.

Je cherche à créer un questionnaire interactif en PHP/JQUERY et tout fonctionne sauf le plus important à savoir la remontée du score final a l'utilisateur.
Je m'explique...

Le script JS va verifier (via une boucle) pour chaque réponse sélectionnée (via requete AJAX) si le code réponse est bien égal à 1.
Si c'est le cas il additionne +1 au score global, et stocke cela dans une variable "total" et affecte la valeur de cette variable à un élément du DOM qui est caché (<p id="score_value"></p>)

Ensuite une autre fonction est censée récuperer la valeur de (<p id="score_value"></p>), stocker l'info dans la base de données et informer l'utilisateur.
Sauf que dans cette variable la valeur retournée de (<p id="score_value"></p>) est nulle et je ne comprends pas pourquoi.

J'ai sans doutes du faire une erreur quelque part mais je ne vois pas ou.
Je vous serais extremement reconnaissant de me dire quelle erreur j'ai pu faire car je ne vois du tout (J'ai essayé beaucoup de modifications sans succès).
Je suis à l'écoute de tout vos conseils avisés.

Pour vous aider voici le code en question qui me pose probleme :

LA PARTIE HTML / PHP :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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
28
29
30
31
32
<div class="container-fluid">
	<!-- AFFICHAGE DU SCORE DE L'UTILISATEUR -->
	<p id="score_value"></p>
	<div id="score"></div>
	<!-- FORMULAIRE DE CHOIX DU THEME DU QUESTIONNAIRE -->
	<div class="col-lg-3">
		<div class="panel panel-primary">
			<div class="panel-heading">CHOIX DU THEME DE QUESTIONS</div>
			<div class="panel-body">
				<form>
	              <div class="form-group">
	        			<select class="form-control" id="themeQuestion">
	        				<?php
                                                        $sql_themes= "SELECT theme FROM themes";
                                                        $req_themes = mysqli_query($conn,$sql_themes);
                                                        foreach ($req_themes as $data) {?>
	        						<option value="<?php echo $data['theme']?>"><?php echo $data['theme']?></option>;
	        					<?php }?>
	        			</select>
	              </div>
	              <a href="#" class="btn btn-primary" id="confirm_theme_questionnaire">VALIDEZ</a>					
				</form>
			</div>
		</div>		
	</div>
	<div class="col-lg-9" id="displayQuestions">
		<!-- AFFICHAGE DYNAMIQUE DES QUESTIONS -->
 
	</div>
	<a href="#" class="btn btn-success col-lg-12" id="confirm_reponses_questionnaire">VALIDEZ LES REPONSES</a>
 
</div><!-- fin du container -->

LA PARTIE JQUERY :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<script>
$(function(){
 
	//AFFICHAGE DES QUESTIONS EN RAPPORT AVEC LE THEME CHOISI ET DESACTIVATION DU BOUTON
	$("#confirm_theme_questionnaire").on('click', function(){
 
		var theme = $("#themeQuestion").val();
 
		//AJAX
		$.ajax({
 
		    method : 'POST',
		    url: "ajax/questionnaire.php?action=recupQuestions",
		    data : {theme : theme},
		    dataType : 'html', 
		    success: function(data)
		    {
		    	$("#displayQuestions").show().html(data).fadeIn(4000);
		    	$("#score_value").hide();
			}
 
		});//!! AJAX
 
	});//FIN FONCTION
 
 
	//ENVOI DES REPONSES ET VERIFICATION ET STOCKAGE DANS LA BASE DE DONNEES
	$("#confirm_reponses_questionnaire").on('click',function(){
 
		$("#confirm_reponses_questionnaire").fadeOut('slow');
 
		$("#score_value").text(0);
 
		//POUR CHAQUE BOUTON RADIO SELECTIONNE VERIFIER SI LA REPONSE EST OK EN BDD
		//SI CODE REPONSE =1 C'EST LA BONNE REPONSE SINON ELLE EST FAUSSE
		$('input[type=radio]:checked').each(function(){
			var reponse = $(this).val();
			//console.log(reponse);
 
		       $.ajax({
		           method : 'POST',
		           url: "ajax/questionnaire.php?action=checkReponses",
		           data : 
		           {
		               reponse : reponse
		           },
		           dataType : 'html', 
		           success: function(data)
		           {
		            //$("#validerChoixTheme").addClass('disabled');
 
			       var retourReponse = JSON.parse(data);
			       var codeReponse = retourReponse.code
 
				       //SI CODE REPONSE = 1 LA REPONSE EST BONNE ET ON AJOUTE +1 AU SCORE
				       //ET ON MET LE CHAMP RADIO ENTOURE EN VERT
					   if (codeReponse == 1 ) 
					   {
					    var score = $("#score_value").text();
					    var chiffre = parseInt(score);
					    var reponseOk = parseInt(1);
					    var total = chiffre + reponseOk;
 
					    $("#score_value").text(total);
 
					   }
				   }
 
		       });//FIN REQUETE AJAX	
 
		});//FIN BOUCLE DE VERIF DES REPONSES
 
		checkAndSaveScore();
 
	});//FIN FONCTION
 
/* *************************  FONCTIONS GLOBALES JQUERY ********************************** */
//FONCTION DE VERIFICATION DU SCORE ET AFFICHAGE DU RESULTAT AU USER
function checkAndSaveScore()
{
	// AJAX POUR AFFICHER LE MESSAGE PERSONNALISE EN FONCTION DU SCORE
	var score = $("#score_value").text();
	var user = $("#user_logged").text()
 
	$.ajax({
		method : 'POST',
		url: "ajax/questionnaire.php?action=checkScore",
		data : 
		{
			score : score,
			user : user
		},
		dataType : 'html', 
		success: function(data)
		{
			$("#score").html(data).show();
		}
 
	});//FIN REQUETE AJAX
}//FIN FONCTION GLOBALE
 
 
});//FIN SCRIPT JQUERY

Je vous souhaite une bonne soirée.

[SpaceFrog]

Avant de répondre au fond du souci, j'ai remarqué ceci

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$("#displayQuestions").show().html(data).fadeIn(4000);

pas logique de faire un show() avant de renseigner le html puis de faire un fadeIn

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$("#displayQuestions").html(data).fadeIn(4000);

me paraîtrait plu approprié...

Je regarde pour le reste ...
Mais a première vue je dirais qu'il manque un bout de code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

ajax/questionnaire.php?action=checkScore

il est dans le data en retour ton

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<p id="score_value"></p>

Si c'est le cas vérifie ton retour en console... mais à première vue je dirais que le souci vient de la page php qui génère ton retour html

[double-m]

Merci pour ton conseil tu as tout à fait raison !! Je vais corriger de suite cette anomalie.

A vrai dire le souci c'est que j'arrive à avoir le retour de mon ajax (via une boucle) et à mettre la valeur du score dans <p id="score_value"></p>j'ai vérifié via une console et j'ai bien le score qui s'incremente et meme le DOM se met a jour.

Par contre des que je sors de la boucle et que je cherche a récupérer le chiffre stocké dans <p id="score_value"></p> via un $("#score_value").text(), situé dans ma fonction checkAndSaveScore et bien la variable est égale à 0 et c'est ça que je ne m'explique pas.

Sans doutes j'ai du louper un épisode ou mal concevoir quelque chose...

Entre temps j'ai une autre piste, je voulais votre avis...
Est ce que selon vous ca marchera si au sein de ma boucle je fais un appel AJAX qui incrémente la valeur d'une variable de SESSION du type $_SESSION['score'], et que dans une fonction JS annexe j'appelle la valeur de cette variable de session ?

Si vous avez une autre idée je suis ouvert à toute suggestion.

[SpaceFrog]

Tu as un souci de chronologie ...
tu ne lances pas la fonction checkandsavescore dans le success de l'ajax ...

Donc lorsqu'elle est lancée tu n'as pas encore eu le retour ...

[double-m]

Ok je comprends mieux.

En revanche si je fais cela, je vais vérifier et enregistrer le score à chaque fois qu'il y a une incrémentation de score.
C'est a dire que je vais lancer cette fonction au sein de la boucle qui vérifie et incrémente le score a chaque bonne réponse.

Je suis quasiment sur que je me suis pris la tête et qu'il y a plus simple comme solution pour arriver au resultat final.

[double-m]

Bonjour a tous et a toutes,

Finalement j'ai réussi a trouver la solution à mon problème.

J'ai fini par re-concevoir tout mon code JQUERY de telle manière a lister toutes mes réponses dans un array et de faire la boucle d'incrémentation du score au sein d'une requête AJAX PHP.

Merci encore pour vos réponses.