Menu déroulant dynamique php/mysql et ajax

Résolu/Fermé
papymucho Messages postés 140 Date d'inscription mercredi 18 juin 2008 Statut Membre Dernière intervention 1 novembre 2009 - 28 août 2008 à 13:55
papymucho Messages postés 140 Date d'inscription mercredi 18 juin 2008 Statut Membre Dernière intervention 1 novembre 2009 - 1 déc. 2008 à 14:34
Bonjour,

Alors, pour expliquer mon probleme rapidement :d

J'aimerais créer un formulaire, possédant quelques menus déroulant dynamique, le second étant basé sur le premier :

Par ex, on possède une interface administration, grâce a laquelle on insère dans la base de données un type d'équipement, du style Ordinateur, Téléphone, Moniteur etc....
Après on insère un modèle d'équipement, basé sur l'id_equipment.... par ex: Nokia 6234, Samsung E900 pour Téléphone puis HP5000, HP6000 pour Ordinateur etc....

Donc l'utilisateur final aura, lui, un menu déroulant qui prendra les infos dans la bdd... Ensuite, en fonction de son choix, apparait un second menu-déroulant, qui affiche le modèle tel que : Nokia 6234 s'il a choisi un telephone, ou HP5000 s'il a choisi un ordi.....

Voila mon probleme est que j'aimerais éviter de recharger la page a chaque fois, que le contenu du second menu déroulant soit réellement dynamique en fonction du choix fait dans le premier menu-déroulant..... Sinon en fait j'ai tous les modèles qui s'affichent.....
Voilà ou j'en suis, pour exemple :

formulaire.php :
<div>
<center>
<fieldset class='fieldset'>
<legend class='first_step'>First step : <br>Please check the availability of the equipment or the model</legend>
<table class='check_equipment'>
<tr>
<td class='title'><b>Equipment :</b></td><td><?php include('_inc_select_equipment.php') ?></td>
</tr>
<tr id='tr_model'>
<td class='title'><b>Model :</b></td><td><?php include('_inc_select_model.php')?></td>
</tr>
</table>
</fieldset>
</center>
</div>


_inc_select_equipment.php:
<select id='form_equipment' name='form_equipment' onchange="show_form(this)">
<option value='void'>Choose an equipment</option>
<?php
include("_inc_connexion.php");
$query = "SELECT id_equipment, equipment FROM T_equipment ORDER BY equipment ASC";
$rq = mysql_query($query) or die (mysql_error());
while ($row=mysql_fetch_array($rq, MYSQL_ASSOC))
{
$id_equipment = $row["id_equipment"];
$equipment = $row["equipment"];
echo "<option value='$id_equipment'>$equipment</option>";
}
?>
</select>



_inc_select_model.php:
<select name='form_model'>
<option value='void'>Choose a model</option>
<?php
include("_inc_connexion.php");
$query = "SELECT model FROM T_model ORDER BY model ASC";
$rq = mysql_query($query) or die (mysql_error());
while ($model = mysql_fetch_array($rq))
{
echo "<option value='$model'>$model</option>";
}
?>
</select>


Voilà, en fait je ne sais pas quoi mettre dans la fonction show_form()....
je ne connais pas ajax, suis un peu ennuyé, je comprends le principe, mais je ne connais pas le code....
Si une âme charitable peu me filer un tit coup de main :)
Ah oui dernière précision, j'utilise jquery aussi...

Merci.
A voir également:

9 réponses

Yohan_ Messages postés 232 Date d'inscription vendredi 27 juin 2008 Statut Membre Dernière intervention 12 août 2010 83
28 août 2008 à 18:02
Le fichier rep_PhpAjax.php :

<?php
// SCRIPT PHP D'INTERROGATION DE LA BASE DE DONNEES POUR REPONSE A LA REQUETE AJAX
include_once 'conf/conf.php';
mysql_connect(_DB_HOST,_DB_LOGIN,_DB_PWD);
mysql_select_db(_DB_NAME);

// REQUETE POUR LA BASE DE DONNEES
$result_recherche=mysql_query("SELECT * FROM sous_familles WHERE ".'code_famille'."='".$_POST[val_sel]."' ORDER BY ".'code_sous_famille'." ASC ");
// CONSTRUCTION DE LA DEUXIEME LISTE DEROULANTE
$aff=="";
$aff=$aff."Sous Famille:<br>
<select name='niv2' id='cont_list2' >";
while ($row=mysql_fetch_assoc($result_recherche))
{
$aff.="<option value=\"$row[code_sous_famille]\">$row[code_sous_famille]</option>";
}
$aff=$aff."</select><br><br>";
// ENVOI DE LA REPONSE PHP A AJAX
echo $aff;
?>
6
Yohan_ Messages postés 232 Date d'inscription vendredi 27 juin 2008 Statut Membre Dernière intervention 12 août 2010 83
28 août 2008 à 14:04
Si tu veux je peux te filer un de mes codes qui marchait exactement sur le même principe x)
1
Yohan_ Messages postés 232 Date d'inscription vendredi 27 juin 2008 Statut Membre Dernière intervention 12 août 2010 83
28 août 2008 à 18:00
Voila et commenté qui plus est :)

<html>
<head>
<!-- SCRIPT DE LISTES DEROULANTES LIEES AVEC APPEL PAR AJAX (EVITE LE RECHARGEMENT DE LA PAGE) -->
<script language="Javascript" type="text/JavaScript">
// FONCTION DE REQUETE AJAX
function makeRequest(url,id_niveau,id_ecrire)
{
// CREER UNE INSTANCE (UN OBJET) DE LA CLASSE DESIREE FONCTIONNANT SUR PLUSIEURS NAVIGATEURS
var http_request = false;
// POUR MOZILLA ET SAFARI
if (window.XMLHttpRequest)
{
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType)
{
// UN APPEL DE FONCTION SUPPLEMENTAIRE POUR ECRASER L'EN TETE ENVOYE PAR LE SERVEUR (AU CAS OU IL NE S'AGIT PAS DE TEXT/XML, CAS DE CERTAINES VERSIONS DE FIREFOX
http_request.overrideMimeType('text/xml');
}

}
// POUR IE
else if (window.ActiveXObject)
{
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;
}
// FONCTION DE TRAITEMENT APPELLEE QUAND ON RECEVRA LA REPONSE
http_request.onreadystatechange = function() { traitementReponse(http_request,id_ecrire); }
// LANCEMENT DE LA REQUETE
http_request.open('POST', url, true);
// CHANGER LE TYPE MIME DE LA REQUETE POUR ENVOYER LES DONNEES AVEC LA METHODE 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);
}

// FONCTION DE TRAITEMENT
function traitementReponse(http_request,id_ecrire)
{
var affich="";
if (http_request.readyState == 4)
{
// CAS AVEC REPONSE DE PHP EN MODE TEXTE
if (http_request.status == 200)
{
// CHARGEMENT DES ELEMENTS RECUS 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>
<body>
<form name="test1" method="post" action="affiche.php" >
<div id="id_list1">Famille<br>
<select name="niv1" id="id_niv1" onChange="makeRequest('rep_PhpAjax.php','id_niv1','id_list2')">
<option value="NC">-- Choisissez votre famille --</option>
</select>
<br><br>
</div>
<div id="id_list2">
<!-- ICI SERA CHARGE LA LISTE SELON LA REPONSE MODE TEXTE DE PHP A LA REQUETE AJAX -->
</div>
<input type="submit" name="OK" value="OK">
</form>
</body>
</html>
1
papymucho Messages postés 140 Date d'inscription mercredi 18 juin 2008 Statut Membre Dernière intervention 1 novembre 2009 220
28 août 2008 à 14:41
Salut Yohan,

Volontier oui ça pourrait m'aider :)

Si ton code est commenté ce serait vraiment tip-top, que je puisse comprendre au passage.

Cordialement,
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
papymucho Messages postés 140 Date d'inscription mercredi 18 juin 2008 Statut Membre Dernière intervention 1 novembre 2009 220
28 août 2008 à 16:14
Désolé mais up :)
0
Yohan_ Messages postés 232 Date d'inscription vendredi 27 juin 2008 Statut Membre Dernière intervention 12 août 2010 83
28 août 2008 à 17:55
Désolé problème de connection tout à l'heure ^^
Je te mets le code de suite ;)
0
papymucho Messages postés 140 Date d'inscription mercredi 18 juin 2008 Statut Membre Dernière intervention 1 novembre 2009 220
28 août 2008 à 18:24
Merci bien :)

Le temps d'y comprendre quelque chose, et je suis de retour.
0
papymucho Messages postés 140 Date d'inscription mercredi 18 juin 2008 Statut Membre Dernière intervention 1 novembre 2009 220
1 sept. 2008 à 13:19
Salut,

Bon et bien, je n'ai pas bien compris ton code, mais j'ai fini par faire différement, je laisse la soluce ici pour ceux qui en auraient besoin.:

le premier select (_inc_select_equipment.php) :
<select id='form_equipment' name='form_equipment' onchange="get_url(this)">
<option value='void'>Choose an equipment</option>
<?php
include("_inc_connexion.php");
//$equipment=$_POST[equipment'];

$query = "SELECT id_equipment, equipment FROM T_equipment ORDER BY equipment ASC";
$rq = mysql_query($query); //or die ("Exécution de la requête impossible");

while ($row=mysql_fetch_array($rq, MYSQL_ASSOC))
{
$id_equipment = $row["id_equipment"];
$equipment = $row["equipment"];

echo "<option value='$id_equipment'>$equipment</option>";
}
mysql_close();
?>
</select>


le second select (_inc_select_model.php) :
<select name='form_model'>
<option value='void'>Choose a model</option>
<?php
include("_inc_connexion.php");
//$form_model=$_POST['form_model'];

$var=$_POST['var'];

$query = "SELECT model FROM T_model WHERE id_equipment='$var' ORDER BY model ASC";
$rq = mysql_query($query); //or die ("Exécution de la requête impossible");
while ($model = mysql_fetch_array($rq))
{
extract($model);
if ($model!="")
{
echo "<option value='$model'>$model</option>";
}
}
mysql_close();
?>
</select>



la fonction ajax (a noter qu'il faut disposer de jquery pour que ça fonctionne) :
function get_url(test)
{
$.ajax
(
{
type: "POST",
url: "_inc_select_model.php",
data: "var="+test,
success: function(msg){$("#tr_test").append("<td class='title'><b>Model :</b></td><td>"+ msg +"</td>");}
}
);
$("#tr_test").show();
}


et enfin le formulaire :
<div>
<center>
<fieldset class='fieldset'>
<legend class='first_step'>First step : <br>Please check the availability of the equipment or the model</legend>
<table class='check_equipment'>
<tr>
<td class='title'><b>Equipment :</b></td><td><?php include('_inc_select_equipment.php') ?></td>
</tr>
<tr id='tr_test'>
</tr>
</table>
</fieldset>
</center>
</div>



Voilà voilà, et désolé pour l'indentation...
0
Bonjour Papymucho,

J'essaie de faire fonctionner ton script mais je n'y arrive pas.

Pourrais tu commenter la fonction ajax je ne connais pas ce langage et si tu peux aussi me renseigner sur l'endroit ou trouver jquery.

j'utilise wamp comme serveur web/mysql et je ne sais pas si il est déjà présent.

Je te remercie.
0
papymucho Messages postés 140 Date d'inscription mercredi 18 juin 2008 Statut Membre Dernière intervention 1 novembre 2009 220
1 déc. 2008 à 14:34
Bonjour Balgrim,

Je ne viens de voir ton message que maintenant.

Ajax n'est pas un langage, c'est une méthode servant à recharger certains éléments de ta page sans recharger toute ta page.... (Donc envoyer des requêtes sur un serveur tout en gardant ta page telle quelle par ex..)

Le langage utilisé est javascript.
Jquery n'a rien à voir avec Wamp, c'est un "framework" pour javascript, qui facilite la programmation sous js, tant du côté des animations que dans l'écriture de fonctions ajax etcetc...

Pour le trouver, une simple recherche sur google, avec pour mot clé "jquery" fera l'affaire ;-)

Enfin, je te renvois ici :

http://www.commentcamarche.net/forum/affich 8434526 liste deroulante php bd mysql pb codification?page=4#68

Le code n'est pas plus commenté mais bon...
0