IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

[AJAX] Plusieurs listes déroulantes


Sujet :

JavaScript

  1. #1
    Membre confirmé

    Profil pro
    Inscrit en
    Décembre 2006
    Messages
    464
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Décembre 2006
    Messages : 464
    Points : 474
    Points
    474
    Par défaut [AJAX] Plusieurs listes déroulantes
    Bonjour,

    J'ai le problème suivant sur Firefox, mais pas sous IE.
    J'ai réalisé une liste déroulante qui se complète selon ce tuto : http://siddh.developpez.com/articles/ajax/

    Tout marche nikel sur FF et IE.

    J'ai voulu rajouter une 3ème liste déroulante :
    On choisit la première qui induit le contenu de la seconde, puis on choisi la
    seconde qui induit la troisième.
    J'ai dupliqué les fonctions tout fonctionne sur IE mais sur Firefox la troisième liste ne se complète pas

    J'ai l'erreur suivante :
    document.formu.annee has no properties
    Sur cette ligne :
    MM_annee = document.formu.annee.options[document.formu.annee.selectedIndex].value;
    formu est le nom de mon formulaire, et annee le nom du champ.

    Quelle est l'erreur sur Firefox ?
    Merci de votre aide.

  2. #2
    Membre régulier
    Homme Profil pro
    Développeur Web
    Inscrit en
    Septembre 2005
    Messages
    202
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Services à domicile

    Informations forums :
    Inscription : Septembre 2005
    Messages : 202
    Points : 124
    Points
    124
    Par défaut
    Salut,

    As tu trouvé une solution à ton problème car j'ai exactement le même soucis actuellement...

  3. #3
    Membre confirmé

    Profil pro
    Inscrit en
    Décembre 2006
    Messages
    464
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Décembre 2006
    Messages : 464
    Points : 474
    Points
    474
    Par défaut
    Ben j'ai avancé un peu, essaye ça :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    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 les options a la liste
    						document.getElementById('champb').innerHTML = leselect;
    					}
    				}
     
    				// Ici on va voir comment faire du post
    				xhr.open("POST","ajax.php",true);
    				// ne pas oublier ça pour le post
    				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    				// ne pas oublier de poster les arguments
    				idm = document.formu.champa.options[document.formu.champa.selectedIndex].value;
    				//alert(idmarque);
    				xhr.send("champa="+idm);
    			}

  4. #4
    Membre régulier
    Homme Profil pro
    Développeur Web
    Inscrit en
    Septembre 2005
    Messages
    202
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Services à domicile

    Informations forums :
    Inscription : Septembre 2005
    Messages : 202
    Points : 124
    Points
    124
    Par défaut
    Bon ben c'est cool, cette nuit au boulot j'ai réfléchi au problème et ça fonctionne, voici mon code pour info :
    Le fichier test.php
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
     
    <?php
    require_once '../include/class.lib.php';
    $a = new lib();
    echo $a->entete();
    ?>
    <script lanuage="javascript" type="text/javascript">
    function createRequestObject()
    {
        var ro;
        ro = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
        return ro;
    }
     
    var http = createRequestObject();
     
    function GetIdCountry()
    {
        var ID_Country = document.getElementById('countryList').options[document.getElementById('countryList').selectedIndex].value;
        return ID_Country;
    }
     
    function GetIdState()
    {
        var ID_State = document.getElementById('stateList').options[document.getElementById('stateList').selectedIndex].value;
        return ID_State;
    }
     
    function sndReq(param,arg1,arg2)
    {
        var IdCountry = GetIdCountry();
        http.open('get', './ajax.php?param='+param+'&IdCountry='+IdCountry);
        http.onreadystatechange = handleResponse;
        http.send(null);
    }
     
    function sndReq2(param)
    {
        var IdState = GetIdState();
        http.open('get', './ajax.php?param='+param+'&IdState='+IdState);
        http.onreadystatechange = handleResponse;
        http.send(null);
    }
     
    function handleResponse()
    {
        if (http.readyState == 4) {
            var response = http.responseText;
            var update = new Array();
     
            if (response.indexOf('|') != -1) {
                update = response.split('|');
                document.getElementById(update[0]).innerHTML = update[1];
            }
        }
    }
    </script>
    </head>
    <body>
     
    <form action="" method="POST">
    <select id="countryList" name="countryList" size="1" onChange="sndReq('State')">
    <option>Choisissez votre pays</option>
     
    <?php
    $queryCountry = $a->query('SELECT ID_Country, CountryName FROM Country ORDER BY CountryName ASC');
    while ($resultCountry = mysql_fetch_array($queryCountry)) {
        echo '<option value="'.$resultCountry['ID_Country'].'">'.$resultCountry['CountryName'].'</option>';
    }
    ?>
    </select><br>
     
    <div id="State"></div>
    <input type="submit">
    </form>
     
    <pre>
    <?php
    print_r($_POST);
    ?>
    </pre>
     
    </body>
    </html>
    Et le fichier ajax.php
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
     
    <?php
    require_once '../include/class.lib.php';
    $a = new lib();
     
    switch ($_REQUEST['param']) {
    /** ******************************************************************************
     * Generation de la liste des etats
     */
    case 'State':
        $stateList = '<select size="1" id="stateList" name="stateList" onChange="sndReq2(\'City\')">
        <option>Choix du departement</option>';
        
        $sqlState = 'SELECT ID_State, StateName FROM State WHERE ID_Country = '.$_REQUEST['IdCountry'];
        
        $queryState = $a->query($sqlState);
        while ($resultState = mysql_fetch_array($queryState)) {
            $stateList .= '<option value="'.$resultState['ID_State'].'">'.$resultState['StateName'].'</option>';
        }
     
        $stateList .= '</select><br><div id="City"></div>';
        
        echo 'State|<br>'.$stateList;
        break;
        
    /** ******************************************************************************
     * Generation de la liste des villes
     */
    case 'City':
        $cityList = '<select size="1" name="cityList">';
        
        $sqlCity = 'SELECT ID_City, CityName, PostCode FROM City WHERE ID_State = '.$_REQUEST['IdState'];    
        
        $queryCity = $a->query($sqlCity);
        while ($resultCity = mysql_fetch_array($queryCity)) {
            $cityList .= '<option value="'.$resultCity['ID_City'].'">'.$resultCity['CityName'].' ('.$resultCity['PostCode'].')</option>';
        }
     
        $cityList .= '</select><br><div id="NoCity"></div><a href="javascript:sndReq(\'NoCity\')">Ville non trouvee</a>';
            
        echo 'City|<br>'.$cityList;
        break;
     
     
    case 'NoCity':
        echo 'NoCity|<input type="text" size="30" name="NewCityName">';
        break;
    }
    ?>
    Ces fichiers ne me servent que pour mes tests mais ça fonctionne très bien

Discussions similaires

  1. Plusieurs listes déroulantes liées (ajax)
    Par sassien dans le forum Struts 2
    Réponses: 1
    Dernier message: 18/03/2008, 14h52
  2. [Conception] recherche via plusieurs listes déroulantes
    Par chicho dans le forum PHP & Base de données
    Réponses: 5
    Dernier message: 13/03/2007, 18h56
  3. [AJAX] plusieurs listes liées
    Par highman dans le forum Général JavaScript
    Réponses: 7
    Dernier message: 02/03/2007, 11h31
  4. [AJAX] Listes déroulantes
    Par gscorpio dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 04/12/2006, 10h15
  5. Formulaire avec plusieurs listes déroulantes
    Par cyberdevelopment dans le forum Langage
    Réponses: 5
    Dernier message: 17/07/2006, 17h59

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo