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

AJAX Discussion :

Listes déroulantes liées avec Ajax


Sujet :

AJAX

  1. #1
    Futur Membre du Club
    Femme Profil pro
    Étudiant
    Inscrit en
    Avril 2015
    Messages
    14
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 31
    Localisation : France, Doubs (Franche Comté)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Avril 2015
    Messages : 14
    Points : 5
    Points
    5
    Par défaut Listes déroulantes liées avec Ajax
    Bonjour, moi je travaille sur 3 listes deroulantes liées, le souci quand je change la valeur de la premiere par ex la deuxieme ne s'affiche pas,

    Ps: j'ai essayé d'afficher par exemple la deuxieme liste dans une autre page php sans ajax juste pour tester le remplissage et ca marche bien

    j'ai un fichier categorie.php qui contient la requete qui requpere les données de la deuxieme liste.
    index.php qui contient la 1ere liste et les div des 2 autres.
    aussi le fichier fonctions.js pour recharger les listes deroulantes voila mon code:
    code index.php
    Code php : 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
    <select  id ="equip" name="equip" onchange="cat()">
    <option value="">----- choisissez un Equipement ----</option>
    <?php 
    $requete = "SELECT DISTINCT equipement  FROM equipements  ORDER BY equipement";
    $result = pg_query($dbconn,$requete);
    while ($row = pg_fetch_assoc($result)) {
    echo '<option value="'.$row['equipement'].'"';
    if(isset($_POST["equip"]) && $_POST["equip"]==$row['equipement']){echo " selected";}
    echo '>'.$row['equipement'].'</option>';	
    }
    echo '
    </select></br>';
    ?>
     
    <div id="bloccategorie">
    <?php include('categorie.php'); ?>
    </div>
     
    <div id="bloclibelle">
    <?php include('libelle.php');?>
    </div>

    code categorie.php
    Code php : 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
    <?php
     
    if(isset($_POST["equip"]) && $_POST["equip"] != ""){
    $equip = $_POST["equip"];
    header('Content-Type: text/html; charset="iso-8859-1"');
    ?>
    <select id="categorie" name="categorie" onchange="libelle()">
        <option value="">-- Catégories--</option>'
     
    <?php
    $requete_cat = "SELECT distinct categorie FROM equipements WHERE equipement = '".$_POST['equip'] ."' ORDER BY categorie";
    $result_cat = pg_query($dbconn,$requete_cat);
     
    while ($row_cat = pg_fetch_array($result_cat)) {
    echo '<option value="'.$row_cat['categorie'].'"';
    if(isset($_POST["categorie"]) && $_POST["categorie"]==$row_cat['categorie']){echo " selected";}
    echo '>'.$row_cat['categorie'].'</option>';
    }
    ?>
    </select>
    <?php } ?>

    code fonctions.js
    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
    //Fonction permettant d'envoyer les categories
    function cat(){
     
        //On déclare un objet
        var objet_cat = objet_XMLHttpRequest();
        //On défini ce qu'on va faire quand on aura la réponse
        objet_cat.onreadystatechange = function(){
            //On ne fait quelque chose que si on a tout reçu et que le serveur est ok
            if(objet_cat.readyState == 4 && objet_cat.status == 200){
    		// On se sert de innerHTML pour rajouter les options a la liste
                //On envoie la réponse dans le div "bloccategorie"
                document.getElementById('bloccategorie').innerHTML = objet_cat.responseText;
            }
            //côté ajax ça merde
            else{
                //on contrôle le statut. Si 404, le fichier ouvert par "open" n'existe pas
                if(objet_cat.status == 404){
                    alert('Erreur ' +objet_cat.status + '! Le fichier php semble être absent...');
                }
            }
        }
        //Ouverture : méthode, fichier, mode (true=asynchrone | false=synchrone)
        objet_cat.open("POST", "categorie.php" ,false);
        objet_cat.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        sel_equip = document.getElementById('equip');
        equipement = sel_equip.options[sel_equip.selectedIndex].value;
        //envoie
        objet_cat.send("equipement = "+equipement);
     
    }
    mercii

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 112
    Points
    44 112
    Par défaut
    Bonjour,
    la première des choses à faire est de vérifier ce que te retourne le serveur en mettant par exemple un console.log( obj.responseText) ou de regarder ce qui ce passe dans l'onglet Réseaux de la console.

    La deuxième est de mettre le code HTML généré et/ou de mettre une page de test en ligne.

  3. #3
    Futur Membre du Club
    Femme Profil pro
    Étudiant
    Inscrit en
    Avril 2015
    Messages
    14
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 31
    Localisation : France, Doubs (Franche Comté)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Avril 2015
    Messages : 14
    Points : 5
    Points
    5
    Par défaut
    salut,
    quand je change la premiere liste le serveur retourne dans la console que le paramètre qui est la valeur de la premiere liste et rien dans les reponses (les valeurs de la deuxieme liste)

  4. #4
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 112
    Points
    44 112
    Par défaut
    Ton problème est plutôt coté PHP.

    Si l'on regarde les données manipulées
    coté client
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    objet_cat.send("equipement = "+equipement);
    coté serveur
    Code php : Sélectionner tout - Visualiser dans une fenêtre à part
    if(isset($_POST["equip"]) && $_POST["equip"] != ""){
    ou autre
    Code php : Sélectionner tout - Visualiser dans une fenêtre à part
    if(isset($_POST["categorie"]) && $_POST["categorie"]==$row_cat['categorie']){echo " selected";}

    De la cohérence nait la lumière !

  5. #5
    Futur Membre du Club
    Femme Profil pro
    Étudiant
    Inscrit en
    Avril 2015
    Messages
    14
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 31
    Localisation : France, Doubs (Franche Comté)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Avril 2015
    Messages : 14
    Points : 5
    Points
    5
    Par défaut
    Oui vous avez raison, le probleme cetait dans php
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    if(isset($_POST["equip"]) && $_POST["equip"] != ""){
    la deuxieme liste s'affiche quand je lai enlevé ce code, mais elle est vide parce que jarrive pas a recuperer la valeur de la premiere liste avec $_POST['equip']

  6. #6
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 112
    Points
    44 112
    Par défaut
    Oui vous avez raison, le probleme cetait dans php
    certes mais pas en le réglant de cette façon !

    Coté client tu envoies equipement, c'est donc equipement que tu dois récupérer coté serveur
    Code php : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    if(isset($_POST["equipement"]) && $_POST["equipement"] != ""){
      // etc ...

  7. #7
    Futur Membre du Club
    Femme Profil pro
    Étudiant
    Inscrit en
    Avril 2015
    Messages
    14
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 31
    Localisation : France, Doubs (Franche Comté)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Avril 2015
    Messages : 14
    Points : 5
    Points
    5
    Par défaut
    oui cest ca ce que je faisais avant mais il recupere pas la valeur de la premiere liste du coup il bloquait l'affichage de la deuxieme

    voila le code 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
     
     
    <?php
     
    if(isset($_POST["equipement"]) && $_POST["equipement"] != ""){
    $equip = $_POST["equipement"];
    //echo "equipement:".$equip."</br>";
    ?>
    Categorie :
    <select id="categorie" name="categorie">
        <option value="">-- Choisissez une Catégorie----</option>'
     
    <?php
    $requete_cat = "SELECT distinct categorie FROM equipements WHERE equipement ='".$equip ."' ORDER BY categorie";
    echo $requete_cat;
    $result_cat = pg_query($dbconn,$requete_cat);
     
    while ($row_cat = pg_fetch_array($result_cat)) {
    echo '<option value="'.$row_cat['categorie'].'"';
    echo '>'.$row_cat['categorie'].'</option>';
    }
    ?>
    </select>
    <?php } ?>

  8. #8
    Futur Membre du Club
    Femme Profil pro
    Étudiant
    Inscrit en
    Avril 2015
    Messages
    14
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 31
    Localisation : France, Doubs (Franche Comté)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Avril 2015
    Messages : 14
    Points : 5
    Points
    5
    Par défaut
    Quand jenleve la ligne
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    if(isset($_POST["equipement"]) && $_POST["equipement"] != ""){
    la deuxieme liste s'affiche mais vide

  9. #9
    Invité
    Invité(e)
    Par défaut
    Bonjour,

    1/ Dans categorie.php, je ne vois aucun script de connexion.
    Pourtant, ce fichier est appelé via ajax, et est donc indépendant (doit être autonome).

    2/
    Code php : Sélectionner tout - Visualiser dans une fenêtre à part
    if(isset($_POST["equipement"]) && $_POST["equipement"] != ""){
    peut s'écrire...
    Code php : Sélectionner tout - Visualiser dans une fenêtre à part
    if( !empty($_POST["equipement"]) ){
    ...sauf si 0 (zéro) est une valeur acceptable.

  10. #10
    Futur Membre du Club
    Femme Profil pro
    Étudiant
    Inscrit en
    Avril 2015
    Messages
    14
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 31
    Localisation : France, Doubs (Franche Comté)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Avril 2015
    Messages : 14
    Points : 5
    Points
    5
    Par défaut
    Bonjour jreaux62,

    si j'ai la ligne de cnnx au debut juste je lai pas met,
    et pour (!empty($_POST["equipement"])), j'ai testé juste if(isset($_POST["equipement"])) pour vooir s'il recupere la valeur ou pas, mais malheureusement il m'affiche rien il n'arrive pas à la récuperer.

    par contre avant d'ajouter le code ajax ca marchait bien, il recuperait la premiere valeur et il l'affiche dans la deuxieme liste

  11. #11
    Futur Membre du Club
    Femme Profil pro
    Étudiant
    Inscrit en
    Avril 2015
    Messages
    14
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 31
    Localisation : France, Doubs (Franche Comté)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Avril 2015
    Messages : 14
    Points : 5
    Points
    5
    Par défaut
    je ne sais pas si je peux recuperer la valeur de la premiere liste a partir de la fonction ajax, pour l'avoir dans le fichier php, mais je ne sais pas comment parce que la premiere fois que jutilise ajax

    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
     
    //Fonction permettant d'envoyer les categories
    function cat(){
     
        //On déclare un objet
        var objet_cat = getXhr();
        //On défini ce qu'on va faire quand on aura la réponse
        objet_cat.onreadystatechange = function(){
            //On ne fait quelque chose que si on a tout reçu et que le serveur est ok
            if(objet_cat.readyState == 4 && objet_cat.status == 200){
    		// On se sert de innerHTML pour rajouter les options a la liste
                //On envoie la réponse dans le div "bloccategorie"
                document.getElementById('bloccategorie').innerHTML = objet_cat.responseText;
            }
            //côté ajax ça merde
            else{
                //on contrôle le statut. Si 404, le fichier ouvert par "open" n'existe pas
                if(objet_cat.status == 404){
                    alert('Erreur ' +objet_cat.status + '! Le fichier php semble être absent...');
                }
            }
        }
        //Ouverture : méthode, fichier, mode (true=asynchrone | false=synchrone)
        objet_cat.open('POST', 'categorie.php' ,true);
        objet_cat.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        sel_equip = document.getElementById('equipement');
        equipement = sel_equip.options[sel_equip.selectedIndex].value;
        //envoie
        objet_cat.send("equipement = "+equipement);
    }

  12. #12
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 112
    Points
    44 112
    Par défaut
    Commence par modifier l'appel à ta fonction de la sorte
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <select  id ="equip" name="equip" onchange="cat( this.value)">
    ta fonction devient, simplifiée pour l'occasion
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    function cat(param) {
        var oXhr = new XMLHttpRequest();
        oXhr.open('POST', 'categorie.php', true);
        oXhr.onreadystatechange = function () {
            if (oXhr.readyState == 4 && oXhr.status == 200) {
                document.getElementById('bloccategorie').innerHTML = oXhr.responseText;
            }
        }
        oXhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        oXhr.send('equipement=' + param);
    }
    et coté PHP tu peux tester avec un simple print_r ($_POST) ou var_dump($_POST).

  13. #13
    Futur Membre du Club
    Femme Profil pro
    Étudiant
    Inscrit en
    Avril 2015
    Messages
    14
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 31
    Localisation : France, Doubs (Franche Comté)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Avril 2015
    Messages : 14
    Points : 5
    Points
    5
    Par défaut
    ouii maintenant ca marche bien mercii bccp et bonne fete

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [DOM] Deuxieme liste déroulante liée via ajax, encore inclure ajax?
    Par clara1 dans le forum Général JavaScript
    Réponses: 48
    Dernier message: 16/05/2008, 16h06
  2. [12] [?] 2 Listes déroulantes liées avec utilisation de paramètres
    Par johannT dans le forum SAP Crystal Reports
    Réponses: 1
    Dernier message: 03/04/2008, 16h45
  3. Gestion de 5 listes déroulantes liées avec paramètres SQL
    Par kenshir0 dans le forum Servlets/JSP
    Réponses: 1
    Dernier message: 06/04/2007, 19h46
  4. [AJAX] Listes déroulantes liées avec Ajax
    Par paupiette dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 01/08/2006, 17h51
  5. [MySQL] Problème de listes déroulantes liées avec requêtes sql
    Par richton95 dans le forum PHP & Base de données
    Réponses: 5
    Dernier message: 21/12/2005, 17h04

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