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 :

[php/JS]listes déroulantes liées [Fait]


Sujet :

JavaScript

  1. #1
    Membre actif Avatar de allyson
    Inscrit en
    Août 2003
    Messages
    261
    Détails du profil
    Informations forums :
    Inscription : Août 2003
    Messages : 261
    Points : 277
    Points
    277
    Par défaut [php/JS]listes déroulantes liées
    bonjour à tous;
    je sais que ce sujet a été traité plus d'une fois mais malgré toutes les recherches que j'ai faites je bute sur ce point depuis plus de 2 jours
    j'ai fini par trouver un code que j'ai essayé d'adapter (sans faire beaucoup de modifications) mais ça ne marche pas!!!
    je dois récupérer des données (régions et départements) de deux tables mysql et les afficher dans un formulaire (qui contient d'autres champs et listes déroulantes)! comme vous l'aurez certainement deviné les départements dépendent de la région sélectionnée!
    le programme que j'ai ne m'affiche que les régions et apparemment un script JS bogue pour je ne sais quelle raison et comme je ne m'y connais po en JS je bute
    vous trouverez ci-dessous les codes:
    ce 1er code c'est celui qui bogue apparemment
    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
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    // JavaScript Document
    /**
    * Fonctions de sérialisation de tableaux PHP vers des tableaux JavaScript
    * On récupère des valeurs de PHP pour les retourner en JavaScript.
    */
    function PhpArray2Js(tabphp_serialise)
    {
        this.php = corrigerChainePHP(tabphp_serialise);
        var dim = this.extraireDimTab();
        this.tabjs = this.transformer(dim);
    }
     
    PhpArray2Js.prototype.retour = function()
    {
        // retourne le tableau JS
        return this.tabjs;
    }
     
    PhpArray2Js.prototype.transformer = function(dim)
    {
        // méthode principale qui transforme la chaîne sérialisée en un tableau Javascript
        // dim est la dimension du tableau PHP
        var tab = new Array();
        // extrait un groupe de dim données (indice - valeur)
        for (var i=0;i<dim;i++)
        {
            // extrait un indice : numérique ou littéral
            var indice = this.extraireIndice();
            if (indice == -1)
            {
                return;
            }
            // extrait une valeur : tableau, null, booléen, numérique ou littéral
            var valeur = this.extraireValeur();
            if (valeur == -1)
            {
                tab[indice] = undefined;
            }
            else
            {
                switch (valeur[0])
                {
                    case "N" : tab[indice] = null;                          break;
                    case "b" : tab[indice] = valeur[1] ? true : false;      break;
                    case "i" : tab[indice] = parseInt(valeur[1]);           break;
                    case "d" : tab[indice] = parseFloat(valeur[1]);         break;
                    case "s" : tab[indice] = valeur[1];                     break;
                    case "a" : tab[indice] = this.transformer(valeur[1]);   break;
                    default  : tab[indice] = undefined;
                }
            }
        }
        // en fin de groupe de données, supprime le "}" final
        this.php = this.php.substring(1);
        return tab;
    }
     
    PhpArray2Js.prototype.extraireDimTab = function()
    {
        // extrait la dimension N du tableau de "a:N:{"
        var reg = this.php.match(/^a:(d+):{/);
        if (reg != -1)
        {
            // on coupe le texte de l'entité détectée
            this.php = this.php.substring(reg[0].length);
            return reg[1];
        }
        else
        {
            return -1;
        }
    }
     
    PhpArray2Js.prototype.extraireIndice = function()
    {
        // extrait l'indice d'un tableau
        // cet indice peut être de la forme "i:\d+" ou "s:\d+:\"\w+\""
        var retour;
        var reg = this.php.match(/^((i):(d+);|(s):d+:"([^"]+)";)/);
        if (reg != -1)
        {
            // on coupe le texte de la chaîne détectée
            this.php = this.php.substring(reg[0].length);
            if (reg[2] == "i") retour = reg[3];
            else if (reg[4] == "s") retour = reg[5];
            else retour = -1;
        }
        else retour = -1;
        return retour;
    }
     
    PhpArray2Js.prototype.extraireValeur = function()
    {
        // extrait une valeur au début de this.php
        // cette valeur est de type "a:d+:{" ou "N" ou "b:[01]" ou "i:d+" ou "i:[d.]+" ou "s:d+:"\w+\""
        // on tente de détecter une valeur en tête de texte
        var retour;
        var reg = this.php.match(/^((N);|(b):([01]);|(i):(d+);|(d):([d.]+);|(s):d+:"([^"]*)";|(a):(\d+):\{)/);
        if (reg != -1)
        {
            // on coupe le texte de la valeur détectée
            this.php = this.php.substring(reg[0].length);
            // retour est un tableau contenant le type et la valeur de la donnée détectée dans la chaîne
            if (reg[2] == "N") retour = new Array("N", null); // valeur nulle
            else if (reg[3] == "b") retour = new Array("b", reg[4]); // booléen (true/false)
            else if (reg[5] == "i")  retour = new Array("i", reg[6]); // entier
            else if (reg[7] == "d")  retour = new Array("d", reg[8]); // entier double ou flottant
            else if (reg[9] == "s") retour = new Array("s", remplacerQuotes(reg[10])); // chaîne de caractères
            else if (reg[11] == "a") retour = new Array("a", reg[12]); // sous-tableau
            else retour = -1;
        }
        else retour = -1;
        return retour;
    }
     
    function corrigerChainePHP(chaine)
    {
        // remplace les &quot; en " uniquement autour des chaînes de caractères
        chaine = chaine.replace(/:&quot;/g, ':"');
        chaine = chaine.replace(/&quot;;/g, '";');
        return chaine;
    }
     
    function remplacerQuotes(chaine)
    {
        // remplace les &quot; à l'intérieur des chaînes de caractères
        return chaine.replace(/&quot;/g, '\"');
    }
    PhpArray2Js.prototype.var_dump = function() {
        // affiche le tableau
        return var_dump(this.tabjs);
    }
     
    function var_dump(tab)
    {
        // fonction analogue à var_dump en PHP, mais plus simple
        var indent = (arguments.length == 2) ? arguments[1] + "\t" : "\t";
        var i = 0;
        var elements = "";
        for (var elt in tab)
        {
            elements += (i ? ",\n " : " ") + indent + "[" + elt + "]:";
            switch (typeof tab[elt])
            {
                case "string" :
                elements += "\"" + tab[elt] + "\""; break;
                case "number" :
                elements += tab[elt]; break;
                case "object" :
                if (tab[elt] == null) elements += "*null*";
                else if (tab[elt]) elements += var_dump(tab[elt], indent); break;
                case "undefined" :
                elements += "*undefined*"; break;
                default : elements += tab[elt];
            }
            i++;
        }
        return "tableau(" + i + "){\n" + elements + "\n" + (arguments[1] ? arguments[1] : "") + "}";
    }
    ce 2nd code pour l'affichage des départements
    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
    / JavaScript Document
    /* On crée la fonction qui va construire la seconde liste déroulante */
    function changeDept(tab,idr)
    {
        if(idr != "vide")
        {
        /* On compte les départements de cette région */
        var nbd = tab[idr][1].length;
        var form_d  = '<select name="departement" id="departement">';
        for(var j = 0;  j < nbd; j++)
        {
            form_d += '  <option value="'+ tab[idr][1][j] +'">'+ tab[idr][2][j] +" ("+ tab[idr][1][j] +')<\/option>';
        }
        form_d += '<\/select>';
        }
        else
        {
            form_d = "";
        }
        document.getElementById("blocDepartements").innerHTML = form_d;
    }
    et le 3ème c'est le code php qui affiche le formulaire
    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
    <?php
                                                                       //listes liées
    /* Requête SQL de récupération des données */
    $sql = "SELECT matricule AS idd, nom AS dept, matriculecom AS idr, nomcom FROM wilaya, commune WHERE matricule = matriculecom ORDER BY matriculecom;";
    /* Connexion et exécution de la requête */
    $connexion = mysql_connect("host", "user", "pwd");
    if($connexion != false)
    {
        $choixbase = mysql_select_db("bd", $connexion);
             
        $recherche = mysql_query($sql) or die('Erreur SQL !'.$sql.'<br>'.mysql_error());
        /* Pour ne pas écraser mes tableaux, je crée un témoin */
        $temoin_r = 0;
        /* Création du tableau PHP des valeurs récupérées */
        $regions = array();
        /* Index du département par tableau régional */
        $id = 0;
        while($ligne = mysql_fetch_array($recherche))
        {
            $r = $ligne['idr'];
            $d = $ligne['idd'];
            /* Je vérifie si je suis toujours dans la même région, sinon je crée les tableaux nécessaires */
            if($temoin_r != $r)
            {
                $regions[$r] = array();
                /* J'ajoute laa région */
                $regions[$r][0] = $ligne['dept'];
                $regions[$r][1] = array();
                $regions[$r][2] = array();
                $temoin_r = $r;
                $id = 0;
            }
            /* J'ajoute les départements */
            $regions[$r][1][$id] = $d;
            $regions[$r][2][$id] = $ligne['dept'];
            $id++;
        }
        /* On sérialise le tableau obtenu pour traitement par JavaScript */
        $chaine = htmlspecialchars(serialize($regions), ENT_QUOTES);
    ?>
    <script type="text/javascript">
    /* <![CDATA[ */
    <!--
    /*
    * Ici, on transmets la chaîne sérialisée à JavaScript
    * pour la transformer en tableau indexé JavaScript
    */
    var tableau = new PhpArray2Js('<?php echo $chaine; ?>');
    var tab = tableau.retour();
    // -->
    /* ]]> */
    </script>
     
     
     
     
      <fieldset style="border: 3px double #333399">
     
        <select name="region" id="region" onchange="changeDept(tab,this.value);">
          <option value="vide">- - - Choisissez une wilaya - - -</option>
        <?php
        /* Construction de la première liste : on se sert du tableau PHP */
        $nbr = count($regions);
        foreach($regions as $nr => $nom)
        {
            ?>
        <option value="<?php echo($nr); ?>"><?php echo($nom[0]); ?></option>
    <?php
        }
        ?>
        </select>
        <!-- ICI, le secret : on met un bloc avec un id ou va s'insérer le code de
             la seconde liste déroulande -->
      <span id="blocDepartements"></span><br />
      <? 
     
      ?>
      </fieldset>
     
    <?php
    //fin form    
    }
    >
    merci à tous et désolée
    .: and Justice for all :.
    ------------------------------------------------------------
    Membre du jury de l'élection de Mister DVP.com
    les règles du forum
    de penser au tag

  2. #2
    Expert confirmé
    Avatar de siddh
    Inscrit en
    Novembre 2005
    Messages
    3 868
    Détails du profil
    Informations personnelles :
    Âge : 48

    Informations forums :
    Inscription : Novembre 2005
    Messages : 3 868
    Points : 5 011
    Points
    5 011
    Alunissage : Procédé technique consistant à déposer des imbéciles sur un rêve enfantin.

    Cours | FAQ | Sources Javascript
    Cours | FAQ | Sources PHP
    Mes Articles

  3. #3
    Membre actif Avatar de allyson
    Inscrit en
    Août 2003
    Messages
    261
    Détails du profil
    Informations forums :
    Inscription : Août 2003
    Messages : 261
    Points : 277
    Points
    277
    Par défaut
    désolée
    là j'ai opté pour la solution 100% php
    merci pour les liens je pense bien que je vais me mettre au JS sérieusement
    merci encore
    .: and Justice for all :.
    ------------------------------------------------------------
    Membre du jury de l'élection de Mister DVP.com
    les règles du forum
    de penser au tag

  4. #4
    Expert confirmé
    Avatar de siddh
    Inscrit en
    Novembre 2005
    Messages
    3 868
    Détails du profil
    Informations personnelles :
    Âge : 48

    Informations forums :
    Inscription : Novembre 2005
    Messages : 3 868
    Points : 5 011
    Points
    5 011
    Alunissage : Procédé technique consistant à déposer des imbéciles sur un rêve enfantin.

    Cours | FAQ | Sources Javascript
    Cours | FAQ | Sources PHP
    Mes Articles

  5. #5
    Membre actif Avatar de allyson
    Inscrit en
    Août 2003
    Messages
    261
    Détails du profil
    Informations forums :
    Inscription : Août 2003
    Messages : 261
    Points : 277
    Points
    277
    Par défaut
    c'est génial
    merci beaucoup et bonne continuation
    .: and Justice for all :.
    ------------------------------------------------------------
    Membre du jury de l'élection de Mister DVP.com
    les règles du forum
    de penser au tag

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

Discussions similaires

  1. [AJAX] avec 3 listes déroulantes liées php+xhtml+css+javascript+ajax
    Par Invité dans le forum Général JavaScript
    Réponses: 10
    Dernier message: 27/12/2008, 15h54
  2. [AJAX] Listes déroulantes liées php+ajax
    Par Sh4dow49 dans le forum Général JavaScript
    Réponses: 8
    Dernier message: 11/07/2008, 15h31
  3. ajax, php et 3 listes déroulantes liées
    Par jfox dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 04/04/2008, 14h13
  4. [PHP-JS] Listes déroulantes liées
    Par merymaru dans le forum Langage
    Réponses: 5
    Dernier message: 15/06/2007, 09h33
  5. [PHP-JS] Listes déroulantes liées
    Par gwen-al dans le forum Langage
    Réponses: 3
    Dernier message: 02/02/2007, 01h30

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