ASP et jQuery

:salut:

J'ai une page ASP dans laquelle j'aimerais afficher une boîte de message modal le temps d'un traitement. Je me base sur la page suivante: https://jqueryui.com/dialog/#animated
Le problème est lorsque je clique sur mon bouton rien ne s'affiche, voici le code de ma page:

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
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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Export.aspx.vb" Inherits="Export"
    MasterPageFile="~/MasterPage.master" StylesheetTheme="" %>
 
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    <script type="text/javascript" charset="utf-8">
        $("#accordion").accordion();
 
        $(function () {
            $("#dialog").dialog({
                autoOpen: false,
                resizable: false,
                height: 200,
                width: 350,
                modal: true,
                show: {
                    effect: "blind",
                    duration: 150
                },
                buttons: {
                    "Fermer": function () {
                        $(this).dialog("close");
                    }
                }
            });
 
            $("#btnExcel").click(function () {
                $("#dialog").dialog("open");
            });
        });
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="contenu" runat="Server">
    <div id="dialog" title="Exportation">
        <p>
            <span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>
            L'exportation au format Excel est en cours, veuillez patienter..</p>
    </div>
    <script type="text/javascript">
        function choixStep(choix) {
            nb = Number(document.getElementById("ctl00_contenu_hNbStep").value);
            for (i = 0; i < nb; i++) {
                document.getElementById('ctl00_contenu_lstchbxlSTEP_' + i).checked = choix;
            }
        }
        function choixMois(choix) {
            nb = 12;
            for (i = 0; i < nb; i++) {
                document.getElementById('ctl00_contenu_lstchbxMois_' + i).checked = choix;
            }
        }
        function choixDestinataires(choix) {
            nb = Number(document.getElementById("ctl00_contenu_hNbDest").value);
            for (i = 0; i < nb; i++) {
                document.getElementById('ctl00_contenu_lstchbxlDestinataires_' + i).checked = choix;
            }
        }
    </script>
    <p class="titre_page_export">
        &nbsp;</p>
    <p class="titre_page_export">
        <asp:Label ID="titre_page_export" runat="server">Exportation des analyses au format Sandre</asp:Label>
    </p>
    <asp:HiddenField ID="hNbStep" runat="server" />
    <asp:HiddenField ID="hNbDest" runat="server" />
    <fieldset class="fieldset_filtre">
        <legend>Filtre</legend><span>Secteur :
            <asp:DropDownList ID="LstSctr" runat="server" AutoPostBack="True" DataSourceID="odsSCTR"
                DataTextField="SECTEUR">
            </asp:DropDownList>
            &nbsp; Année :
            <asp:DropDownList ID="lstAn" runat="server" DataSourceID="odsAnnees" DataTextField="ANNEE"
                DataValueField="ANNEE">
            </asp:DropDownList>
        </span>
    </fieldset>
    <br />
    <br />
    <table align="center" class=".td_aerm">
        <tr>
            <td class="td_aerm_entete">
                <div class="st_aerm">
                    Stations</div>
            </td>
            <td class="td_aerm_entete">
                <div class="st_aerm">
                    Période</div>
            </td>
            <td class="td_aerm_entete">
                <div class="st_aerm">
                    Destinataires</div>
            </td>
        </tr>
        <tr>
            <td class="td_aerm_coche">
                <div class="st_aerm">
                    <img alt="Cocher tout" onclick="choixStep(true);" src="IMAGES/cocher.png" /><img
                        alt="Décocher tout" onclick="choixStep(false);" src="IMAGES/decocher.png" /></div>
            </td>
            <td class="td_aerm_coche">
                <div class="st_aerm">
                    <img alt="Cocher tout" onclick="choixMois(true);" src="IMAGES/cocher.png" /><img
                        alt="Décocher tout" onclick="choixMois(false);" src="IMAGES/decocher.png" /></div>
            </td>
            <td class="td_aerm_coche">
                <div class="st_aerm">
                    <img alt="Cocher tout" onclick="choixDestinataires(true);" src="IMAGES/cocher.png" /><img
                        alt="Décocher tout" onclick="choixDestinataires(false);" src="IMAGES/decocher.png" /></div>
            </td>
        </tr>
        <tr>
            <td class="td_aerm" rowspan="1">
                <asp:Panel ID="Panel1" runat="server" Height="285px" ScrollBars="Vertical">
                    <asp:CheckBoxList ID="lstchbxlSTEP" runat="server" DataSourceID="odsSTEP" DataTextField="NOMSTEP"
                        DataValueField="STEP">
                    </asp:CheckBoxList>
                </asp:Panel>
            </td>
            <td class="td_aerm">
                <asp:CheckBoxList ID="lstchbxMois" runat="server">
                    <asp:ListItem Value="01">Janvier</asp:ListItem>
                    <asp:ListItem Value="02">Février</asp:ListItem>
                    <asp:ListItem Value="03">Mars</asp:ListItem>
                    <asp:ListItem Value="04">Avril</asp:ListItem>
                    <asp:ListItem Value="05">Mai</asp:ListItem>
                    <asp:ListItem Value="06">Juin</asp:ListItem>
                    <asp:ListItem Value="07">Juillet</asp:ListItem>
                    <asp:ListItem Value="08">Août</asp:ListItem>
                    <asp:ListItem Value="09">Septembre</asp:ListItem>
                    <asp:ListItem Value="10">Octobre</asp:ListItem>
                    <asp:ListItem Value="11">Novembre</asp:ListItem>
                    <asp:ListItem Value="12">Décembre</asp:ListItem>
                </asp:CheckBoxList>
            </td>
            <td class="td_aerm">
                <asp:CheckBoxList ID="lstchbxlDestinataires" runat="server" DataSourceID="xdsDestinataires"
                    DataTextField="nom" DataValueField="valeur">
                </asp:CheckBoxList>
            </td>
        </tr>
        <tr>
            <td class="td_aerm_coche" colspan="3">
                <div class="st_aerm">
                    Messages</div>
            </td>
        </tr>
        <tr>
            <td colspan="3">
                <div id="dvMSG" runat="server">
                    <asp:TextBox ID="txtMsg" runat="server" BorderStyle="Dotted" BorderWidth="3px" Font-Bold="True"
                        ForeColor="Red" Height="110px" TextMode="MultiLine" Width="98%" ReadOnly="True"></asp:TextBox>
                </div>
            </td>
        </tr>
        <tr>
            <td colspan="3">
                <div class="div_valid">
                    <asp:Button ID="btnValider" runat="server" Text="Envoyer" CssClass="btn_valid" />
                    &nbsp;
                    <asp:Button ID="btnExcel" runat="server" Text="Exporter en Excel" CssClass="btn_valid" />
                </div>
            </td>
        </tr>
    </table>
    <asp:ObjectDataSource ID="odsSTEP" runat="server" OldValuesParameterFormatString="original_{0}"
        SelectMethod="GetDataByProcListeStepPkg" TypeName="SANDRE.DAL.dsBouesTableAdapters.SPTableAdapter">
        <SelectParameters>
            <asp:ControlParameter ControlID="LstSctr" Name="P_SCTR" PropertyName="SelectedValue"
                Type="String" DefaultValue="TOUS" />
            <asp:Parameter DefaultValue="1" Name="P_MODE" Type="Decimal" />
            <asp:Parameter Direction="InputOutput" Name="P_CUR" Type="Object" />
        </SelectParameters>
    </asp:ObjectDataSource>
    <asp:ObjectDataSource ID="odsSCTR" runat="server" OldValuesParameterFormatString="original_{0}"
        SelectMethod="GetDataByEtatValidation" TypeName="SANDRE.DAL.dsBouesTableAdapters.SecteursTableAdapter">
    </asp:ObjectDataSource>
    <asp:ObjectDataSource ID="odsAnnees" runat="server" OldValuesParameterFormatString="original_{0}"
        SelectMethod="GetData" TypeName="SANDRE.DAL.dsBouesTableAdapters.V_ANNEESTableAdapter">
    </asp:ObjectDataSource>
    <asp:XmlDataSource ID="xdsDestinataires" runat="server" DataFile="~/XML/Destinataires.xml"
        XPath="//adresse[@type=&quot;externe&quot;]"></asp:XmlDataSource>
</asp:Content>

Si quelqu'un a une piste !

:merci:

PS: Je connecte jQuery à partir de la MasterPage.

J'essayerais de lancer mon traitement via de l'ajax et je gérerais ma pop-up avec les événements ajaxStart/ajaxComplete
Code:

1 2 3 4 5 6 7 8 9 10 11 $(document).ajaxStart(function() { $( "#dialog-modal" ).dialog({ height: 140, modal: true }); }); $(document).ajaxComplete(function() { $( "#dialog-modal" ).dialog("close"); });
https://api.jquery.com/ajaxStart/
https://api.jquery.com/ajaxComplete/

Salut,

Je te propose d'utiliser Firefox et d'installer le plugin FireBug, en te mettant sur le mode "console" et au clic du bouton tu verras l'action qui se passe, si jamais il y a une erreur ça te le dira !

julien

Quand tu manipules tes éléments ASP.NET en JavaScript/JQuery, est-ce que tu utilises la méthode .ClientID ? Car tu peux avoir une différence entre ton ID ASP.NET et ton ID généré en HTML...

http://msdn.microsoft.com/fr-fr/libr...vs.110%29.aspx

Cela peut, peut-être, être l'origine de ton souci, mais comme dit précédemment utilise Firebug ou les outils de développement IE pour être plus précis au niveau de ton analyse :)

Désolé pour le retard de ma réponse, je n'ai pas eu le temps de retravailler sur ce problème depuis. C'était effectivement lié au nom du bouton qui est modifié lors de la génération de la page. Ce problème résolu, lorsque je clique sur mon bouton, après traitement, la boîte modal s'affiche mais disparait aussitôt, surement du au rafraîchissement de la page, comment je peut palier ce problème ?

D'ailleurs, avec le recul, je préfèrerais que la boîte s'affiche après le traitement qui se fait en VB mais là je vois pas trop comment :aie:

Citation:
Envoyé par antrax2013
J'essayerais de lancer mon traitement via de l'ajax et je gérerais ma pop-up avec les événements ajaxStart/ajaxComplete
Code:

1 2 3 4 5 6 7 8 9 10 11 $(document).ajaxStart(function() { $( "#dialog-modal" ).dialog({ height: 140, modal: true }); }); $(document).ajaxComplete(function() { $( "#dialog-modal" ).dialog("close"); });
https://api.jquery.com/ajaxStart/
https://api.jquery.com/ajaxComplete/
Ca, ça va être dur, c'est un procédure en VB avec aux données et tout le toutime :aie:

Sinon tu peux utiliser un update panel avec un update progress comme ça tout le temps où ton traitement serveur a lieu l'update progress est affiché et il se ferme automatiquement une fois que le postback a terminé.

Citation:

Envoyé par youtpout978

Sinon tu peux utiliser un update panel avec un update progress comme ça tout le temps où ton traitement serveur a lieu l'update progress est affiché et il se ferme automatiquement une fois que le postback a terminé.

Oui effectivement, merci pour l'astuce ;)