Ajax et Listes liees [Résolu]

Signaler
Messages postés
5
Date d'inscription
mardi 3 juin 2003
Statut
Membre
Dernière intervention
22 janvier 2008
-
Messages postés
5
Date d'inscription
mardi 3 juin 2003
Statut
Membre
Dernière intervention
22 janvier 2008
-
Bonjour,

je cherche a faire quelque chose avec les scripts que j'ai pu trouver sur ce site mais mes connaissances limitees en javascript m'empechent d'avancer.

Je m'explique, j'ai un formulaire avec pleins de listes deroulantes. Ces listes sont alimentees par une fonction qui va chercher les elements dans une table. Par exemple j'ai une table "Matiere" avec comme champs et données:
***************
* id * Matiere *
* 1 * Nubuc *
* 2 * Plastic *
* 3 * Cuir *
***************

Et une table de couleur:
***************
* id * Couleur *
* 1 * Blanc *
* 2 * Bleu *
* 3 * Rouge *
***************

Et la table qui les lie "matiereLcouleur:
*************************
* id_Matiere * id_Couleur *
* 1 * 2 *
* 1 * 3 *
* 2 * 1 *
* 2 * 2 *
*************************

Vous l'aurez compris quand une matiere et selectionnée je voudrais que la liste de couleur qui lui est associee ne contiennent QUE les couleurs de la matiere.

Mon probleme est que j'ai 6 listes de matiere dans mon formulaire et autant de listes de couleur. Et ce n'est pas compatible avec une script trouve ici:
http://phpcs.com/code.aspx?id=25832
ou encore ici:
http://perso.wareteam.com/comment_demander_des_informations_au_serveur_sans_recharger_la_page-.php (c'est le meme).

Pourriez vous m'aider a mettre en place ce truc, a moins que ce ne soit pas faisable.

Par avance merci.

Alex

5 réponses

Messages postés
5
Date d'inscription
mardi 3 juin 2003
Statut
Membre
Dernière intervention
22 janvier 2008

Ha oui pk pour la modif.

C'est bon tout est en place. Pour ma requete avec la table de liaison, j'ai utilise ceci:
$req = "SELECT id_Couleur FROM dessusLcouleur WHERE id_DessusMatiere=$champs1";
$res = MYSQL_QUERY($req);
$i = array();
$j=0;
$in = "";
while($r = mysql_fetch_array($res)){
$i[$j] = $r[0];
$j++;
}
$in = implode(",",$i);


$requete = "SELECT Couleur FROM couleur WHERE id IN ($in)";
$resultat=MYSQL_QUERY($requete);
$compteur=MYSQL_NUM_ROWS($resultat);

Ca n'a jamais voulu prendre:
$req = "SELECT id_Couleur FROM matiereLcouleur WHERE id_DessusMatiere=$champs1";
$res = MYSQL_QUERY($req);
$r = mysql_fetch_array($res) // Ces 2 lignes la ne prennent pas
$in = implode(",",$r); // et la!


$requete = "SELECT Couleur FROM couleur WHERE id IN ($in)";
$resultat=MYSQL_QUERY($requete);
$compteur=MYSQL_NUM_ROWS($resultat);

Merci bien en tous cas.

Alex
Messages postés
10839
Date d'inscription
lundi 24 février 2003
Statut
Modérateur
Dernière intervention
2 mars 2010
23
Hello,

ce n'est pas difficile, tu appelles tes scripts pour charger les listes sur le onchange de la liste précédente.
Donne nous un début de code...on essayera de t'aider en fonction.
Messages postés
1352
Date d'inscription
lundi 27 octobre 2003
Statut
Membre
Dernière intervention
19 novembre 2008
2
Bonjour,

Ce script est tutorial simple pour expliquer le fonctionnement de deux liste liées.

Pour modifier le script à ce qu'il utilise plusieurs listes déroulantes.
il faut modifier la fonction sendData dans la partie JS comme suit :

<script type="text/javascript">
/**
* Permet d'envoyer des données en GET ou POST en utilisant les XmlHttpRequest
*/
function sendData(param, page, divpart)
{

if(document.all)
{
//Internet Explorer
var XhrObj = new ActiveXObject("Microsoft.XMLHTTP") ;
}//fin if
else
{
//Mozilla
var XhrObj = new XMLHttpRequest();
}//fin else

//définition de l'endroit d'affichage:
var content = document.getElementById(divpart);

XhrObj.open("POST", page);

//Ok pour la page cible
XhrObj.onreadystatechange = function()
{ if (XhrObj.readyState 4 && XhrObj.status 200)
content.innerHTML = XhrObj.responseText ;
}

XhrObj.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
XhrObj.send(param);

}//fin fonction SendData

</script>

Explication : on a ajouté une variable divpart qu'on va utilisé pour définir la partie à être modifier dynamiquement.

ensuite chaque liste est identifiée par un div. exemple

Liste2


Liste3



Liste4



etc ...

et pour chaque liste on ajoute l'événement OnChange pour appeller la page de chargement depuis le serveur pour modifier dynamiquement la liste suivante exemple :

voici la première liste qui modifie la deuxième liste
<select size="1" name="liste1" OnChange="sendData('id='+this.value,'modifliste2.php','liste2')">
</select>

Voici la deuxième liste qui va modifié la troisième:

<select size="1" name="liste2" OnChange="sendData('id='+this.value,'modifliste3.php','liste3')">

</select>

etc...


et tu n'aura à créer les pages modifliste2.php, modifliste3.php, etc...

Cela dit tu peux optimisé le code à ce qu'il utilise uniquement modifliste.php pour toute les liste en utilisant des tests.

Bonne continuation.
PS: Si votre problème est résolu, prière de bien vouloir clôturer votre message par une réponse acceptée !
http://perso.wareteam.com
http://freelance.wareteam.com
Messages postés
5
Date d'inscription
mardi 3 juin 2003
Statut
Membre
Dernière intervention
22 janvier 2008

Super, merci ca me permet de bien avancer deja.

est ce que je peux aussi utiliser:
<select size="1" name="liste2" OnChange="sendData('id='+this.value,'modifliste.php?liste=liste2','liste2')">
</select>
?

Bon et bien maintenant je n'ai plus qu'a trouver un truc pour ma structure de table j'ai cette ##### de table liee a prendre en compte.

Si quelqu'un a une idee au passage.

Je previens quand j'ai trouve!

Merci encore

Alex
Messages postés
1352
Date d'inscription
lundi 27 octobre 2003
Statut
Membre
Dernière intervention
19 novembre 2008
2
Oui c'est possible mais il faut modifier tout JS+PHP à ce qu'il utilise la fonction $_GET

Mais c'est plus simple de passer les variables par "param" (id=1&liste=liste2)

ex:

OnChange="sendData('id='+this.value+'&liste=liste2','modifliste.php')">

et n'oublies pas le divpart c'est obligatoire.

OnChange="sendData('id='+this.value+'&liste=liste2','modifliste.php', 'liste2'
)">

Bonne continuation.

PS: Si votre problème est résolu, prière de bien vouloir clôturer votre message par une réponse acceptée !