Enregistrement d'une valeur en base mysql
Bonjour, à tous,
Après avoir résolu mes problèmes de changement d'image sur un onclick dans cette discussion
J'ai maintenant du mal à enregistrer le changement d'une valeur dans la base de données.
J'ai une erreur " Maximum call stack size exceeded" qui semble être du code qui tourne en boucle.....
Je précise que j'utilise bootstrap 4 j'ai corrigé déjà quelques problèmes liés à son utilisation.
Le but de mon projet est de créer un système d'humeur du jour pour les adhérents d'un site.
Chaque adhérent peut donc cliquer sur une image représentant son humeur. Pour le moment un clic permet de passer au niveau supérieur. Il y a 5 images différentes.
Lorsque l'image change je souhaite enregistrer dans la base de donnée la valeur de l'humeur (de 1 à 5).
Ce qui me paraissait facile d'utilisation pour les adhérents me parait maintenant que j'ai mis les mains dans le cambouis plus forcément adapté car si l'utilisateur veut passer du niveau 1 à 4 il faut qu'il clique 3 fois et donc il y aura 3 enregistrement dans la base de données... Pour le moment ça reste un détail, j'aimerai déjà réussir ce que j'avais imaginé au départ.
Voila ou j'en sui pour le moment
Mon script JS
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
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
| <script>
var p = document.getElementById('humeur');
var h = document.getElementById('valhumeur');
console.log(p.src);
p.addEventListener("click", changeimage);
function changeimage(e) {
// gère le changement d'image
var source =p.src;
switch (e.target.attributes.src.textContent){
case 'images/coeurs1.png':
p.src = 'images/coeurs2.png';
h.value =2;
//console.log("coeurs2");
break;
case 'images/coeurs2.png':
p.src = 'images/coeurs3.png';
h.value =3;
//console.log("coeurs2");
break;
case 'images/coeurs3.png':
p.src = 'images/coeurs4.png';
h.value =4;
//console.log("coeurs3");
break;
case 'images/coeurs4.png':
p.src = 'images/coeurs5.png';
h.value =5;
//console.log("coeurs4");
break;
case 'images/coeurs5.png':
p.src = 'images/coeurs1.png';
h.value =1;
//console.log("coeurs5");
break;
default:
//console.log('defaut');
}
// pour vérifier que le code s'exécute jusqu'ici et que les valeurs sont bonnes
console.log(source);
console.log(e.target.attributes.src.textContent);
var valhumeur = document.getElementById("valhumeur").value;
var idclient= document.getElementById("idclient");
console.log('valeur valhumeur: ');
console.log(valhumeur);
$.ajax({
type: 'post',
url: 'humeur.php',
data: {
valhumeur: valhumeur,
idclient: idclient
},
success: function (response) {
// je ne suis pas sûr d'avoir besoin d'un retour c'est juste pour voir si le code s'execute.
$('#res').html("Vos données seront sauvegardées");
}
});
return false;
}
</script> |
Le code HTML
J'ai mis pas mal de truc en commentaire car avant de me lancer dans JS et AJAX je l'ai fait en php pour être sûr que ça fonctionne.
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
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
| <head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- basic -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- mobile metas -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<!-- site metas -->
<title>Miss Minceurs</title>
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="author" content="">
<!-- bootstrap css -->
<!-- <link rel="stylesheet" href="css/bootstrap.min.css">
<!-- style css -->
<link rel="stylesheet" href="css/style.css">
<!-- Responsive-->
<link rel="stylesheet" href="css/responsive.css">
<!-- favicon -->
<link href="images/favicon/favicon.ico" rel="shortcut icon" type="image/x-icon">
<link href="images/favicon/favicon-16x16.png" rel="icon" sizes="16x16" type="image/png">
<link href="images/favicon/favicon-32x32.png" rel="icon" sizes="32x32" type="image/png">
<link href="images/favicon/favicon-48x48.png" rel="icon" sizes="48x48" type="image/png">
<link href="images/favicon/favicon-96x96.png" rel="icon" sizes="96x96" type="image/png">
<link href="images/favicon/favicon-256x256.png" rel="icon" sizes="256x256" type="image/png">
<link href="images/favicon/apple-touch-icon.png" rel="apple-touch-icon" sizes="180x180">
<!--//librairie graphique Chart.js/2.9.3 -->
<!-- <script src="js/Chart.bundle.min.js"></script> -->
<script src="js/Chart.js"></script>
<script src="js/plugin.js"></script>
</head>
<!-- la partie de code gérant l'humeur -->
<div class="row text-right">
<!--Affichage humeur-->
<div class="col-12" >
<!-- <form action="humeur1.php" method="POST"> -->
<form onsubmit="return sendData();" method="POST">
<input id='idclient' name='idclient' type='hidden' value=<? echo$clients['IDClient'];?> >
<input id='valhumeur'name='valhumeur' type='hidden' value=<? echo$clients['Humeur']; ?> >
<!-- <p align="right"> <input id='humeur' name="humeur" type="image" src="images/coeurs<? echo $clients['Humeur']?>.png" alt="" width="160" height"120" /></p> -->
<p align="right"> <img id='humeur' src="images/coeurs<? echo $clients['Humeur']?>.png" alt="" width="160" height"120" /></p>
<!-- <input type="submit" name="submit_humeur" value="changer"> -->
</form>
<div id="res" ></div>
</div>
</br>
</div> |
et le PHP qui est censé être appelé
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <?php
include("./include/connexion.php");
echo("valeur post humeur".$_POST['valhumeur']);
if( isset( $_POST['valhumeur'] ) )
{
if ($_POST['valhumeur']==5){$humeur= 1;} else {$humeur= $_POST['valhumeur']+1;}
echo('valeur humeur: '.$humeur);
$idclient= $_POST['idclient'];
$update = "UPDATE RequiLigneClients SET Humeur=$humeur WHERE IDClient=$idclient";
//$update="UPDATE 'RequiLigneClients' SET Humeur='3' WHERE IDClient='41'";
echo("requete: ". $update);
$result = mysqli_query($conn, $update) or die ('Erreur : '.mysqli_error($conn));
include 'mailhumeur.php';
} |
Le changement d'image et de valeur s'effectue bien.
Le problème semble se poser lors de l'exécution de $.ajax
En console j'ai l'erreur suivante qui me renvoie à Jquery (/*! jQuery v3.6.0 | (c) OpenJS Foundation and other contributors ):
Citation:
jquery.min.js:2 Uncaught RangeError: Maximum call stack size exceeded
at At (jquery.min.js:2:73109)
at At (jquery.min.js:2:73296)
at At (jquery.min.js:2:73296)
at At (jquery.min.js:2:73296)
at At (jquery.min.js:2:73296)
at At (jquery.min.js:2:73296)
at At (jquery.min.js:2:73296)
at At (jquery.min.js:2:73296)
at At (jquery.min.js:2:73296)
at At (jquery.min.js:2:73296)
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
Afficher 170*autres frames
J'ai mis la dernière version de Jquery car celle qui était déclaré dans BootStrap 4 posait des problèmes..... J'espère que ce n'est pas à cause de ça....
Je vous remercie d'avances pour vos conseils et pistes à explorer !
Bonne journée
