ASP et jQuery

**Franck.H** · 26/02/2014, 13h54

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 :

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
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 !

PS: Je connecte jQuery à partir de la MasterPage.

**antrax2013** · 04/03/2014, 16h08

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

Code :

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

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/

**Julien698** · 05/03/2014, 12h02

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

**Beowulf59** · 05/03/2014, 14h35

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

**Franck.H** · 07/03/2014, 16h36

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

**Franck.H** · 07/03/2014, 16h54

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 :

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

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

**youtpout978** · 07/03/2014, 22h15

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é.

**Franck.H** · 10/03/2014, 09h57

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

ASP et jQuery

ASP.NET

Vue hybride

Discussions similaires

Partager

Partager