Ajouter un élément dans le tableau en fonction d'un choix

Version imprimable

18/07/2014, 17h27
Flechenoir

Ajouter un élément dans le tableau en fonction d'un choix

Bonsoir,

J'ai un problème, j'ai un script jquery qui doit m'ajouter une ligne dans le tableau en fonction du premier choix.

http://jsfiddle.net/ANJ7n/

Lorsque que je sélectionne "POST-tester" au lieu de "Login Module" (c'est le premier select), hé bien rien ne se passe, alors que normalement il devait remove();

Le truc qui est bizarre c'est que si je mets "POST-tester" directement au loading, il va remove la ligne en dessus. (Donc cela prouve que mon code fonctionne)

Le truc qui ne marche pas c'est que le fait que lorsque je change d'option, là, il fait rien, alors que normalement il doit remove().

Merci de votre aide !

Cordialement,

Bonvin Maxime.

Bonsoir

Trop de choses à dire sur la conception de votre code, je vous suggère de tester et de comparer.

Code:

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
$( function(){ // forme abrégée de $(document).ready(function(){
 
    var jObjProduct = $( "#product" ),
        jObjProductParentTr = jObjProduct.parents( "tr" ),
        productHandler = function(){
            if ( jObjProduct.val() === "LM" ){
                jObjProductParentTr
                    .after( '<tr>' +
                                '<td>Where</td>' +
                                '<td>' +
                                    '<select name="where">' +
                                        '<option value="php">on PHP file</option>' +
                                        '<option value="mfa">on MFA file</option>' +
                                        '<option value="db">on database</option>' +
                                        '<option value="dontknow">I don\'t know</option>' +
                                    '</select>' +
                                '</td>' +
                            '</tr>' );
            }
 
            if ( jObjProduct.val() === "PT" ){
                jObjProductParentTr
                    .next()
                    .remove();
            }
        };
 
    productHandler(); // action au démarrage
 
    jObjProduct.on( "change", productHandler ); // action lors des changements
 
});

19/07/2014, 17h34
Flechenoir

Bonsoir,

Un ptit' jour de retard, mais merci beaucoup pour cette aide précieuse.

Sinon, étant débutant en Jquery, j'aimerai comprendre ce code, que je n'arrive pas bien a comprendre.

Premièrement, ligne 4:

Code:

jObjProductParentTr = jObjProduct.parents( "tr" )

ne pourrais t-on pas tout simplement faire cela ?

Code:

jObjProductParentTr = $( "#product" ).parents( "tr" )

Serais-ce faux ?

Deuxièmement, malgré les explication souvent très compréhensible du site api.jquery.com, je n'ai pas compris cette fonction .on .

Troisièmement, juste par curiosité, jObj = à quoi ? JqueryObjet ?

Merci encore pour ces aides précieuse !

Bonvin Maxime.

Bonsoir

Ce sont des règles personnelles :

ObjQuoi : un objet JS
jObjQuoi = un objet jQuery

Citation:

ne pourrais t-on pas tout simplement faire cela ?

Oui, l'écriture est correcte, mais lorsqu'on utilise le même sélecteur plus d'une fois il faut le stocker, c'est beaucoup plus performant.

on() :fleche: http://danielhagnoul.developpez.com/...t/onEvent.html

Version améliorée de mon code :

Code:

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
$( function(){ // forme abrégée de $(document).ready(function(){
 
    var jObjProduct = $( "#product" ),
        jObjProductParentTr = jObjProduct.parents( "tr" ),
        jObjWhere = $( '<tr/>', {
            "html" : '<td>Where</td>' +
                     '<td>' +
                        '<select name="where">' +
                            '<option value="php">on PHP file</option>' +
                            '<option value="mfa">on MFA file</option>' +
                            '<option value="db">on database</option>' +
                            '<option value="dontknow">I don\'t know</option>' +
                        '</select>' +
                      '</td>'
        }),
        productHandler = function(){
            if ( jObjProduct.val() === "LM" ){
                jObjProductParentTr
                    .after( jObjWhere );
            }
 
            if ( jObjProduct.val() === "PT" ){
 
                // http://api.jquery.com/detach/
 
                jObjWhere.detach();
            }
        };
 
    productHandler(); // au démarrage
 
    jObjProduct.on( "change", productHandler ); // pour les changements
 
});

20/07/2014, 00h44
Flechenoir

Merci beaucoup de votre aide ! Ça m'a été d'un grande utilité !