Cacher un élément créé à la volée

**Pelote2012** · 15/03/2013, 14h35

Pour faire suite à mon précédent post, que j'ai marqué résolu car le problème n'est pas le même.

Sur ma page, j'ai une liste de grossiste.
Quand je sélectionne un élément de ma liste, j'ai une fonction "change" qui me construit un tableau. Tout cse déroule bien sauf que dans le tableau, en pied, j'ai mis un label pour indiquer si lors de l'ajout j'ai bien rempli tous les champs. Mais je souhaiterai le rendre hide() à la suite d'un changement de sélection de ma liste, mais cela ne se fait pas.

Code javascript :

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
 
 <script type="text/javascript">
 
        function FileStateChanged(uploader, file, httpStatus, isLast) {
 
            var t = Flajaxian.$("MyDiv");
            switch (file.state) {
                case 5:
                    t.innerHTML += "name:" + file.name + " state:Erreur </br>";
                    break;
            }
            Flajaxian.fileStateChanged(uploader, file, httpStatus, isLast);
            if (file.state > Flajaxian.File_Uploading && isLast) {
                /*Afficher le fichier TLD*/
                document.getElementById('LogoName').value = file.name;
            }
        }
 
        $(function () {
                     $.ajax({
                type: "POST",
                url: "Edit_couleur.aspx/GetGrossistes",
                data: '{"PageEnCours":"' + document.location.href.toString() + '"}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {
                    $('#lstGrossistes').append($('<option>', { value: "-1", text: "Sélectionnez un grossiste" }));
                    if (msg.d != null) {
                        $.each(msg.d, function (i, item) {
                            $('#lstGrossistes').append($('<option>', { value: item.IdGros, text: item.Libelle }));
                        });
                    }
                },
                error: function () {
                    alert('oups');
                }
            });
 
            $('#lstGrossistes').change(function () {
                var Gros = $(this).val();
                if (Gros == "-1") {
                    $('#divcouleur').html("");
                }
                else {
                    $.ajax({
                        type: "POST",
                        url: "Edit_couleur.aspx/GetCouleur",
                        data: '{"IdGros":' + Gros + ',"PageEnCours":"' + document.location.href.toString() + '"}',
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (msg) {
                            BuildTable(msg);
                        }
                    });
                    $('.error').hide();
                }
            });
 
        });
function BuildTable(msg) {
            var table = '<table><thead><tr class="Entete"><th>Libellé</th><th>Code</th><th colspan="2"></th></thead><tbody>';
 
            for (var post in msg.d) {
                var row = '<tr id=' + msg[post].IdCouleur + '>';
 
                row += '<td>' + msg[post].Libelle + '</td>';
                row += '<td>' + msg[post].IdCouleurGros + '</td>';
                row += '<td>' + '</td>';
                row += '<td><img src="/Images/suppr.png" alt="Supprimer" id="Delete"></td>';
 
                row += '</tr>';
 
                table += row;
            }
 
            //Pied pour ajout
             table += '<tr class="Entete2"><td><input type="text" id="txtCouleur" /><br /><label class="error" for="txtCouleur" id="Lib_error">Champs Libellé obligatoire.</label></td>'
             table += '<td><input type="text" id="txtCode" /><br /></td>'
             table += '<td><br /><input type="hidden" id="LogoName" /><div id="MyDiv"></div>'
 
             table += '<br /><label class="error" id="Img_error">Champs Image obligatoire.</label></td>'
             table += '<td><img src="/Images/add.png" alt="Ajouter" id="Add" /></td></tr>'
 
            table += '</tbody></table>';
 
            $('#divcouleur').html(table);
        };

Plus particulièrement cette ligne:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 table += '<br /><label class="error" id="Img_error">Champs Image obligatoire.</label></td>'

Elle est bien créée
Mais sur mon change de ma liste de grossistes je lui dit de les cacher

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

                     $('.error').hide();

Mais au final ... il apparaissent à l'écran
quand je fait afficher le code source

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 <div id="divcouleur">
    </div>

c'est vide alors qu'à l'écran j'ai bien mon tableau ...

Si quelqu'un pourrait m'expliquer pourquoi, et comment faire ... Merci

**Pelote2012** · 15/03/2013, 14h57

Je viens d'ajouter

Code javascript :

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
 $(document).on("click", "#Add", function () {
 
                $('.error').hide();
 
                var CtrlLib = $('#txtCouleur');
                var Lib = CtrlLib.val();
                if (Lib == "") {
                    $("#Lib_error").show();
                    CtrlLib.focus();
                    return false;
                }
 
                var CtrlImgName = $('#LogoName');
                var ImgName = CtrlImgName.val();
                if (ImgName == "") {
                    $("#Img_error").show();
                    return false;
                }
 
                var myData = {};
                myData.IdGros = Gros;
                myData.Code = $('#txtCode').val();
                myData.Libelle = Lib;
                myData.ImgName = ImgName;
                myData.PageEnCours = document.location.href;
 
                AddCouleur(myData);
 
                return false;
            });

ça marche nickel, même mes labels sont cachés et montrés

J'en perd mon latin (ou plutot mon ajaxus)

**SpaceFrog** · 15/03/2013, 15h12

fais une recherche avec on() et delegate() ...

**Pelote2012** · 15/03/2013, 15h35

Quel crétin ...
je viens de me rendre compte que je ne l'avait pas mis au bon endroit

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
 $('#lstGrossistes').change(function () {
                var Gros = $(this).val();
                if (Gros == "-1") {
                    $('#divcouleur').html("");
                }
                else {
                    $.ajax({
                        type: "POST",
                        url: "Edit_couleur.aspx/GetCouleur",
                        data: '{"IdGros":' + Gros + ',"PageEnCours":"' + document.location.href.toString() + '"}',
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (msg) {
                            BuildTable(msg);
                            $('.error').hide();
                        }
                    });
                }
            });

ça marche mieux mes label sont bien caché sur le change de ma liste

Merci pour le delegate, cette partie je l'avais comprise d'attacher l'evt au parent car le boutton add n'existe pas au load de la page

Cacher un élément créé à la volée

jQuery

Vue hybride

Discussions similaires

Partager

Partager