Accueil > Forum > > > > Menu deroulant dynamique ajax
Menu deroulant dynamique ajax
lundi 28 août 2006 à 16:29:02 |
Menu deroulant dynamique ajax

ns_deux
|
Bonjour,
Je cherche à faire un menu deroulant dynamique qui va interroger ma
base mysql en temps réel. J'aimerais que, lorsque je cliques sur mon
menu, il va recupérer les donnees de ma base et ce sans rechargement de
ma page php.
Je sais qu'il existe de trucs avec Ajax mais je n'arrive pas à le faire fonctionner.
Quelqu'un a t-il une bidouille? 
Merci d'avance.
|
|
lundi 28 août 2006 à 21:42:14 |
Re : Menu deroulant dynamique ajax

coockiesch
|
Salut! As-tu lu des tutos AJAX? (j'aime ceux de developpez.com) Je te propose de commencer par ça. Ensuite, sur www.javascriptfr.com, y'a des exemples de menus déroulants dynamiques... Tu mixes les deux et c'est ok, :) @++ R@f www.allpotes.ch: Photos, humour, vidéos, gags, ... "On dit que seulement 10 personnes au monde comprenaient Einstein. Personne ne me comprends. Suis-je un génie???"
|
|
mardi 29 août 2006 à 08:00:24 |
Re : Menu deroulant dynamique ajax

ns_deux
|
voila ce que j'ai fait mais ca marche pas tu peux peut-etre m'aider....
<script type='text/javascript'>
var xhr = null;
function getXhr(){
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;
}
}
function recharge(page,val){
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){
// On se sert de innerHTML pour rajouter les options a la liste
//eval(xhr.responseText);
document.getElementById('div'+val).innerHTML = xhr.responseText;
}
}
// Ici on va voir comment faire du Get
xhr.open("GET",page,true);
xhr.send(null);
}
</script>
<tr>
<td><div align="right"><strong>O.A.M : </strong></div></td>
<td>
<div id="divoam" onClick='recharge("requete_oam.php","oam")' >
<select name="oam" id="oam" style="width:240" >
<option value=""></option>
</select>
</div>
</td>
<td><a href="param_oam.php"
onclick="window.open(this.href); return
false;"><strong><img src="./icone/enreg.gif"
alt="image"></strong></a></td>
<td> </td>
</tr>
------------------------------------------------------------
ma requete_oam.php
<?php
echo"<select name='oam' id='oam' style='width:240'>";
echo "<option value=''></option>";
require("connect_atelier.php");
$req = 'SELECT DISTINCT oam FROM oam ';
$res = mysql_query($req,$connect) or die ('Erreur : '.mysql_error() );
while($row = mysql_fetch_assoc($res)){
echo "<option value='".$row['oam']."'>".$row['oam']."</option>";
}
echo "</select>";
?>
Merci
|
|
mardi 29 août 2006 à 12:28:20 |
Re : Menu deroulant dynamique ajax

coockiesch
|
Salut! Je ne peux tester tout ton code pour toi! Plusieurs pistes pour voir où se situe l'erreur: - si tu affiches requete_oam.php, affiche-t-elle ce que tu veux? - avec des alert en JS, vérifie que tout se passe bien: * l'objet xhr est-il bien créé? Entre ces deux instruction: 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){ Ajoute: alert('Status: ' + xhr.status ); Ca te diras si y'a un retour, si t'as une 404, ou bien... Si tu as un code erreur 200, le pb vient peut être d l'affichage! Regarde un peu d'où ca vient et redis nous, on trouvera! :) @++ R@f www.allpotes.ch: Photos, humour, vidéos, gags, ... "On dit que seulement 10 personnes au monde comprenaient Einstein. Personne ne me comprends. Suis-je un génie???"
|
|
mardi 29 août 2006 à 16:51:18 |
Re : Menu deroulant dynamique ajax

ns_deux
|
OK donc j'ai fait ce que tu m'as dit. J'ai allégé mon code afin de n'avoir en ligne que ce qui deconne et ca donne cà :
----------------------------------base_saisie_materiel.php---------------------------- <script type="text/javascript"> function getElement(id) { var Elem; if(document.getElementById) { if (typeof document.getElementById(id) == "object") Elem = document.getElementById(id); else Elem = void(0); } else if(document.all) { if (typeof document.all[id] == "object") Elem = document.all[id]; else Elem = void(0); } else if(document.layers) { if (typeof document[id] == "object") Elem = document[id]; else Elem = void(0); } else Elem = void(0); return Elem; }
var xhr = null;
function getXhr() { if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else if (window.ActiveXObject) // if IE { var ieversions = ['Msxml2.XMLHTTP', 'Microsoft.XMLHTTP', 'Msxml2.XMLHTTP.5.0', 'Msxml2.XMLHTTP.4.0', 'Msxml2.XMLHTTP.3.0' ]; for(var i=0; !xhr && i<ieversions.length; i++) { try { xhr = new ActiveXObject(ieversions[i]); } catch(e) { xhr = null; } } } if(!xhr)// XMLHttpRequest non supporté par le navigateur alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); }
/** * Méthode qui sera appelée sur le click du bouton */ function requete(page,select,form,target,target1,target2,target3,target4) { getXhr(); xhr.onreadystatechange = function() { if(xhr.readyState == 4) { if(xhr.status == 200 || xhr.status == 304) eval(xhr.responseText); } }; xhr.open("POST",page,true); xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xhr.send("form="+escape(form)+"&type="+escape(select.id)+"&id="+escape(select.value)+"&target="+escape(target)+"&target1="+escape(target1)+"&target2="+escape(target2)+"&target3="+escape(target3)+"&target4="+escape(target4)); }
function requete2(page){ 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('modele').innerHTML = leselect; eval(xhr.responseText); alert('Status: ' + xhr.status ); } }
// Ici on va voir comment faire du post xhr.open("GET",page,true); xhr.send(null); } </script>
<table> <tr> <td><div align="right"><strong>O.A.M : </strong></div></td> <td> <div id="divoam" onclick="javascript:requete2('requete_oam.php');"> <?php echo "<select name='oam' id='oam' style='width:240' >"; echo "<option value=''></option>"; $req10 = 'SELECT DISTINCT oam FROM oam '; $res10 = mysql_query($req10,$connect) or die ('Erreur : '.mysql_error() ); while($row10 = mysql_fetch_assoc($res10)){ echo "<option value='".$row10['oam']."'>".$row10['oam']."</option>"; } echo "</select>"; ?> </div> </td> </tr> <tr> </table> -------------------------------------requete_oam.php-------------------------------- <?php echo "<select name='oam' id='oam' style='width:240'>\n"; echo "<option value=''></option>\n"; require("connect_atelier.php"); $req = 'SELECT DISTINCT oam FROM oam '; $res = mysql_query($req,$connect) or die ('Erreur : '.mysql_error() ); while($row = mysql_fetch_assoc($res)){ echo "<option value='".$row['oam']."'>".$row['oam']."</option>"; } echo"</select>"; //echo 'document.getElementById("divoam").innerHTML = '.$str.';'; ?> ------------------------------------------------------------------------------------- Alors en ce qui concerne les resultat : 1- ma requete requete_oam.php fonctionne bien car elle me donne le resultat de ma requete. 2- Lorsque je clique sur le menu deroulant de ma page base_saisie_materiel.php, j'ai bien mon resultat mais il s'efface aussitot des que je retire le clic de souris 3- Avec alert('Status: ' + xhr.status ); j'ai la meme chose avec le code erreur 200. Voilà pour les resultat. Qu'en penses tu?
|
|
mardi 29 août 2006 à 17:14:48 |
Re : Menu deroulant dynamique ajax

ns_deux
|
J'ajoute meme que si je fais alert(eval(xhr.responseText)); j'ai bien le resultat obtenu dans le pop up Je vois pas pourquoi il s'affiche pas ce resultat :-( Merci encore
|
|
mardi 29 août 2006 à 17:42:04 |
Re : Menu deroulant dynamique ajax

coockiesch
|
Salut! Pourquoi faire ça sur le onClick, je comprends pas trop... Je vois pas l'item: modele @++ R@f www.allpotes.ch: Photos, humour, vidéos, gags, ... "On dit que seulement 10 personnes au monde comprenaient Einstein. Personne ne me comprends. Suis-je un génie???"
|
|
mardi 29 août 2006 à 19:03:03 |
Re : Menu deroulant dynamique ajax

ns_deux
|
En fait je veux, lorsqu'on clic sur mon menu deroulant, qu'on ait le resultat de ma base en reel sans avoir besoin de recharger ma page. quel item modele? Alors j'ai trouve un truc, j'avais un soucis sur ma requete dans mon select. maintenant c bon par contre c comme si je n'avais pas le retour de mon resultat. Je m'explique. lorsque je clic sur mon menu deroulant j'ai les resultats de ma requete à l'instant de chargement de la page. Par contre suite à une modification de la base, je ne retrouve pas mes resultat sans recharger ma page lorsque je clic sur le select alors qu'avec eval(xhr.responseText); alert('Status: ' + xhr.status ); j'ai bien tous les resultats dans le popup et 200 pour le statut Comprend rien :-) @++
|
|
mardi 29 août 2006 à 20:18:25 |
Re : Menu deroulant dynamique ajax

ns_deux
|
Ca fonctionne presque lol J'ai changé mon evenement par un onChange Alors quand ma page se charge, il va verifier ma base et me donne les resultats au moins du chargement de la page. Si je change pas la valeur, je peux voir les valeurs existantes et je peux ajouter un nouvel element dans ma base via une autre page pour reprendre ensuite ma page initiale et modifier la valeur. Du coup, il execute la fonction et modifie mon menu deroulant par les nouvelles valeurs. Gros point faible il ne le fait qu'une fois par chargement de page pourquoi? je pensais au cache au debut du coup j'ai ajouté cà header("Cache-control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0"); header("Pragma: no-cache"); header("Cache-control: private"); mais pareil. Ca marche qu'une fois par chargement de page As tu une idée? Merci @++
|
|
vendredi 3 septembre 2010 à 17:46:36 |
Re : Menu deroulant dynamique ajax

kfarmel24
|
slt c est bien mais j aimerais charger un select a partir d'un autre autre select les données d'une base de donnée en metant la condition sur le premier select c est a dire le where dans la requette sql
et j ai un probleme pour gerer les session lors de la connexion a la page d'accueil
mersi d'avance
je travail avec ajax
|
|
Cette discussion est classée dans : menu, base, dynamique, ajax, deroulant
Répondre à ce message
Sujets en rapport avec ce message
Menu dynamique PHP [ par zorax69 ]
Hello,Je voudrais faire un menu vertical du type :gamme1___sous-gamme11______produit1______produit2___sous-gamme12______produit5______produit7gamme2__
il y a t'il un menu deroulant dynamique qui permet de selectionné un element et ensuite affiché les éléments correspondant a cette selection [ par antillais ]
J'ai fait un formulaire de saisie qui enregistre des donnees ds une table appropriée...Dans ce formulaire il y a une partie que j'aimerais qu'il aille
Comment faire un menu deroulant comme celui du site [ par MaXuo ]
Je prend comme exemple le site phpcs.com car ce que je recherche si trouve. Comment fait on le menu Derniers Blogs soit que la personne clic sur le "-
Menu déroulant dynamique [ par chris tuckers ]
Salute tout le monde, je cherche a faire un menu déroulant dynamique.C'est à dire une liste ou j'ai le choix de ce que je veux faire afficher de ma ba
largeur fixe du menu deroulant? [ par supertatane80 ]
bonjour à tous,voila mon problème dans mon formulaire de saisi j'ai un menu deroulant qui affiche les donnees à partir d'une base de données mysql. Da
Menu deroulant tableau dynamique [ par sensoide ]
Bonjour a tous,Je vous resume le probléme, j'ai un menu deroulant créé grace a ma base mysql.J'ai un tableau qui m'affiche des données, ces données vi
recuperer le choix d'un menu deroulant sans boutton d'activation [ par rachidphp93 ]
bonjour tout le monde ;Bonjour, je voudrai recuperer le choix d'un menu deroulant sans un bouton et sans recharger la page?<font
Classe menu dynamique [ par Teclis01 ]
bonjour, Voila en fait j'aimerais faire une classe de menu classé en rang. comme ceci +rang1 +rang 1.1 -rang 1.1.1 -rang1.2 ...
creation dynamique d'une requete sql [ par mechouiche42100 ]
Bonjour,voici mon probleme j'ai un formulaire de recherche avec 5 menu deroulant.Je voudrai cree une requete selon les choix dans les menus deroulants
menu dynamique [ par gabs77 ]
bonjour, je suis débutant en php et je cherche a faire un menu dynamique pour mon site certes il y a du javascript mais je n y comprends rienest ce qu
Livres en rapport
|
Derniers Blogs
ROSLYN FLUENT APIS: ROSLYNHELPER NUGET PACKAGEROSLYN FLUENT APIS: ROSLYNHELPER NUGET PACKAGE par Matthieu MEZIL
Si vous utilisez Roslyn et que vous vous voulez vous simplifier le code du code rewriter, je vous conseille d'installer mon NuGet package RoslynHelper ....(read more) ...
Cliquez pour lire la suite de l'article par Matthieu MEZIL POUR RAPPEL ! LES SPéCIFICATIONS DES PROTOCOLES OFFICE ET SHAREPOINT SONT DISPONIBLES SUR MSDNPOUR RAPPEL ! LES SPéCIFICATIONS DES PROTOCOLES OFFICE ET SHAREPOINT SONT DISPONIBLES SUR MSDN par neodante
Quelle est le point commun entre : Microsoft il y a 10 ans et Apple aujourd'hui ? Réponse: avoir une politique de protocoles propriétaires et fermés :) Car pour rappel (si si je vous assure c'est important de le rappeler), la majorité des spécifications e...
Cliquez pour lire la suite de l'article par neodante JOYEUX ANNIVERSAIRE NIXJOYEUX ANNIVERSAIRE NIX par ebartsoft
Souhaitons un bon et joyeux anniversaire à notre hôte à tous, Nix.
Je ne le répéterais jamais assez mais sans lui rien ne serait possible. Il défit en permanence les lois de la gravité et comme il le dit si bien, si tu lui fais confiance ça devra...
Cliquez pour lire la suite de l'article par ebartsoft IMAGINE CUP 2012, MAKE A SIGN EN FINALEIMAGINE CUP 2012, MAKE A SIGN EN FINALE par junarnoalg
Voilà qui est fait, la nouvelle est officielle ! L'équipe belge "Make a Sign" va au pays des kangourous défendre son projet dans la catégorie Software Design. http://www.imaginecup.com/CompetitionsContent/Competition/WorldwideFinalists.aspx V...
Cliquez pour lire la suite de l'article par junarnoalg KINECT 1.5 IS OUT !KINECT 1.5 IS OUT ! par Vko
La version 1.5 du Kinect For Microsoft vient tout juste de sortir ! Plein de nouveautés: Tracking de squelette en Near Mode Détection en position assise Détection faciale avec un SDK dédié Documentation et des guideline (enfin) Un out...
Cliquez pour lire la suite de l'article par Vko
Logiciels
sDEVIS-FACTURES vlPRO (8.1.0.3)SDEVIS-FACTURES VLPRO (8.1.0.3)sDEVIS-FACTURES vlPRO a été mis au point pour les particuliers, créateurs, entrepreneurs, artisa... Cliquez pour télécharger sDEVIS-FACTURES vlPRO 974 Application Server (12.2.4.6)974 APPLICATION SERVER (12.2.4.6)Développez de puissantes applications dans un environnement de 'cloud computing', clusterisé, séc... Cliquez pour télécharger 974 Application Server vPicture (1.4.2.1)VPICTURE (1.4.2.1)Avec vPicture, hébergez vos images facilement et rapidement.
vPicture est un utilitaire simple, ... Cliquez pour télécharger vPicture Easy-Planning (2.2.1.6)EASY-PLANNING (2.2.1.6)Easy-Planning permet de créer des plannings sous la représentation de diagrammes et est adapté au... Cliquez pour télécharger Easy-Planning COM-BACKUP (2.0)COM-BACKUP (2.0)
COM-BACKUP est un logiciel de sauvegarde qui permet de planifier les sauvegardes de vos dossiers ...
Cliquez pour télécharger COM-BACKUP
|