Discussion :

[djelloharmel]

Bonjour à tous.
Par du code jQuery, selon les valeurs du champ w_modele, je désire afficher ou masquer les balise <tr> tr_prov et tr_dest.

Voici le

Code html :

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
<table style="width: 100%;">
        <tr>
            <td class="auto-style1">Type de document <span class="Ast">*</span></td>
            <td style="vertical-align: top">
                <table style="width: 100%;">
                    <tr>
                        <td style="width: 50%">
                            <asp:DropDownList ID="w_modele" runat="server" CssClass="form-control" Width="100%" Height="35px"></asp:DropDownList>
                        </td>
                        <td runat="server" id="td_autre_modele" visible="false">
                            <asp:TextBox ID="modele_autre" runat="server" CssClass="form-control" Width="100%" Height="35px"></asp:TextBox>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr runat="server" id="tr_prov">
            <td class="auto-style1">Provenance (Du) <span class="Ast">*</span></td>
            <td style="vertical-align: top">
                <table style="width: 100%;">
                    <tr style="vertical-align: top">
                        <td class="auto-style2" runat="server" id="td_dest">
                            <asp:DropDownList ID="rech_txt_du" runat="server" CssClass="form-control" Height="35px" Width="100%" AutoPostBack="true"></asp:DropDownList>
                        </td>
                        <td>
                            <asp:TextBox ID="txt_du" runat="server" CssClass="form-control" Width="100%" Height="50px" MaxLength="100" Enabled="false" TextMode="MultiLine"></asp:TextBox>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr runat="server" id="tr_dest">
            <td class="auto-style1">Destinataire (Au) <span class="Ast">*</span></td>
            <td style="vertical-align: top">
                <table style="width: 100%;">
                    <tr>
                        <td class="auto-style2" id="td_destinataire" runat="server">
                            <asp:DropDownList ID="rech_txt_au" runat="server" CssClass="form-control" Width="100%" Height="35px" AutoPostBack="true"></asp:DropDownList>
                        </td>
                        <td style="vertical-align: top">
                            <asp:TextBox ID="txt_au" runat="server" CssClass="form-control" Width="100%" Height="50px" MaxLength="100" Enabled="false" TextMode="MultiLine"></asp:TextBox>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td class="auto-style1">Objet <span class="Ast">*</span></td>
            <td style="vertical-align: top">
                <asp:TextBox ID="txt_objet" runat="server" CssClass="form-control" Width="100%" Height="35px" MaxLength="100"></asp:TextBox>
            </td>
        </tr>
        <tr runat="server" id="tr_confidentiel">
            <td class="auto-style1">Confidentiel <span class="Ast">*</span></td>
            <td style="vertical-align: top">
                <asp:DropDownList ID="confidentiel" runat="server" CssClass="form-control" Width="100%" Height="35px">
                    <asp:ListItem></asp:ListItem>
                    <asp:ListItem>Non</asp:ListItem>
                    <asp:ListItem>Oui</asp:ListItem>
                </asp:DropDownList>
            </td>
        </tr>
        <tr runat="server" id="tr_doc">
            <td class="auto-style1">Sélectionner document <span class="Ast">*</span></td>
            <td style="vertical-align: top">
                <asp:FileUpload ID="fu_doc" runat="server" Width="100%" Height="35px" CssClass="form-control" accept=".docx" />
            </td>
        </tr>
</table>

et le code javascript

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
<script src="./assets/jquery-3.6.0.min.js"></script>
 
    <script type="text/javascript">
        $("[id*=w_modele]").change(function () {
            $("[id*=tr_dest]").hide();
            $("[id*=tr_prov]").hide();
 
            if ($("[id*=w_modele]").val() === '') {
                return;
            }                        
 
            $("[id*=tr_dest]").show();
            $("[id*=tr_prov]").show();
 
            switch ($("[id*=w_modele]").val()){
                case "Note d'intérim":
                    $("[id*=tr_prov]").hide();
                    $("[id*=tr_dest]").hide();
                    break;
                case "Courrier externe":
                    break;
                case "Note d'information": 
                    break;
                case "Note de service":
                    break;
            }  
        })

Le problème, c'est que je n'ai aucune réaction quand je change la valeur du champ w_modele. Or le même code sur les balise <div>,<p> et autres marchent parfaitement.
Quel peut être le souci?

[Toufik83]

Bonjour,

La documentation montre que la chaîne de caractères des ID doit être entourée des apostrophes ou des guillemets "[id*='w_modele']" mais ce n'est pas ça qui empêche le fonctionnement , c'est seulement une correction, sinon tu peux utiliser directement le ID précédé par un diez # $("#w_modele") pour cibler les éléments.

La même chose pour les autres ID...

Je vois aussi que le code JS n'est pas dans un contexte de $(document).ready()... , donc soit vous l'utilisez soit vous déplacez le script jQuery en bas de page ou au moins après les éléments HTML utilisés par le script.

[SpaceFrog]

Une petite recherche ... et hop https://www.developpez.net/forums/d1...eurs-colonnes/