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

Vue hybride

Message pr�c�dent Message pr�c�dent   Message suivant Message suivant
  1. #1
    Membre �clair� Avatar de allyson
    Inscrit en
    Ao�t 2003
    Messages
    261
    D�tails du profil
    Informations forums :
    Inscription : Ao�t 2003
    Messages : 261
    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

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

    Informations forums :
    Inscription : Novembre 2005
    Messages : 3 868

  3. #3
    Membre �clair� Avatar de allyson
    Inscrit en
    Ao�t 2003
    Messages
    261
    D�tails du profil
    Informations forums :
    Inscription : Ao�t 2003
    Messages : 261
    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

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

    Informations forums :
    Inscription : Novembre 2005
    Messages : 3 868

  5. #5
    Membre �clair� Avatar de allyson
    Inscrit en
    Ao�t 2003
    Messages
    261
    D�tails du profil
    Informations forums :
    Inscription : Ao�t 2003
    Messages : 261
    Par d�faut
    c'est g�nial
    merci beaucoup et bonne continuation

+ 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