listes déroulantes liées avec select

22 mars 2017 à 23:09:10

Bonjour

tout d'abord désolé si la question a été déjà posée.

Je suis professeur dans une école et nous faisons partie du projet de station météo avec la fondation raspberry

nous avons un site : http://meteovictorhugo.ddns.net:1800/demo/

tout fonctionne assez bien

ce que nous essayons maintenant c'est de récupérer les données des autres stations, nous les insérons dans une base de données pour les exploiter

nous avons cette page : http://meteovictorhugo.ddns.net:1800/demo/monde.php

et l'objectif du moment est de pouvoir sélectionner une station météo grâce à deux listes déroulantes liées avec pays et ville, nous avons réussi à afficher les données de ces deux listes en adaptant un code retrouvé sur internet : http://meteovictorhugo.ddns.net:1800/demo/monde2/liste.php

le problème c'est que maintenant j'aimerai faire un select pour afficher les températures du couple pays/ville, mais je sèche vraiment.

voici les codes utilisés :

config.php

<?php
$host="localhost";
$Login="";
$Pass="";
$DB="world";
$Table="WEATHER_MEASUREMENT";
$champ_pays="COUNTRY";
$champ_ville="CITY";
?>

liste.php

<html>
<head>
<!--  Script de listes deroulantes liees  avec appel  par AJAX, (evite le rechargement de la page) -->
<script language="Javascript"type="text/JavaScript">
// Requette AJAX
function makeRequest(url,id_niveau,id_ecrire){
	var http_request = false;
		//créer une instance (un objet) de la classe désirée fonctionnant sur plusieurs navigateurs
        if (window.XMLHttpRequest) { // Mozilla, Safari,...
            http_request = new XMLHttpRequest();
            if (http_request.overrideMimeType) {
                http_request.overrideMimeType('text/xml');//un appel de fonction supplémentaire pour écraser l'en-tête envoyé par le serveur, juste au cas où il ne s'agit pas de text/xml, pour certaines versions de navigateurs Mozilla
            }
        } else if (window.ActiveXObject) { // IE
            try {
                http_request = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    http_request = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {}
            }
        }

        if (!http_request) {
            alert('Abandon  Impossible de créer une instance XMLHTTP');
            return false;
        }
        http_request.onreadystatechange = function() { traitementReponse(http_request,id_ecrire); } //affectation fonction appelée qd on recevra la reponse
		// lancement de la requete
		http_request.open('POST', url, true);
		//changer le type MIME de la requête pour envoyer des données avec la méthode POST ,  !!!! cette ligne doit etre absolument apres http_request.open('POST'....
		http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
		obj=document.getElementById(id_niveau);
		data="val_sel="+obj.value;
        http_request.send(data);
}

function traitementReponse(http_request,id_ecrire) {
	var affich="";
	if (http_request.readyState == 4) {
		if (http_request.status == 200) {
					// cas avec reponse de PHP en mode texte:
			//chargement des elements reçus dans la liste
			var affich_list=http_request.responseText;
				obj = document.getElementById(id_ecrire); 
                obj.innerHTML = affich_list;
		} 
		else {
                alert('Un problème est survenu avec la requête.');
        }
    }
}
</script>
</head>
<?php
include ("config2.php");
// Connexion a la base de donnees  
	$AccesBase = mysql_connect($host,$Login,$Pass);
	mysql_select_db($DB,$AccesBase);
	mysql_query("set names 'utf8'");
	$QuestionBase = "SELECT DISTINCT $champ_pays FROM $Table  ORDER BY $champ_pays ASC " ;
	$result_recherche=mysql_db_query($DB, $QuestionBase) or die (mysql_error());
	$nombre_enr=mysql_num_rows($result_recherche);
?>
<body>
<form name="test1" method="post" action="liste.php"  >
	<div id="id_list1">Pays :<br>
		<select name="niv1" id="id_niv1" onChange="makeRequest('repPhpAjax.php','id_niv1','id_list2')">
			<option>-- Choisissez --</option>
<?php
			while ($row=mysql_fetch_assoc($result_recherche)){
?>			//$row = utf8_encode ($row);
					<option value="<?php echo $row[$champ_pays]?>"><?php echo $row[$champ_pays]?></option> 
<?php
			}
?>
		</select> 
<input type = "submit" name = "value" value ="Choisir">
		<br><br>
	</div>
	
	
	<div id="id_list2">


<?php 
?>




	</div>
</form>
</body>
</html>

repPhpAjax.php

<?php
// script PHP interrogation Base de donnees pour reponse a la requette AJAX
include ("config.php");

// Connexion a la base de donnees  
	$AccesBase = mysql_connect($host,$Login,$Pass);
	mysql_select_db($DB,$AccesBase);
	mysql_query("set names 'utf8'");
	$QuestionBase = "SELECT DISTINCT CITY as city FROM $Table  WHERE ".$champ_niv."='".$_POST[val_sel]."' ORDER BY city " ;
	$result_recherche=mysql_db_query($DB, $QuestionBase) or die (mysql_error());
// construction de la liste deroulante
$aff=="";
$aff=$aff."Villes:<br>
		<select name='niv1' id='cont_list2' >
		<option>-- Choisissez --</option>";
		while ($row=mysql_fetch_assoc($result_recherche)){
			$aff.="<option value=\"$row[city]\">$row[city]</option>"; 
		}
	$aff=$aff."</select><br><br>";
// envoi reponse Php a Ajax	
	echo $aff;
?>

si vous avez une ptite idée ou un tuto, vus ferez avancer la science !

merci d'avance

-
Edité par jeromechretinat 26 mars 2017 à 11:32:20

skuti

23 mars 2017 à 7:56:15

Bonjour Jérôme,

Tu peux le faire en AJAX! En gros, à chaque fois que l'une des liste va changer de valeur, tu vas envoyer une requête à ton serveur sans pour autant recharger la page. Tu récupères les données (en json c'est plus simple) et tu construis les valeurs (les <option>) de ton SELECT avec ses valeurs en Javascript.

$2b||!$2b

Comar91

23 mars 2017 à 8:02:40

Bonjour, tout d'abord un conseil: changer d'API mysql cf: doc PHP Pour ton problème pourquoi n'adoptes-tu pas la même logique que tu as appliquée ici

<select name="niv1" id="id_niv1" onChange="makeRequest('repPhpAjax.php','id_niv1','id_list2')">

en la transposant/adaptant ici

<select name='niv1' id='cont_list2' >

Comar

jeromechretinat

23 mars 2017 à 14:43:18

merci

j'ai changé toutes mes requêtes mysql en pdo, ça m'a pris du temps, mais au final je trouve pdo plus lisible

merci pour vos conseils

mais l'ajax c'est vraiment vague pour moi, si vous pouviez m'en dire plus ce serait très gentil.

-
Edité par jeromechretinat 23 mars 2017 à 23:16:21

jeromechretinat

24 mars 2017 à 17:37:57

J'ai essayé de creuser vos propositions mais je suis un peu bloqué. Pourriez vous m'en dire un peu plus s'il vous plaît ?

Merci

skuti

24 mars 2017 à 20:44:04

Pour te simplifier la vie, utilise jQuery.

Ensuite tu vas devoir faire un truc du genre:

$('tonSelect1').change(function() {
    // requête Ajax pour récupérer les informations
    $('tonSelect2').empty();
    for (var i = 0; i < data.length; i++) {
        $('tonSelect2').append($('<option>').val(data[i].value).text(data[i].label));
    }
});

Ce n'est qu'un ébauche mais c'est pour que tu vois a peu pret

$2b||!$2b

Comar91

26 mars 2017 à 11:58:15

Bonjour jeromechretienat, ici

<select name="niv1" id="id_niv1" onChange="makeRequest('repPhpAjax.php','id_niv1','id_list2')">

tu appelles un script javascript qui va appeler un script php(repPhpAjax.php) en ajax. Ce script php te rend la liste des villes sous la forme d'une boite select. Tu dois pouvoir appliquer la même logique sur la boite select ville que la boite select pays ?

Comar

jeromechretinat

29 mars 2017 à 16:00:38

merci pour votre réponse !

je suis vraiment désolé mais je ne pige pas.

Pour la solution jquery, je n'ai même pas essayé car je ne connais pas du tout...

Pour la réponse de Comar91, je n'y arrive pas non plus, je ne sais pas si je dois faire un 3ème script php ? ou je dois placer le onChange ? et comment faire pour envoyer mes 2 variables.

c'est le gros problème quand on utilise un code qu'on ne comprend pas entièrement ...

Comar91

27 avril 2017 à 22:22:20

Bonsoir Jeromechretinat, as-tu résolu ton problème ?

Comar