Problème de chargement dans une boîte modale

**Franck.H** · 22/04/2014, 16h19

Je ne sais pas si c'est lié à ASP.Net ou jQuery ou encore VB.Net donc je poste ici, voici mon problème..

J'affiche grâce à jQuery une boîte modale qui contient une DropDownList et un DataGrid dont voici le 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
    <div id="dialog-acquittement">
        <asp:UpdatePanel ID="UpdatePanelAcquittements" runat="server">
            <ContentTemplate>
                <asp:ObjectDataSource ID="odsAcquittements" runat="server" OldValuesParameterFormatString="original_{0}"
                    SelectMethod="GetData" TypeName="SANDRE.DAL.dsDemandeTableAdapters.LISTE_ACQUITTEMENTTableAdapter">
                    <SelectParameters>
                        <asp:ControlParameter ControlID="ddlAnneesAcquittement" Name="P_ANNEE" PropertyName="SelectedValue"
                            Type="String" />
                        <asp:Parameter Direction="InputOutput" Name="P_CUR" Type="Object" />
                    </SelectParameters>
                </asp:ObjectDataSource>
                <asp:ObjectDataSource ID="odsAnneesAcquittement" runat="server" OldValuesParameterFormatString="original_{0}"
                    SelectMethod="GetData" TypeName="SANDRE.DAL.dsDemandeTableAdapters.LISTE_ANNEES_ACQUITTEMENTTableAdapter">
                    <SelectParameters>
                        <asp:Parameter Direction="InputOutput" Name="P_CUR" Type="Object" />
                    </SelectParameters>
                </asp:ObjectDataSource>
                <br />
                <asp:DropDownList ID="ddlAnneesAcquittement" runat="server" DataSourceID="odsAnneesAcquittement"
                    DataTextField="ANNEE" DataValueField="ANNEE" AutoPostBack="True">
                </asp:DropDownList>
                <br />
                <br />
                <asp:Panel ID="PanelAcquittements" runat="server">
                    <asp:DataGrid ID="dgAcquittements" runat="server" DataSourceID="odsAcquittements"
                        AutoGenerateColumns="False" BackColor="LightGoldenrodYellow" BorderColor="Tan"
                        BorderWidth="1px" CellPadding="2" ForeColor="Black" GridLines="None">
                        <AlternatingItemStyle BackColor="PaleGoldenrod" />
                        <Columns>
                            <asp:TemplateColumn HeaderText="Date demande">
                                <ItemTemplate>
                                    <asp:Label ID="lblDateDemande" runat="server" Text='<%# Eval("DD") %>'></asp:Label>
                                </ItemTemplate>
                            </asp:TemplateColumn>
                            <asp:TemplateColumn HeaderText="Numéro demande">
                                <ItemTemplate>
                                    <asp:Label ID="lblNumeroDemande" runat="server" Text='<%# Eval("IDC") %>'></asp:Label>
                                </ItemTemplate>
                            </asp:TemplateColumn>
                            <asp:TemplateColumn HeaderText="Acquitté">
                                <ItemTemplate>
                                    <asp:Label ID="lblAcquitte" runat="server" Text='<%# Eval("ACQUITTE") %>'></asp:Label>
                                </ItemTemplate>
                            </asp:TemplateColumn>
                            <asp:TemplateColumn HeaderText="Date">
                                <ItemTemplate>
                                    <asp:Label ID="lblDateAcquitte" runat="server" Text='<%# Eval("DTE") %>'></asp:Label>
                                </ItemTemplate>
                            </asp:TemplateColumn>
                        </Columns>
                        <FooterStyle BackColor="Tan" />
                        <HeaderStyle BackColor="Tan" Font-Bold="True" />
                        <PagerStyle BackColor="PaleGoldenrod" ForeColor="DarkSlateBlue" HorizontalAlign="Center" />
                        <SelectedItemStyle BackColor="DarkSlateBlue" ForeColor="GhostWhite" />
                    </asp:DataGrid>
                </asp:Panel>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>

Et le code jQuery attaché:

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
    <script type="text/javascript" charset="utf-8">
        $(document).ready(function () {
            $("#dialog-acquittement").dialog({
                autoOpen: false,
                resizable: false,
                height: 500,
                width: 465,
                modal: true,
                title: "Liste des acquittements",
                buttons: {
                    Ok: function () {
                        $(this).dialog("close");
                    }
                }
            });
 
            $("#ctl00_contenu_lkAcquittement").click(function (event) {
                event.preventDefault();
                $("#dialog-acquittement").dialog("open");
            });
        });
    </script>

Mon problème est simple d'apparence mais je ne sais pas encore comment le régler.. Lorsque je change d'année dans la liste déroulante, rien ne se produit et l'année reviens sur celle qui était sélectionnée au départ. La DropDownList est sur AutoPostback. Quelqu'un aurait-il une piste pour que je puisse mettre à jour les données et afficher la liste des données correctement ?

**Franck.H** · 22/04/2014, 16h33

J'ai essayé de mettre un Trigger:

Code :

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

1
2
3
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="ddlAnneesAcquittement" EventName="SelectedIndexChanged" />
            </Triggers>

Mais cela ne change rien Serait-ce du au fait que le tout se trouve dans une boîte modale jQuery ?!

**Immobilis** · 22/04/2014, 21h29

Salut,

Lorsque je change d'année dans la liste déroulante, rien ne se produit et l'année reviens sur celle qui était sélectionnée au départ

C'est donc qu'il se passe quelque chose. Tu dois avoir fait un aller retour serveur sans t'en apercevoir.

Si la liste déroulante se replace sur sa valeur de départ c'est que tu dois la "re-binder".

A+

**Franck.H** · 23/04/2014, 08h15

En fait il se passe des choses effectivement mais pas celles que je souhaiterais. Le programme ré-entre à nouveau dans le Page_Init et Page_LoadComplete où je ne fait strictement aucune action sur la liste déroulante mais par contre, le programme ne passe pas par l'évènement ddlAnneesAcquittement_SelectedIndexChanged

**Franck.H** · 23/04/2014, 15h58

Après des tests j'ai déterminé que ça viens du fait que le tout soit transformer dans une boîte modale jQuery. Mon dernier code ASP.Net :

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
    <div id="dialog-acquittement">
        <asp:ObjectDataSource ID="odsAcquittements" runat="server" OldValuesParameterFormatString="original_{0}"
            SelectMethod="GetData" TypeName="SANDRE.DAL.dsDemandeTableAdapters.LISTE_ACQUITTEMENTTableAdapter">
            <SelectParameters>
                <asp:ControlParameter ControlID="ddlAnneesAcquittement" Name="P_ANNEE" PropertyName="SelectedValue"
                    Type="String" />
                <asp:Parameter Direction="InputOutput" Name="P_CUR" Type="Object" />
            </SelectParameters>
        </asp:ObjectDataSource>
        <asp:ObjectDataSource ID="odsAnneesAcquittement" runat="server" OldValuesParameterFormatString="original_{0}"
            SelectMethod="GetData" TypeName="SANDRE.DAL.dsDemandeTableAdapters.LISTE_ANNEES_ACQUITTEMENTTableAdapter">
            <SelectParameters>
                <asp:Parameter Direction="InputOutput" Name="P_CUR" Type="Object" />
            </SelectParameters>
        </asp:ObjectDataSource>
        <asp:UpdatePanel ID="UpdatePanelAcquittements" runat="server" UpdateMode="Conditional">
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="ddlAnneesAcquittement" EventName="SelectedIndexChanged" />
                <asp:PostBackTrigger ControlID="dgAcquittements" />
            </Triggers>
            <ContentTemplate>
                <asp:DropDownList ID="ddlAnneesAcquittement" runat="server" DataSourceID="odsAnneesAcquittement"
                    DataTextField="ANNEE" DataValueField="ANNEE" AutoPostBack="True">
                </asp:DropDownList>
                <br />
                <br />
                <asp:DataGrid ID="dgAcquittements" runat="server" DataSourceID="odsAcquittements"
                    AutoGenerateColumns="False" BackColor="LightGoldenrodYellow" BorderColor="Tan"
                    BorderWidth="1px" CellPadding="2" ForeColor="Black" GridLines="None">
                    <AlternatingItemStyle BackColor="PaleGoldenrod" />
                    <Columns>
                        <asp:TemplateColumn HeaderText="Date demande">
                            <ItemTemplate>
                                <asp:Label ID="lblDateDemande" runat="server" Text='<%# Eval("DD") %>'></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateColumn>
                        <asp:TemplateColumn HeaderText="Numéro demande">
                            <ItemTemplate>
                                <asp:Label ID="lblNumeroDemande" runat="server" Text='<%# Eval("IDC") %>'></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateColumn>
                        <asp:TemplateColumn HeaderText="Acquitté">
                            <ItemTemplate>
                                <asp:Label ID="lblAcquitte" runat="server" Text='<%# Eval("ACQUITTE") %>'></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateColumn>
                        <asp:TemplateColumn HeaderText="Date">
                            <ItemTemplate>
                                <asp:Label ID="lblDateAcquitte" runat="server" Text='<%# Eval("DTE") %>'></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateColumn>
                    </Columns>
                    <FooterStyle BackColor="Tan" />
                    <HeaderStyle BackColor="Tan" Font-Bold="True" />
                    <PagerStyle BackColor="PaleGoldenrod" ForeColor="DarkSlateBlue" HorizontalAlign="Center" />
                    <SelectedItemStyle BackColor="DarkSlateBlue" ForeColor="GhostWhite" />
                </asp:DataGrid>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>

Lorsque je ne le transforme pas en dialog ça fonctionne mais sinon le DataGrid ne se met pas à jour

**Immobilis** · 23/04/2014, 19h20

Pas évident de faire cohabiter jQuery et les Webform.

As-tu essayé la popup modale de l'AjaxControlToolkit: http://www.asp.net/AjaxLibrary/AjaxC...odalPopup.aspx?

A+

**Franck.H** · 24/04/2014, 08h23

Envoyé par Immobilis

Pas évident de faire cohabiter jQuery et les Webform.

Alors c'est déjà un widget qui ne sert presque à rien ! Pour moi si on peut afficher une boîte modale on doit pouvoir tout faire avec sinon aucun intérêt !

Envoyé par Immobilis

As-tu essayé la popup modale de l'AjaxControlToolkit: http://www.asp.net/AjaxLibrary/AjaxC...odalPopup.aspx?

Non mais je ne le souhaite pas, j'ai une certaine unicité dans mon application (ou du moins j'essaye d'en avoir une au mieux) niveau design et autre alors je ne veux pas me retrouver avec des modales de toutes les formes, styles et couleurs.

Problème de chargement dans une boîte modale

ASP.NET

Discussions similaires

Partager

Partager