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 :

[AJAX] Alimenter une 2ème liste déroulante liée à la première


Sujet :

AJAX

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éclairé
    Profil pro
    Inscrit en
    Février 2008
    Messages
    293
    Détails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations forums :
    Inscription : Février 2008
    Messages : 293
    Par défaut [AJAX] Alimenter une 2ème liste déroulante liée à la première
    Bonjour à tous.
    J'ai essayé d'adapter les logiciels PHP et Js alimentés par bdd(qui fonctionnent très bien) en ajax mais étant à peine débutant dans ce cas,une âme charitable pourrait-elle m'aider à résoudre le problème:
    Je constate que la 2ème liste(selection) reste désespérement vide!
    autrement dit probablement que les paramètres qui définissent où ajax doit retouner le résultat sont erronés où mal situés? Pourriez-vous visionner les scripts ci-joints?
    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
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
     
    <!DOCTYPE HTML>
    <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
     		<title>Tutoriel Ajax (XHTML + JavaScript + XML)</title>
    		<script type='text/javascript'>
     
    			function getXhr(){
                                    var xhr = null; 
    				if(window.XMLHttpRequest) // Firefox et autres
    				   xhr = new XMLHttpRequest(); 
    				else if(window.ActiveXObject){ // Internet Explorer 
    				   try {
    			                xhr = new ActiveXObject("Msxml2.XMLHTTP");
    			            } catch (e) {
    			                xhr = new ActiveXObject("Microsoft.XMLHTTP");
    			   }
    				}
    				else { // XMLHttpRequest non supporté par le navigateur 
    				   alert ("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
    				   xhr = false; 
    				} 
                                    return xhr;
    			}
     
    			/**
    			* Méthode qui sera appelée sur le click du bouton
    			*/
    						function go(){
    				var xhr = getXhr();
    				// On défini ce qu'on va faire quand on aura la réponse
    				xhr.onreadystatechange = function(){
    				// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
    					if(xhr.readyState == 4 && xhr.status == 200)
    					{
    						leselect = xhr.responseText;
    						// On se sert de innerHTML pour rajouter les options a la liste
    						document.getElementById('selection').innerHTML = leselect;
    					}
    				}
     
    				// Ici on va voir comment faire du post
    				xhr.open("POST","ajaxCategories.php",true);
    				// ne pas oublier ça pour le post
    				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    				// ne pas oublier de poster les arguments
    				// ici, l'id de l'auteur
    				sel = document.getElementById('categorie');
    				id_categorie = sel.options[sel.selectedIndex].value;
    				xhr.send("id_categorie="+id_categorie);
    			}
    		</script>
    	</head>
     
     
     
    <body>
     
    		<form> <form action='categories.php' method='POST'>
    			<fieldset style="width: 500px">
    				<legend>Listes liées</legend>
    				<label>Categories</label>
    				<select name='categorie' id='categorie' 
     
    			onChange="makeRequest('ajaxCategories.php','id_liste1','id_div_liste2');">
    <!-- on appelle la fct sur le onChange en lui passant l'url du script php appelé,l'id de la liste 1, l'id où il  faut ecrire la réponse-->
     
     
    		<option value='-1'>Choisir une catégorie</option>
     
    					<?php
     
    $host = 'localhost';
    $user = 'root';
    $pass = '';
    $db = 'test';
     
    // connection à la DB
    $link = mysql_connect ($host,$user,$pass) or die ('Erreur : '.mysql_error() );
    mysql_select_db($db) or die ('Erreur :'.mysql_error());
     
     
    $res= mysql_query ("SELECT * FROM catego ORDER BY categorie");
     
    //$res=mysql_query($sql) or die("Erreur de connexion au serveur SQL");
    //<option>Sélectionnez la categorie</option>';
    while($row = mysql_fetch_assoc($res))
    {
    	echo"<option value='".$row["id"]."'>".$row["categorie"]."</option>";
     
    }
    ?>
    </select>	
     
     
    				<label>Selection</label>
    				<div id='selection'  style='display:inline'>
    				<select name='selection'>
    					<option value='-1'>Choisir une selection</option>
    				</select>
    				<div id="id_div_liste2"><!-- c'est ici que par innerHTML AJAX va ecrire la liste2 --></div>	
     
     
     
    			</fieldset>
     
    </form>
     
     
     
    	</body>
    </html>
    <?php
    //*Fichier ajaxCategories.php
    ?>
    <?php
     
    $host = 'localhost';
    $user = 'root';
    $pass = '';
    $db = 'test';
     
    echo "<select name='selection' id='id_div_liste2'> ";
     
    	if(isset($_POST["id_categorie"]))
    	{
    // connection à la DB
    $link = mysql_connect ($host,$user,$pass) or die ('Erreur : '.mysql_error() );
    mysql_select_db($db) or die ('Erreur :'.mysql_error());
          $res = mysql_query("SELECT id,selection FROM selections
    			WHERE id_categorie='$_POST[id_categorie]' ORDER BY selection");	
    $res=mysql_query($sql) or die("Erreur de connexion au serveur SQL");
     
    while($row = mysql_fetch_assoc($res))
    {
    	echo"<option value='".$row["id"]."'>".$row["selection"]."</option>";
    }
    }
    echo"</select>";	
    ?>
    Je suis particulièrement interessé par cet exemple pour comparer la durée de chargement suite à une base de données très importante.
    Sincères remerciements à toutes les équipes présentes sur les forums et sur qui on peut compter sans fautes.
    Claudine

  2. #2
    Rédacteur

    Avatar de Torgar
    Homme Profil pro
    Développeur Web
    Inscrit en
    Août 2007
    Messages
    2 334
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Août 2007
    Messages : 2 334
    Par défaut
    Bonjour,

    Ce n'est peut-être rien, mais , essaye de fermer la connexion à la base de données dans ton fichier ajaxCategories.php via : mysql_close($link);

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <select name='categorie' id='categorie' onChange="makeRequest('ajaxCategories.php','id_liste1','id_div_liste2');">
    Ne serait-ce pas plutôt la fonction JS go() qu'il faudrait appeler ?


    Cordialement,
    Je ne suis pas schizophrène, nous sommes unanime !!!

    ► Pensez à la balise code et au CODE HTML GENERE !!!!
    ► Au si c'est le cas et au à ceux qui vous ont aidé.
    Vous souhaitez participer aux rubriques CSS et (X)HTML ? Contactez-nous !

    Créer des colonnes de même hauteur en CSS
    Glossaire CSS
    Les bordures en CSS3
    Les transitions en CSS3

  3. #3
    Invité
    Invité(e)
    Par défaut
    Bonjour Claudine,
    je vois que tu est tombée sur le tuto des listes liées en Ajax

    J'ai corrigé tes fichiers :
    - en ré-organisant le code,
    - en mettant de nombreux commentaires,
    - en mettant des noms de variables explicites, pour BIEN COMPRENDRE ce qui fait quoi.

    ps : le fait que ta 2ème liste s'appelle "sélection" ... et qu'on fait une sélection dans la liste ... ne facilite pas les explications ...

    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
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    <?php
    // connection à la DB
    	include('./connect-bd.php'); 
    ?>
    <!DOCTYPE HTML>
    <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
     	<title>Tutoriel Ajax (XHTML + JavaScript + XML)</title>
    	<script type="text/javascript">
    	function getXhr(){
    		var xhr = null; 
    		if(window.XMLHttpRequest) // Firefox et autres
    		   xhr = new XMLHttpRequest(); 
    		else if(window.ActiveXObject){ // Internet Explorer 
    			try {
    				xhr = new ActiveXObject("Msxml2.XMLHTTP");
    			} catch (e) {
    				xhr = new ActiveXObject("Microsoft.XMLHTTP");
    			}
    		} else { // XMLHttpRequest non supporté par le navigateur 
    			alert ("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
    			xhr = false; 
    		} 
    		return xhr;
    	};
     
    	/*
    	* Changer la liste "Selection" après choix dans la liste "Categorie"
    	*/
    	function changeSelectionParCategorie(id_cat,id_div){
    		var id_cat; // valeur de l option ("Categorie") choisie
    		var id_div; // id du div dans lequel on remplira la liste des "selections"
     
    		var xhr = getXhr();
    		// On défini ce qu'on va faire quand on aura la réponse
    		xhr.onreadystatechange = function(){
    		// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
    			if(xhr.readyState == 4 && xhr.status == 200)
    			{
    				leselect = xhr.responseText;
    				// On se sert de innerHTML pour rajouter les options a la liste des "selections"
    				document.getElementById(id_div).innerHTML = leselect;
    			}
    		}
     
    		// on defini la methode (post) + le fichier de traitement + asynchrone (true)
    		xhr.open("POST","ajaxSelectionsFromCategorie.php",true);
    		// ne pas oublier ça pour le post
    		xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    		// on poste les parametres a transmettre au fichier qui fera le traitement
    		// ici : id_cat
    		xhr.send("idcatselected="+id_cat);
    	};
    	</script>
    </head>
     
    <body>
     
    	<form method="post" action="categories.php">
    		<fieldset style="width:500px;">
    			<legend>Listes liées</legend>
    			<label>Catégories : </label>
    			<select id="idcategorie" name="categorie" onchange="changeSelectionParCategorie(this.options[this.selectedIndex].value,'iddivselection');">
    			<!-- on appelle la fct sur le onchange (valeur-choisie, id-du-div-à-remplir) -->
    				<option value="-1">Choisir une catégorie</option>
    <?php			// requete : liste de toutes les categories
    				$cat_sql = "SELECT * FROM catego ORDER BY categorie;";
    				$cat_res = mysql_query($cat_sql) or die("Erreur de connexion au serveur SQL");
    				while($cat_row = mysql_fetch_assoc($cat_res))
    				{
    ?>
    				<option value="<?php echo $cat_row['id']; ?>"><?php echo $cat_row['categorie']; ?></option>
    <?php
    				}
    ?>
    			</select>	
    			<label>Sélection : </label>
    			<div id="iddivselection" style="display:inline;">
    			<!-- c'est ici que par innerHTML AJAX va ecrire la liste2 -->
    			<!-- on peut mettre d abord une option "par defaut" : -->
    			<select id="idselection" name="selection">
    				<option value="-1">Choisissez d'abord une catégorie</option>
    			</select>
    			</div>	
    		</fieldset>
    	</form>
     
    </body>
    </html>

    Fichier ajaxSelectionsFromCategorie.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
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    <?php // Changer la liste "Selection" après choix dans la liste "Categorie"
     
    if(isset($_POST_['idcatselected']) && is_numeric($_POST_['idcatselected']) && $_POST_['idcatselected']!=-1)
    {
    	// connection à la DB
    	include('./connect-bd.php'); 
     
    	// recuperation de id categorie + protection contre injection sql
    	$id_cat_selected = mysql_real_escape_string($_POST_['idcatselected']);
    ?>
    			<select id="idselection" name="selection">
    				<option value="-1">Choisir une sélection</option>
    <?php			// requete : la liste des "selections" de la categorie choisie
    				$sel_sql = "SELECT id,selection FROM selections 
    							WHERE id_categorie = '".$id_cat_selected."' ORDER BY selection;"
    							;	
    				$sel_res = mysql_query($sel_sql) or die("Erreur de connexion au serveur SQL");
    				// liste des options
    				while($sel_row = mysql_fetch_assoc($sel_res))
    				{
    ?>
    				<option value="<?php echo $sel_row['id']; ?>"><?php echo $sel_row['selection']; ?></option>
    <?php
    				}
    ?>
    			</select>
    <?php
    } else { // SI pas de categorie choisie (-1) ou erreur : on remet le select "par defaut" :
    ?>			<select id="idselection" name="selection">
    				<option value="-1">Choisissez d'abord une catégorie</option>
    			</select>
    <?php
    }
    ?>

    EN PRATIQUE :
    il est judicieux de mettre le script de connexion à la BDD dans un fichier "à part" :
    Fichier connect-bd.php
    Code php : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <?php
    	// connexion à la DB
    	$host = 'localhost';
    	$user = 'root';
    	$pass = '';
    	$db = 'test';
    	$link = mysql_connect ($host,$user,$pass) or die ('Erreur : '.mysql_error() );
    	mysql_select_db($db) or die ('Erreur :'.mysql_error());
    ?>
    ... et de le mettre en "include" là où il est nécessaire :
    Code php : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    <?php // connexion à la DB
    	include('./connect-bd.php'); 
    ?>
    Dernière modification par Invité ; 26/08/2011 à 11h12.

  4. #4
    Membre éclairé
    Profil pro
    Inscrit en
    Février 2008
    Messages
    293
    Détails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations forums :
    Inscription : Février 2008
    Messages : 293
    Par défaut
    Bonjour Jreaux62
    Je vois que vous ne m'avez pas tenu rigueur du "Jean". Veuillez m'excuser.
    Remarquable travail avec les commentaires qui vont me faciliter la tâche de compréhension du fonctionnement.
    Comme la liste de selection qui affiche "Choisissez d'abord une catégorie" (je n'avez jamais pensé à cette astuce) reste vide, je suppose qu'il subsiste un petit problème.
    A toute fins utiles, je tiens à préciser que la table 'selections' ne contient pas la colonne 'id_selection' mais tout simplement 'id'(c'est une erreur de ma part) et la colonne 'selection'
    Ne serait-ce là le problème?
    Sincères remerciements pour votre aide précieuse et d'autant plus remarquable que je ne vous attendais pas sur ce forum ajax. Comme je vois vous êtes polyvalent et surtout méthodique et padagogue.
    Des qualités dignes d'un professeur du supérieur.
    Claudine

  5. #5
    Invité
    Invité(e)
    Par défaut
    Citation Envoyé par Claudine Voir le message
    A toute fins utiles, je tiens à préciser que la table 'selections' ne contient pas la colonne 'id_selection' mais tout simplement 'id'(c'est une erreur de ma part) et la colonne 'selection'
    Ne serait-ce là le problème?
    Comment sont liées les 2 tables ????

    Dans la table "selection", il faut aussi un champ id_categorie qui va permettre de relier une "sélection" à une "catégorie".

    Peut-on voir la structure exacte des 2 tables ?

  6. #6
    Invité
    Invité(e)
    Par défaut
    Je te conseille vivement d'utiliser des conventions d'écriture, et des noms de variables/champs/fichiers/fonctions... explicites et clairs.

    ex. :
    table T_CATEGORIES :
    id_categorie (int, auto-incrément)
    nom_categorie (varchar)

    table T_SELECTIONS :
    id_selection (int, auto-incrément)
    nom_selection (varchar)
    id_categorie (int) -> permet de lier les 2 tables)
    Ca évite bien des erreurs (d'inattention souvent) et confusions ...

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

Discussions similaires

  1. Réponses: 2
    Dernier message: 30/08/2011, 17h29
  2. Réponses: 10
    Dernier message: 23/03/2009, 23h01
  3. ajax, php et 3 listes déroulantes liées
    Par jfox dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 04/04/2008, 14h13
  4. [AJAX] Listes déroulantes liées avec Ajax
    Par paupiette dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 01/08/2006, 16h51
  5. Griser 1 liste déroulante liée à une autre, pb de concaténat
    Par linou dans le forum Général JavaScript
    Réponses: 4
    Dernier message: 29/03/2005, 16h45

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