Menu deroulant dynamique ajax

Signaler
Messages postés
10
Date d'inscription
samedi 3 janvier 2004
Statut
Membre
Dernière intervention
29 août 2006
-
Messages postés
2
Date d'inscription
lundi 27 juillet 2009
Statut
Membre
Dernière intervention
3 janvier 2012
-
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.

9 réponses

Messages postés
10
Date d'inscription
samedi 3 janvier 2004
Statut
Membre
Dernière intervention
29 août 2006
1
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

      O.A.M : ,
            

       <?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>";
        ?>     
   

     ,
     
   
    ----

   

-------------------------------------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?
Messages postés
2268
Date d'inscription
mercredi 27 novembre 2002
Statut
Membre
Dernière intervention
13 septembre 2013
3
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???"
Messages postés
10
Date d'inscription
samedi 3 janvier 2004
Statut
Membre
Dernière intervention
29 août 2006
1
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>
O.A.M :
</td>

<td>




<select name ="oam" id="oam" style="width:240" >

<option value=""></option>

</select>




</td>

<td>[param_oam.php ]</td>

<td>&nbsp;</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
Messages postés
2268
Date d'inscription
mercredi 27 novembre 2002
Statut
Membre
Dernière intervention
13 septembre 2013
3
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???"
Messages postés
10
Date d'inscription
samedi 3 janvier 2004
Statut
Membre
Dernière intervention
29 août 2006
1
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
Messages postés
2268
Date d'inscription
mercredi 27 novembre 2002
Statut
Membre
Dernière intervention
13 septembre 2013
3
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???"
Messages postés
10
Date d'inscription
samedi 3 janvier 2004
Statut
Membre
Dernière intervention
29 août 2006
1
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 :-)
@++
Messages postés
10
Date d'inscription
samedi 3 janvier 2004
Statut
Membre
Dernière intervention
29 août 2006
1
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 @++
Messages postés
2
Date d'inscription
lundi 27 juillet 2009
Statut
Membre
Dernière intervention
3 janvier 2012

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