Remplir une liste déroulante selon une autre liste (ajax, jquery
rawiaGL
Messages postés
23
Statut
Membre
-
supupoff Messages postés 350 Statut Membre -
supupoff Messages postés 350 Statut Membre -
Bonjour,
alors j'essaye de faire fonctionner mon code ajax suivant mais Hélas ..rien ne marche any help plz ?
Client.html
Jquery.js
projet_profil.php
aucun message d'erreur ne s'affiche ..et les listes déroulantes restent toujours vides ..j'ai pas compris où est le problème
alors j'essaye de faire fonctionner mon code ajax suivant mais Hélas ..rien ne marche any help plz ?
Client.html
<html>
<style>
.select
{
width:14%;
border: 2px solid gray;
margin-left:15px;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery.js"></script>
<p>Projet</p>
<select id="liste_projet" class="select" name="id_projet" >
<option value="">-- Projets --</option>
</select>
<p>Profil</p>
<select id="liste_profil" class="select" name="id_profil" >
<option value="">-- Profils --</option>
</select>
</html>
Jquery.js
<script>
$(document).ready(function() {
var $liste_projet = $('#liste_projet');
var $liste_profil = $('#liste_profil');
// chargement des régions
$.ajax({
url: 'projet_profil.php',
type: 'GET',
data: 'go', // on envoie $_GET['go']
dataType: 'json', // on veut un retour JSON
success: function(json) {
$.each(json, function(index, value) { // pour chaque noeud JSON
// on ajoute l option dans la liste
$liste_projet.append('<option value="'+ index +'">'+ value +'</option>');
});
}
});
// à la sélection d une région dans la liste
$liste_projet.on('change', function() {
var val = $(this).val(); // on récupère la valeur du projet
if(val != '') {
$liste_profil.empty(); // on vide la liste des départements
$.ajax({
url: 'projet_profil.php',
data: 'id_projet='+ val, // on envoie $_GET['id_projet']
type: 'GET',
dataType: 'json',
success: function(json) {
$.each(json, function(index, value) {
$liste_profil.append('<option value="'+ index +'">'+ value +'</option>');
});
}
});
}
});
});
</script>
projet_profil.php
<?php
if(isset($_GET['go']) || isset($_GET['id_projet'])) {
$json = array();
if(isset($_GET['go'])) {
// requête qui récupère les régions
$requete = "SELECT id_projet, nom_projet FROM projet";
} else if(isset($_GET['id_projet'])) {
$id = htmlentities(intval($_GET['id_projet']));
// requête qui récupère les départements selon la région
$requete = "SELECT pp.id_profil, libele_profil FROM profil_fact pf,profil_projet pp
WHERE pp.id_projet = ". $id ."
AND pf.id_profil=pp.id_profil
";
}
// connexion à la base de données
try {
$bdd = new PDO('mysql:host=127.0.0.1;dbname=neolians_rh', 'root', '');
} catch(Exception $e) {
exit('Impossible de se connecter à la base de données.');
}
// exécution de la requête
$resultat = $bdd->query($requete) or die(print_r($bdd->errorInfo()));
// résultats
while($donnees = $resultat->fetch(PDO::FETCH_ASSOC)) {
// je remplis un tableau et mettant l'id en index (que ce soit pour les régions ou les départements)
$json[$donnees['id_projet']][] = utf8_encode($donnees['nom_projet']);
$json[$donnees['id_profil']][] = utf8_encode($donnees['libele_profil']);
}
// envoi du résultat au success
echo json_encode($json);
}
?>
aucun message d'erreur ne s'affiche ..et les listes déroulantes restent toujours vides ..j'ai pas compris où est le problème
A voir également:
- Remplir une liste déroulante selon une autre liste (ajax, jquery
- Liste déroulante excel - Guide
- Liste déroulante en cascade - Guide
- Liste code ascii - Guide
- Site dangereux liste - Guide
- Voir liste d'amis facebook - Guide
1 réponse
voila une travail bâclé et non testé essayé le j'espère qu'il fonctionne
NB ; J'ai rien changé dans fichier projet_profil.php et pas besoin de fichier Jquery.js
Client.html
La chance aide parfois, le travail toujours.
NB ; J'ai rien changé dans fichier projet_profil.php et pas besoin de fichier Jquery.js
Client.html
<html>
<head>
<script type='text/javascript'>
function getXhr(){
var xhr = null;
if (window.XMLHttpRequest) // Mozilla, Safari,...
xhr = new XMLHttpRequest();
else if(window.ActiveXObject){ // Internet Explorer
try {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
}
else { // XMLHttpRequest non supporté par le navigateur
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 le valeur au liste_profil
document.getElementById("liste_profil").innerHTML = leselect; //
}
}
// Ici on va voir comment faire du post
xhr.open("GET","projet_profil.php",true); // <== Post methode d'envoie et projet_profil.php fichier d'action -- je prefère post --
// 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('liste_projet'); // <== ici Projet selectioner
mat= sel.value; // <== prendre le valeur de variable liste_projet
xhr.send("id_projet="+mat); // <== id_projet envoyer
}
</script>
</head>
<style>
.select
{
width:14%;
border: 2px solid gray;
margin-left:15px;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<p>Projet</p>
<select id="liste_projet" class="select" name="id_projet" >
<option value="">-- Projets --</option>
</select>
<p>Profil</p>
<select id="liste_profil" class="select" name="id_profil" >
<option value="">-- Profils --</option>
</select>
</html>
La chance aide parfois, le travail toujours.
