Discussion :

[X3M0S]

Bonjour/Bonsoir,

Pour poser un peu le contexte, je suis étudiant et j'ai un jeu d'énigmes à réaliser en ligne. Dans l'une des énigmes, le joueur dois choisir entre 5 propositions d'images différentes.
Donc, au click (sur l'image) je doit aller vérifier si l'image sur laquelle il a clické est la bonne.

J'ai donc mes images au format :

Code html :

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

<a id="rep_X_eni_X" class="rep_eni_X" href=""><img src="'.base_url().'/assets/img/eni_X/rep_a.png" alt="Réponse X : XXXXXX"></a>

(je suis même pas sûr d'avoir besoin de la balise <a></a> du coup ..? (je pose la question pour être sûr)


Je cherche donc à faire mon appel ajax à partir de ça.

Niveau : Débutant

Merci pour votre aide !

[Doksuri]

Bonjour et bienvenu sur le forum

vu que ton traitement est a faire en JS, tu n'as effectivement pas besoin de la balise <a>

de plus :
si ton exercice te force a faire de l'ajax, ok... sinon, tu n'as même pas besoin de faire un appel ajax pour cet exercice

ce que tu peux faire c'est <img src="'.base_url().'/assets/img/eni_X/rep_a.png" alt="Réponse X : XXXXXX" onclick="traitementImage()">

et dans sont script JS :

Code :

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

1
2
3
function traitementImage() {
console.log("faire l'ajax ici");
}

au cas ou ton exercice t'obliges a faire de l'ajax : tu peux utiliser fetch() developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

[X3M0S]

Bonjour Doksuri,

Tout d'abord merci pour ta réponse rapide

Ensuite effectivement, l'exercice nous oblige à utiliser l'appel Ajax.

D'accord pour le script JS, c'est l'idée que je me faisais, maaaaaaiiisss .. Dans mon appel Ajax, comment je fais pour envoyer les "data". Comment je les remplient avec des valeurs étant donné que je n'ai que des images.

Et pour la fonction fetch() .. Je n'ai pas bien compris à quoi elle servait. Es le moyen d'envoyer mes data à partir d'une image ?


Niveau : Débutant

Merci pour votre aide !

[Invité]

Bonjour,

Montre comment tu t'y prends quand ce ne sont pas des images.

[X3M0S]

Bonjour jreaux62,

Et bien, par exemple, pour vérifié les donnés d'un formulaire voici ce que j'avais fait :

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
<form action="validation.php" method="post">
		<fieldset>
			<legend style="padding: 1em;">Ceci est un jour sans connexion</legend>
			<label for="nom">Votre nom</label>
			<input id="nom" type="text" name="nom" placeholder="John" style="padding: 4px; margin-bottom: 10px;">
			<span id="erreurNom" style="color: #ff4646;"></span><br>
 
			<label for="mail">Votre mail</label>
			<input id="mail" type="mail" name="mail" placeholder="john@exemple.ex" style="padding: 4px;">
			<span id="erreurMail" style="color: #ff4646;"></span>
 
			<p style="color:red; font-size: 0.8em; font-weight: bold;">Tous les champs sont obligatoire</p><br>
			<input type="submit" value="Envoyer">
			<span id="success"></span>
		</fieldset>
	</form>

Code JavaScript :

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
<script>
	$(document).ready(function() {
		$('form').submit(function(event){
			console.info('Envoi du formulaire') ;
			event.preventDefault(); // On empêche l'envoi du formulaire
			console.log("1) Envoi du formulaire en AJAX");
			envoiFormulaire();
			var data ={};
			$("#prenom").val("");
			$("#email").val("");
			console.log("2) Formulaire envoyé en AJAX");
		});
 
		function envoiFormulaire() {
			var data = {};
 
			$.ajax({
				dataType: 'json',
				type: 'POST',
				url: 'validarion.php',
				data: {'nom': $('#nom').val(), 'mail': $('#mail').val()
				},
				success: function(reponse){
					console.log(reponse);
 
					if (reponse === true){
						console.log('Mail envoyé');
						$("#nom").css("background-color","white");
						$("#erreurNom").html("");
						$("#mail").css("background-color","white");
						$("#erreurMail").html("");
						$("#success").html("<p style='background-color: #4bb54b54; border: 2px #028602b5 solid; padding: 0.5em 0.8em; border-radius: 3px; max-width: 15vw; text-align: center;'>Le mail vous a bien été envoyé !</p>");
					} else {
						$.each(reponse, function(champ, erreur){
							console.log("Erreur sur "+champ+" : "+erreur);
							if (champ==="nom") {
								$("#nom").css("background-color","#ff7676");
								$("#erreurNom").html(erreur);
							}
							if (champ==="mail") {
								$("#mail").css("background-color", "#ff7676");
								$("#erreurMail").html(erreur);
							}
						});
					}
				},
				error: function(){
					console.log('Problème de validation');
				}
			});
		}
	});
</script>

Niveau : Débutant

Merci pour votre aide !

[Invité]

OK.
Déjà, on peut voir que tu codes en jQuery.

Que ce soit avec des images ou autre chose, une (bonne) solution ici est d'utiliser les attributs data-*.

1- Le formulaire :

Code HTML :

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

1
2
3
4
<img src=".........../rep_a.png" alt="Réponse X : XXXXXX" data-imgid="rep_a" class="groupe-images">
<img src=".........../rep_b.png" alt="Réponse Y : YYYYYY" data-imgid="rep_b" class="groupe-images">
<img src=".........../rep_c.png" alt="Réponse Z : ZZZZZZ" data-imgid="rep_c" class="groupe-images">
...

2- jQuery

Code :

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

1
2
3
4
5
6
$('form').on( 'click', '.groupe-images', function(){
   imgid = $(this).data('imgid'); // on récupère le data-imgid de l'image cliquée
   // ici, on peut faire l'appel Ajax
   // ....
 
});

Si tu veux que le choix soit pris en compte à la soumission du formulaire, il ne faut pas non plus oublier qu'on peut utiliser :

• <input type="radio" name="machin" /> pour un choix unique
• <input type="checkbox" name="truc[]" /> pour les choix multiples (name avec des [])

Ex. :

Code HTML :

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

1
2
3
4
<label><input type="radio" name="groupe-images" data-imgid="rep_a" class="groupe-images" /><img src=".........../rep_a.png" alt="Réponse X : XXXXXX"></label>
<label><input type="radio" name="groupe-images" data-imgid="rep_b" class="groupe-images" /><img src=".........../rep_b.png" alt="Réponse Y : YYYYYY"></label>
<label><input type="radio" name="groupe-images" data-imgid="rep_c" class="groupe-images" /><img src=".........../rep_c.png" alt="Réponse Z : ZZZZZZ"></label>
...

Ainsi, on peut voir qu'avec images ou textes, c'est le même principe.

[X3M0S]

Ohooo d'accord, j'y vois beaucoup plus claire à présent !

Mais petite question du coup. Moi ma vérification se fait instantanément quand je clic sur mon image, autrement dit, pas de validation de réponse. Donc en soit, je n'ai pas besoin de ça,

<input type="radio" name="machin" /> pour un choix unique
<input type="checkbox" name="truc[]" /> pour les choix multiples (name avec des [])

Est-ce exact ?


Niveau : Débutant

Merci pour votre aide !

[Invité]

Toi seul connait l'intitulé exact de ton "jeu d'énigmes".

On te donne des pistes, à toi de (sa)voir ce dont tu as besoin.

[X3M0S]

Ok, alors j'ai essayé de mettre ça en place comme ceci :

Code HTML :

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

1
2
3
4
5
6
7
<div id="eni_8" class="d-flex justify-content-between align-items-center h-100 w-100">
    <form>
        <img id="rep_X_eni_X" class="rep_eni_X" data-imgid="rep_X" onclick="verif_rep_eni_X()" src="..." >
        <img id="rep_Y_eni_X" class="rep_eni_Y" data-imgid="rep_Y" onclick="verif_rep_eni_X()" src="..." >
        <img id="rep_Z_eni_X" class="rep_eni_Z" data-imgid="rep_Z" onclick="verif_rep_eni_X()" src="..." >
    </form>
</div>

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
<script>
		function verif_rep_eni_X(){
			var data = {};
			imgid = $(this).data('imgid');
			console.log(imgid);
			$.ajax({
				dataType: 'json',
				type: 'POST',
				url: 'Enigmes/verif_rep_eni_X',
				data: {'rep': imgid},
				success: function (reponse) {
					console.log(reponse);
				},
				error: function () {
					console.log('Problème');
				}
			});
		};
	</script>

J'ai remplacé le

Code :

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

$('form').on( 'click', '.groupe-images', function(){

car il ne faisait strictement rien au clic.

Cependant, maintenant, mon imgid n'est pas définit au clic ...
Pourquoi ?


Niveau : Débutant

Merci pour votre aide !

[X3M0S]

Oh ! C'est bon j'ai réussis. Je crois que c'était une erreur de ma part pour le message précédent.

Voici donc l'idée pour ceux qui chercheraient aussi !

Code HTML :

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

1
2
3
4
5
6
7
<div id="eni_X" class="d-flex justify-content-between align-items-center h-100 w-100">
 
        <img class="rep_eni_X" data-imgid="rep_X" src="..." alt="..." />
        <img class="rep_eni_X" data-imgid="rep_Y" src="..." alt="..." />
        <img class="rep_eni_X" data-imgid="rep_Z" src="..." alt="..." />
 
</div>

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
		$('#eni_X').on( 'click', '.rep_eni_X', function(){
			var data = {};
			imgid = $(this).data('imgid');
			console.log(imgid);
			$.ajax({
				dataType: 'json',
				type: 'POST',
				url: 'Enigmes/verif_rep_eni_X',
				data: {'rep': imgid},
				success: function (reponse) {
					console.log(reponse);
				},
				error: function () {
					console.log('Problème');
				}
			});
		});

********* CE MESSAGE A ETE MODIFIE *********

Merci beaucoup pour votre aide !

PROBLEME RESOLU

[Invité]

Correction :

Code HTML :

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

1
2
3
4
5
6
7
<div id="eni_X" class="d-flex justify-content-between align-items-center h-100 w-100">
 
        <img class="rep_eni_X" data-imgid="rep_X" src="..." alt="..." />
        <img class="rep_eni_X" data-imgid="rep_Y" src="..." alt="..." />
        <img class="rep_eni_X" data-imgid="rep_Z" src="..." alt="..." />
 
</div>

• Il faut la même classe "rep_eni_X"
• J'ai supprimé ce qui est inutile