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

jQuery Discussion :

chained.js et sélecteur dynamique


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Candidat au Club
    Homme Profil pro
    Développeur Full-Stack
    Inscrit en
    Janvier 2016
    Messages
    2
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : France, Var (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Développeur Full-Stack

    Informations forums :
    Inscription : Janvier 2016
    Messages : 2
    Par défaut chained.js et sélecteur dynamique
    Bonjour,


    je suis novice en Jquery et je n'arrive pas à résoudre mon problème malgré de nombreuses recherches ...

    Mon code fonctionne partiellement, l'enchainement des mes sélecteur avec le plugin chained.js fonctionne uniquement sur ma deuxième série de sélecteur ...

    Voici mon code :

    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
     
    <!DOCTYPE html>
    <html lang="fr">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Form</title>
        <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link href="css/global.css" rel="stylesheet">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/chained.min.js" type="text/javascript" charset="utf-8"></script> 
        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
      </head>
    <body>
     
    <div class="container">
        <form class="form-inline" method="post" action="">
            <div id="global-aliment">
                <div class="row">
                    <div class="col-md-4">
                        <div id="global-type-aliment">
                            <select id="type_aliment-1" name="type_aliment-1" class="type_aliment form-control">
                                <option value="">--</option>
                                <option value="viande" class="viande">Viande</option>
                                <option value="poisson" class="poisson">Poisson</option>
                                <option value="feculent" class="feculent">Féculents</option>
                                <option value="legume" class="legume">Légume</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div id="global-name-aliment">
                            <select id="name_aliment-1" name="name_aliment-1" class="name_aliment form-control">
                                <option value="">--</option>
                                <option value="dinde" class="viande">Dinde</option>
                                <option value="boeuf" class="viande">Boeuf</option>
                                <option value="porc" class="viande">Porc</option>
                                <option value="collin" class="poisson">Collin</option>
                                <option value="riz" class="feculent">Riz</option>
                                <option value="patte" class="feculent">Patte</option>
                                <option value="patate_douce" class="feculent">Patates douces</option>
                                <option value="boulgour" class="feculent">Boulgour</option>
                                <option value="haricot" class="legume">Haricot</option>
                                <option value="choux" class="legume">Choux</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div id="global-qte">
                            <input id="qte-1" name="qte-1" type="text" class="form-control" placeholder="Quantité">
                        </div>
                    </div>
                </div><!-- END ROW -->
            </div>
     
            <input class="btn btn-default" id="add_aliment" type="button" value="Ajouter un aliment"/>
            <input class="btn btn default" type="submit" value="Calculer" />
        </form>
    </div> <!-- END CONTAINER -->
     
     
    <script type="text/javascript">
     
        $(document).ready(function(){
     
            $('#add_aliment').click(function(){
     
                //Ajoute du selecteur n°1
                var a = $("#global-type-aliment select:last").clone();
                //Incremente le name
                var name = $(a).attr('name');
                value = name.split('-');
                name = value[0]+'-'+(parseInt(value[1])+1);
                $(a).attr('name', name);
                //Incremente l'id de +1
                var id = $(a).attr('id');
                value = id.split('-');
                id = value[0]+'-'+(parseInt(value[1])+1);
                $(a).attr('id', id);
                //Insert le select
                $("#global-type-aliment").append(a);
     
     
                //Ajoute du selecteur n°2
                var c = $("#global-name-aliment select:last").clone();
                //Incremente le name
                var name = $(c).attr('name');
                value = name.split('-');
                name = value[0]+'-'+(parseInt(value[1])+1);
                $(c).attr('name', name);
                //Incremente l'id
                var id = $(c).attr('id');
                value = id.split('-');
                id = value[0]+'-'+(parseInt(value[1])+1);
                $(c).attr('id', id);
                //Insert le select
                $("#global-name-aliment").append(c);
     
     
                //Ajout de l'input
                var d = $("#global-qte input:last").clone();
                //Incremente le name
                var name = $(d).attr('name');
                value = name.split('-');
                name = value[0]+'-'+(parseInt(value[1])+1);
                $(d).attr('name', name);
                //Incremente l'id
                var id = $(d).attr('id');
                value = id.split('-');
                id = value[0]+'-'+(parseInt(value[1])+1);
                $(d).attr('id', id);
                //Insert
                $("#global-qte").append(d);
     
                //Enchainement des selecteur 
                var idA = $(a).attr('id');
                var idC = $(c).attr('id');
                $('#' + idC).chained('#' + idA); 
     
            });
        });
     
    </script>
     
     
    </body>
    </html>
    Si quelqu'un à une solution pour me débloquer ca serait vraiment super et je le remercie par avance.

  2. #2
    Modérateur

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

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 207
    Par défaut
    Bonjour,
    ton soucis semble venir du clonage de tes éléments.

    Je te propose une autre vision de ton code

    • Clonage au début d'éléments "vierge"
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    // création des clones
    var $type_aliment = $('#type_aliment-1').clone();
    var $name_aliment = $('#name_aliment-1').clone();
    var $qte_aliment  = $('#qte-1').clone();
    • Mise en place du chainage pour qu'il soit tout de suite opérationnel
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    // chainage des SELECT
    $('#name_aliment-1').chained('#type_aliment-1');
    • Sur le click de ton bouton,
    - création des nouveaux éléments mais en clonant les clones
    - récupérations du nombre déjà présent pour incrémentation des ID et NAME
    - affectation de ID et NAME
    - ajout des éléments aux conteneurs
    - chainage des SELECTs
    ...c'est très peu différent de ce que tu as fait mais avec une autre vision
    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
    // récup. nombre éléments
    var nbr = $('[id ^="type_aliment"]').length;
    // incrémente le compteur
    nbr++;
    // affectation des IDs et NAMEs
    $type.prop({
        'id': 'type_aliment-' + nbr,
        'name': 'type_aliment-' + nbr
    });
    $name.prop({
        'id': 'name_aliment-' + nbr,
        'name': 'name_aliment-' + nbr
    });
    $qte.prop({
        'id': 'qte-' + nbr,
        'name': 'qte-' + nbr
    });
    // ajout des éléments
    $('#global-type-aliment').append($type);
    $('#global-name-aliment').append($name);
    $('#global-qte').append($qte);
    // chainage des SELECT
    $($name).chained($type);
    • Au final ta fonction ressemble à cela
    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
    $(document).ready(function() {
        // création des clones
        var $type_aliment = $('#type_aliment-1').clone();
        var $name_aliment = $('#name_aliment-1').clone();
        var $qte_aliment = $('#qte-1').clone();
        // chainage des SELECT
        $('#name_aliment-1').chained('#type_aliment-1');
        // action sur clic du bouton
        $('#add_aliment').on('click', function() {
            // clonage des clones
            var $type = $type_aliment.clone();
            var $name = $name_aliment.clone();
            var $qte = $qte_aliment.clone();
            // récup. nombre éléments
            var nbr = $('[id ^="type_aliment"]').length;
            // incrémente le compteur
            nbr++;
            // affectation des IDs et NAMEs
            $type.prop({
                'id': 'type_aliment-' + nbr,
                'name': 'type_aliment-' + nbr
            });
            $name.prop({
                'id': 'name_aliment-' + nbr,
                'name': 'name_aliment-' + nbr
            });
            $qte.prop({
                'id': 'qte-' + nbr,
                'name': 'qte-' + nbr
            });
            // ajout des éléments
            $('#global-type-aliment').append($type);
            $('#global-name-aliment').append($name);
            $('#global-qte').append($qte);
            // chainage des SELECT
            $($name).chained($type);
        });
    });
    • Tu pourrais même prévoir :
    - l'activation disabled/enabled de ton champ quantité
    - la suppression des IDs qui ne te servent en fait à rien
    - mettre les NAMEs sous forme type_aliment[], name_aliment[] et quantite_aliment[] ce qui te permettrais coté serveur de récupérer des tableaux de données et d'alléger ton code

  3. #3
    Candidat au Club
    Homme Profil pro
    Développeur Full-Stack
    Inscrit en
    Janvier 2016
    Messages
    2
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : France, Var (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Développeur Full-Stack

    Informations forums :
    Inscription : Janvier 2016
    Messages : 2
    Par défaut
    Ça fonctionne parfaitement, merci merci infiniment NoSmoking <3

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

Discussions similaires

  1. Erreur de chaine de charactères - SQL dynamique
    Par psyrio dans le forum PL/SQL
    Réponses: 2
    Dernier message: 09/12/2008, 13h30
  2. Réponses: 16
    Dernier message: 27/05/2006, 08h40
  3. [vb.net] probleme de construction de chaine dynamiquement
    Par graphicsxp dans le forum Windows Forms
    Réponses: 4
    Dernier message: 17/01/2006, 14h52
  4. Réponses: 24
    Dernier message: 30/10/2005, 09h27
  5. Découpage dynamique d'une chaine de caractère
    Par zut94 dans le forum MS SQL Server
    Réponses: 1
    Dernier message: 28/10/2005, 18h49

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