Récupérartion données via AJAX

**Sauruos** · 04/08/2018, 10h56

Bonjour ,

Je recontre un soucis concernant avec AJAX et les interactions avec Php/MySQL

J'ai la volonté de créer un formulaire comprennant menu et sous menu de selection .
L'arborescence doit avoir trois niveaux ( Ex : Choix d'une Region -> Choix d'un département -> Choix d'une ville ) .

Voici mon code :

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
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
<?php 
 
include 'bsd.php';
include 'Accueil.php';
?>
<!DOCTYPE html>
    <html>
    <head>
    	<title>Ajout d'une activité</title>
    </head>
    <body>
 
 
    		<div class="container">
    		<h1>Ajout d'une activité </h1>
    	    <form action="Activite1.php" method="post">
            <label for="activiteNom">Nom de l'Activite</label>
            <br />
            <input type="text" id="activiteNom" name="activiteNom" style="width: 800px;" /><br />
 
            <label for="domaine1">1ere Attente fondamentale </label>
            <br />
 
 
 
           	<select class="slt1 custom-select custom-select-md lg-3" name="domaine1" id="domaine1">
            	<option value="0">Selectionner le domaine disciplinaire</option>
            <?php
 
					$reponse = $bdd->query('SELECT * FROM matieres ORDER BY Domaines');
 					while ($donnees = $reponse->fetch()){?>
 
				<option value="<?php echo $donnees['matieresNom']?>"> <?php echo $donnees['matieresNom'] ;?></option>
					<?php };?>
 
			</select>
<!--Script de lancement de l'AJAX -->
  <script type="text/javascript">
$(document).ready(function(){
  /*Les sous menu sont cachés au lancement de la page*/
	$(".subMenu").hide(); 
    $('#domaine1').on('change',function(){
    	var domaine1 = $(this).val();
      /*Affichage du sous menu correspondant */
    	$('.subMenu1').show();
 
        if(domaine1){
            $.ajax({
                type:'POST',
                url:'ajaxData.php',
                data:'matieresNom='+domaine1,
                success:function(html){
                    $('#testAjax').html(html);
                }
            }); 
        }else{
            $('#testAjax').html('<option value="">Selectionner le domaine</option>');
        }
    });
});
</script>
<!--Le sous menu qui doit être alimenté par la req Ajax -->
<div class="subMenu subMenu1">
		<label for="attente1"></label>
<select class="submenu attente1 custom-select custom-select-sm" id="testAjax">
  <option value="0">Selectionner l'attente fondamentale</option>
 </select>
</div>

Ce que j'ai mis en place déjà c'est la partie " visible " :

Selection du premier champ
Affichage du sous menu mais celui ressort vide
La valeur de selection du premier champ ressort bien mais je n'arrive pas à la traiter avec AJAX et la renvoyer dans le deuxieme champ select ( Le subMenu )

Voici la partie Ajax :

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
<?php
//Base de données
include('bsd.php');
//On vérifie les valeurs POST
if(isset($_POST["matieresNom"]) && !empty($_POST["matieresNom"])){
    //Je lance la req pour récupérer dans ma table attentes_fondamentales , toutes les attentes qui correspondent au select du premier menu
    $donnees = $db->query("SELECT attentesNom FROM attentes_fondamentales WHERE matieresID = ".$_POST['matieresNom']."");
    while($row = $donnees->fetch()){ ?>
            echo '<option value=' . $row['attentesNom].>'.$row['attentesNom'].'</option>';
        }
    }else{
        echo '<option value="">. 'Attentes non définies' .</option>';
    }
 ?>

Etant encore novice , j'ai besoin de votre aide afin de répondre à ce problème . Je trouve tout et son contraire sur le Net , je ne sais plus ou chercher ...

Est ce un problème de syntaxe , de logique , suis-je complètement à coté de ce que je dois faire ?

Merci d'avance pour le temps que vous me consacrerez .

Invité · 04/08/2018, 12h36

Bonjour,

Le script Ajax n'est (à priori) pas en cause.
Cela dit, on peut améliorer :

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
<script>
$(document).ready(function(){
	/*Les sous menu sont cachés au lancement de la page*/
	$(".subMenu").hide(); 
	$('#domaine1').on('change',function(){
		var domaine1 = $(this).val();
		/*Affichage du sous menu correspondant */
		$('.subMenu1').show();
 
		if( domaine1 != 0 )
		{
			$.ajax({
				type:'POST',
				url:'ajaxData.php',
				data:'matieresNom='+domaine1,
				success:function( txthtml ){
					$('#testAjax').html( txthtml );
				}
			}); 
		} else {
			$('#testAjax').html( '<option value="0">Sélectionner l\'attente fondamentale</option>' );
		}
	});
});
</script>

Par contre, ton code PHP est bourré de fautes !

ajaxData.php

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
20
21
22
23
<?php
//Base de données
include('bsd.php');
//On vérifie les valeurs POST
$matieresNom = ( isset($_POST["matieresNom"]) ) ? $_POST["matieresNom"] : 0;
if( $matieresNom != 0 )
{
	//Je lance la req pour récupérer dans ma table attentes_fondamentales , toutes les attentes qui correspondent au select du premier menu
	$donnees = $db->prepare("SELECT attentesNom FROM attentes_fondamentales WHERE matieresID = ?");
	$donnees->execute( array($matieresNom) );
 
	if( $donnees->rowCount() > 0 )
	{
		while( $row = $donnees->fetch() )
		{
			echo '<option value="'.$row['attentesNom'].'">'.$row['attentesNom'].'</option>';
		}
	} else {
		echo '<option value="0">Attentes non définies</option>';
	}
} else {
	echo '<option value="0">Sélectionner l\'attente fondamentale</option>';
}

Pour info :

"la partie Ajax" correspond au code entre <script>.
ajaxData.php est un fichier PHP, appelé via Ajax.

**Sauruos** · 04/08/2018, 15h20

Envoyé par jreaux62

...[....]...

Merci pour vos réponses à tout les deux .
J'ai repris ton code en copier/coller afin de voir ce qu'il se passe dans mon code .

Après analyse il se trouve que lors de l'appel de la fonction ajax()
c'est le dernier else sur ajaxData.php qui ressort ( j'ai pu m'en rendre compte en modifiant ce que renvoi le else )

Donc ce que tu m'as envoyé fonctionne mais je ne comprends pas pourquoi il ne me renvoie pas ce que je demande ...

J'envoie également le sousmenu où les données doivent être envoyées desfois que je loupe un truc ....

Code :

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

1
2
3
4
5
6
7
<!--Le sous menu qui doit être alimenté par la req Ajax -->
<div class="subMenu subMenu1">
		<label for="attente1"></label>
        <select class="submenu attente1 custom-select custom-select-sm" id="testAjax">
              <option value="0">--</option>
        </select>
 </div>

Merci d'avance

Invité · 04/08/2018, 15h36

Remplace TOUT le code par :

Code :

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

1
2
<?php
echo $_POST["matieresNom"];

Ça renvoie quoi ?

**Sauruos** · 04/08/2018, 16h39

J'ai remplacé le code contenu dans ajaxData.php par celui que tu m'as fourni , j'ai pas d'erreur dans la console , j'ai rien d'afficher en fait ...
Comme si les données n'était pas envoyées ... En sachant que j'avais déjà fait ce formulaire avant avec 3 champs de selection sans aucun lien entre eux , une fois le bouton submit appuyé les informations sont bien traité dans un fichier.php et enregistré dans la bdd .

Je ne sais pas si c'est le script qui ne capte pas la donnée ou la transmission et le traitement dans ajaxData.php ...

Cela fait plusieurs jours que je bute dessus sans comprendre ce qu'il se passe ...

Invité · 05/08/2018, 15h03

Bonour,

pour voir quelque chose dans la console, encore faut-il le demander :

Code :

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

1
2
3
4
5
		$.ajax({
...
				success:function( txthtml ){
					$('#testAjax').html( txthtml ); // s'affiche dans le <select>
					console.log( txthtml ); // s'affiche dans la console

**psychadelic** · 04/08/2018, 12h38

si tu ne veux pas coder le remplissage de ton select par ton appel ajax, alors utilise un jQuery.load.

sinon il faut fair un appel ajax en format jSON. puis générer les différentes entrées du select par une boucle en javascript.

exemple de code en appel Ajax/ json => https://www.developpez.net/forums/d1.../#post10306153

Récupérartion données via AJAX

AJAX

Vue hybride

Discussions similaires

Partager

Partager