IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

AJAX Discussion :

Enregistrement d'une valeur en base mysql


Sujet :

AJAX

  1. #1
    Membre actif

    Homme Profil pro
    Enseignant
    Inscrit en
    août 2006
    Messages
    553
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France

    Informations professionnelles :
    Activité : Enseignant

    Informations forums :
    Inscription : août 2006
    Messages : 553
    Points : 255
    Points
    255
    Par défaut 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 : 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
    <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 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
    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 php : 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
    <?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 ):
    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

  2. #2
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    juin 2003
    Messages
    9 022
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : juin 2003
    Messages : 9 022
    Points : 13 891
    Points
    13 891
    Par défaut
    pour voir si la requete ajax est bien envoyée, vous pouvez utiliser l'onglet "Réseau" de la console de développement de votre navigateur.
    par exemple avec Firefox, faites Ctrl + Maj + E
    https://developer.mozilla.org/fr/doc...ur_r%C3%A9seau

  3. #3
    Membre habitué
    Homme Profil pro
    Autre
    Inscrit en
    juillet 2021
    Messages
    68
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Autre

    Informations forums :
    Inscription : juillet 2021
    Messages : 68
    Points : 128
    Points
    128
    Par défaut
    Bonjour,

    L'erreur peut venir du paramètre idclient envoyé dans la requête ajax. Il faut envoyer la valeur de l'input et pas l'élément lui-même (comme pour le paramètre valhumeur) :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    var idclient = document.getElementById("idclient").value;

  4. #4
    Membre actif

    Homme Profil pro
    Enseignant
    Inscrit en
    août 2006
    Messages
    553
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France

    Informations professionnelles :
    Activité : Enseignant

    Informations forums :
    Inscription : août 2006
    Messages : 553
    Points : 255
    Points
    255
    Par défaut
    Merci Pytet !
    Effectivement c'était bien ça.
    Je n'avais pas creusé de se côté là... et pourtant j'y ai passé un bon moment dessus
    Un œil neuf est toujours plus attentif !

  5. #5
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    16 093
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 16 093
    Points : 40 901
    Points
    40 901
    Par défaut
    Bonjour,
    lorsque l'on utilise jQuery on ne devrait jamais voir ce genre de ligne dans le code :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    var p = document.getElementById('humeur');
    var h = document.getElementById('valhumeur');
    p.addEventListener("click", changeimage);
    il en va de la cohérence de ton écriture.

    Une remarque sur la méthode de suivi du niveau de l'humeur, il me semble plus intéressant de gérer cela avec, par exemple, un attribut data-humeur plutôt que de gérer cela via tes attributes.src.textContent.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [MySQL] Pourquoi ma base n'enregistre pas une valeur
    Par pierrot10 dans le forum PHP & Base de données
    Réponses: 2
    Dernier message: 15/06/2009, 21h07
  2. Réponses: 3
    Dernier message: 23/01/2008, 10h31
  3. Réponses: 0
    Dernier message: 09/12/2007, 15h34
  4. Réponses: 1
    Dernier message: 21/02/2007, 15h07
  5. [C#] Comment enregistrer des données dans un base Mysql ?
    Par zidenne dans le forum Accès aux données
    Réponses: 3
    Dernier message: 21/09/2006, 17h51

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo