Réaliser un sondage en ajax

[mademoizel]

Bonjour à tous,

J'ai réalisé un site web en PHP dans lequel j'ai mis en place un sondage. Ce sondage est en PHP et je souhaiterai le faire en ajax mais je ne sais pas du tout comment faire. Pouvez vous m'aider s'il vous plaît.

Merci d'avance

[ionesco]

C'est beaucoup trop vague comme demande.

Quels sont les fonctionnalités que tu souhaites mettre en place en AJAX?

[mademoizel]

J'ai essayé de faire quelque chose avec jQuery mais je bloque

j'ai mon formulaire en php et j'ai fait un fichier js.

code php:

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
 
$chaine.='<table>';
			$chaine.='<tr>';
				$chaine.='<td>'.$row['QUESTION'].'</td>';
 
			$chaine.='</tr>';
 
			while($ligne=mysql_fetch_array($executeR))
			{
				$chaine.='<tr>';
					$chaine.='<td><label>'.$ligne['REPONSE'].'</label><input type="radio" name="reponse" value="'.$ligne['REPONSE'].'" ></td>';
					$chaine.='<input type="hidden" name="id" value="'.$ligne['IDREPONSES'].'" >';
					$chaine.='<input type="hidden" name="question" value="'.$row['IDQUESTION'].'">';
				$chaine.='</tr>';
 
			}
 
			$chaine.='<tr>';
				$chaine.='<td><a href="#" onclick="sondage()"><input type="button" name="submit" value="voter"></a></td>';
			$chaine.='</tr>';
 
		$chaine.='</table>';

mon fichier js

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
 
function sondage()
{
	alert('coucou');
 
	$.ajax({
	url :'../blog/sondage.php',
	async :true,
	context :$('sondage_' + id),
	data :'action=voter&sondage_id=' + encodeURIComponent(id)+'&rep_sondage='+encodeURIComponent(reponse),
	type :'POST'
	});
 
 
}

J'ai mis une alert('coucou') afin de tester si lorsque je clique sur mon bouton ça appelle bien ma fonction js. Résultat: j'ai bien le coucou qui s'affiche mais ensuite rien ne se passe.

[RomainVALERI]

Envoyé par mademoizel

J'ai essayé de faire quelque chose avec jQuery mais je bloque

OK, on a donc localisé le problème.

Heu... pourquoi déjà passer à jQuery avant de saisir les bases d'AJAX... ?

Jette un oeil aux tutoriels d'abord puis, en effet, tu choisiras peut-être, dans un deuxième temps, de profiter des différentes abstractions offertes au développeur par jQuery pour les requêtes AJAX, mais là il me semble que tu fais le choix dangereux de sauter une étape...

(par contre, je ne connais pas la syntaxe précise de la fonction ajax() de jQuery, mais je suppose qu'il doit y avoir une ou plusieurs propriétés de l'objet-paramètre qu'on peut préciser pour associer une ou des fonctions de callback à ton appel... non ? genre onSuccess ou quelque chose du genre ^^)

[mademoizel]

Merci pour ta réponse.

J'ai utilisé jQuery car on ma dit que c'était plus simple d'utiliser une librairy pour de l'ajax.
Oui, il y a la propriété onSuccess.

Tout ce ce que je veux faire c'est mettre en ajax mon sondage car pour le moment il est en php afin d'éviter de recharger toutes la page.

[RomainVALERI]

A la limite, essaie déjà de tester le retour de l'appel :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function sondage()
{
   alert("appel ajax");
 
   $.ajax({
   url :'../blog/sondage.php',
   async :true,
   context :$('sondage_' + id),
   data :'action=voter&sondage_id=' + encodeURIComponent(id)+'&rep_sondage='+encodeURIComponent(reponse),
   type :'POST',
   onSuccess: function() {
      alert("retour ajax");
  }
});
}

[mademoizel]

J'ai testé et la première alert => alert("appel ajax"); : s'affiche mais la deuxième => alert("retour ajax"); : ne s'affiche pas

[mademoizel]

J'ai passer en paramètre lors de mon appel à ma fonction, l'id de la question du sondage. Comment faire pour ensuite récupérer la réponse que l'utilisateur à choisi?

[RomainVALERI]

Envoyé par RomainVALERI

(par contre, je ne connais pas la syntaxe précise de la fonction ajax() de jQuery, mais je suppose qu'il doit y avoir une ou plusieurs propriétés de l'objet-paramètre qu'on peut préciser pour associer une ou des fonctions de callback à ton appel... non ? genre onSuccess ou quelque chose du genre ^^)

Envoyé par mademoizel

Oui, il y a la propriété onSuccess.

J'étais parti dans l'idée que tu avais vérifié cette information, étant donné le ton assertif et définitif de ta réponse à ce sujet

Or, il se trouve que onSuccess n'existe pas mais success, oui.

Heu, je me demande quelle référence précise tu utilises pour jQuery...

[mademoizel]

Oui désolé, je me suis trompé comme on dit l'erreur est humaine

J'ai pas mal avancé sur ce sujet.
Mais je rencontre un tout petit problème. J'ai réussi (grâce à jquery) de faire mon sondage en ajax. Lorsque que je clique sur une réponse il incrémente de 1 en base de données le nombre de réponse correspondant à la réponse cochée.
Mais je me suis aperçu qu'il incrémentait toujours la même réponse.
Mais je ne comprend pas pourquoi.

Ma page qui contient mon formulaire

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
 
 
$executeR=mysql_query($requeteR);
		$chaine.='<form name="formSondage" id="formSondage" action="#">';
			$chaine.='<div id="resultat">';
			$chaine.='<table>';
				$chaine.='<tr>';
					$chaine.='<td>'.$row['QUESTION'].'</td>';
 
				$chaine.='</tr>';
 
				while($ligne=mysql_fetch_array($executeR))
				{
					$chaine.='<tr>';
						$chaine.='<td><label>'.$ligne['REPONSE'].'</label><input type="radio" name="reponse" value="'.$ligne['REPONSE'].'" ></a></td>';
						$chaine.='<input type="hidden" name="id" id="reponse" value="'.$ligne['IDREPONSES'].'" >';
						$chaine.='<input type="hidden" name="question" id="question" value="'.$row['IDQUESTION'].'">';
					$chaine.='</tr>';
				}
				$chaine.='<tr>';
					$chaine.='<td><input type="submit" name="submit" value="voter" class="bouton"></td>';
				$chaine.='</tr>';
			$chaine.='</table>';
			$chaine.='</div>';
		$chaine.='</form>';
	echo $chaine;

Mon code ajax qui récupère l'id de la réponse ainsi que l'id de la question et qui renvoit ces paramètre vers ma page de traitement

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
$(document).ready( function () {
	$("#formSondage").submit( function() {							 
		$.ajax({
		   type: "POST",
		   url: "../blog/traitement.php",
		   data: "question="+$("#question").val()+"&reponse="+$("#reponse").val(),
		   success: function(msg){
 
				$("div#resultat").html("<span id=\"confirmMsg\">"+msg+"</span>");
 
 
		   }
		});
		return false;
	});
});

Mon traitement : cette page permet d'incrémenté de 1 pour la réponse que j'ai coché et renvoi le résultat avec le pourcentage de vote pour la réponse.

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
$(document).ready( function () {
	$("#formSondage").submit( function() {							 
		$.ajax({
		   type: "POST",
		   url: "traitement.php",
		   data: "question="+$("#question").val()+"&reponse="+$("#reponse").val(),
		   success: function(msg){
 
				$("div#resultat").html("<span id=\"confirmMsg\">"+msg+"</span>");
 
 
		   }
		});
		return false;
	});
});

Merci d'avance pour votre réponse

[RomainVALERI]

Envoyé par mademoizel

Oui désolé, je me suis trompé comme on dit l'erreur est humaine

Pas de souci, t'inquiete des erreurs j'en fais tellement moi aussi que je ne vais pas me mettre à condamner celles des autres

Sinon : c'est quoi ça ?

Code :

val()

(fonction maison ou fonction jQuery ? )

[mademoizel]

val() permet de récupérer la valeur de l'id.
C'est une fonction de jQuery