Afficher une boîte modale jQuery depuis un UpdatePanel

**Franck.H** · 08/10/2014, 11h21

Je me retrouve devant un problème... J'ai dans un UpdatePanel un DataGrid où dans une colonne se trouve un bouton information. Lorsque je clique dessus, j'aimerais afficher une boîte modale jQuery. Le clique sur le bouton lance aussi une procédure VB.Net, tout fonctionne sauf l'affichage de la boîte car l'évènement est lancé depuis un contenu d'un UpdatePanel et du coup mon code jQuery qui se trouve en dehors n'est pas rechargé. J'ai bien essayé de mettre tout le contenu de ma boîte modale y compris le code jQuery mais ça ne donne rien. Ils m'en font souvent baver ces UpdatePanel

Qui aurait une solution pour que ma boîte s'affiche ?

**Franck.H** · 08/10/2014, 14h11

Un début de piste: http://www.codeproject.com/Articles/...ET-UpdatePanel cependant, le FormView qui est censé s'afficher dedans ne s'affiche pas car il n'est pas rechargé, le bouton qui figure en bas du FormView est bien là lui.

**Beowulf59** · 08/10/2014, 15h14

Bonjour,

Comment appelles tu ton code Javascript?
As tu essayé le "OnClientClick" du bouton, ou encore d'appeler le bout de code JS en Code Behind via ClientScriptManager ? (il y a une subtilité entre ClientScriptManager et this.ClientScript)

**Franck.H** · 08/10/2014, 16h11

C'est en fait un ImageButton qui se trouve dans un DataGrid et il appelle sa procédure:

Code vb :

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

1
2
3
4
5
6
7
8
    Protected Sub dgIntervenants_SelectedIndexChanged(sender As Object, e As System.EventArgs) Handles dgIntervenants.SelectedIndexChanged
        With dgIntervenants
            Session("idintervenantafficherintervenant") = CType(.Items(.SelectedIndex).Cells(3).Controls(0).FindControl("hfIDIntervenant"), HiddenField).Value.ToString()
 
            fvIntervenant.DataBind()
            AfficherDialogInfosIntervenant()
        End With
    End Sub

J'utilise cette procédure pour enregistrer la demande d'affiche de la boîte de dialogue une fois que le serveur repasse la main au client:

Code vb :

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

1
2
3
4
5
    Private Sub AfficherDialogInfosIntervenant()
        Dim cookieDialog As New HttpCookie("afficherDialogInfosIntervenant", 1)
 
        Response.Cookies.Add(cookieDialog)
    End Sub

Au chargement du DOM, la boîte est créée ainsi:

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
            var dialog_afficher_intervenant = $("#dialog-afficher-intervenant").dialog({
                dialogClass: "no-close",
                autoOpen: false,
                resizable: false,
                height: 700,
                width: 800,
                title: "Affichage/Modification d'un intervenant",
                show: {
                    effect: "fade",
                    duration: 500
                },
                hide: {
                    effect: "explode",
                    duration: 500
                }
            });
 
            dialog_afficher_intervenant.parent().prependTo("form");

J'ai ajouté une fonction pour le endRequest au début de la balise script:

Code javascript :

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

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(afficherDialogInfosIntervenant);

dont la fonction est:

Code javascript :

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

1
2
3
4
5
6
        function afficherDialogInfosIntervenant() {
            if (readCookie('afficherDialogInfosIntervenant') == '1') {
                $("#dialog-afficher-intervenant").dialog("open");
                createCookie('afficherDialogInfosIntervenant', 0, 0);
            }
        }

qui va lire le cookie est déterminer s'il faut afficher la boîte de dialogue ou pas. La boîte de dialogue se présente ainsi:

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
    <div id="dialog-afficher-intervenant" class="div-center">
        <asp:FormView ID="fvIntervenant" runat="server" HorizontalAlign="Center" 
            DefaultMode="Edit" DataSourceID="odsIntervenants">
            <EditItemTemplate>
                <asp:HiddenField ID="hfIdIntervenant" runat="server" Value='<%# Eval("ID") %>'/>
                <asp:Table ID="tbAfficherIntervenant" runat="server" CssClass="tb">
                    <asp:TableRow ID="TableRow4" runat="server">
                        <asp:TableCell ID="TableCell7" runat="server" CssClass="td-libelle">Raison sociale</asp:TableCell>
                        <asp:TableCell ID="TableCell8" runat="server" CssClass="td-donnee">
                            <asp:HiddenField ID="hfRaisonSocialeMaj" runat="server" Value='<%# Eval("RAISON_SOCIALE") %>'/>
                            <asp:DropDownList ID="ddlRaisonSocialeMaj" runat="server" DataSourceID="odsRaisonSociale"
                                DataTextField="LIB" DataValueField="CODE">
                            </asp:DropDownList>
                        </asp:TableCell>
                    </asp:TableRow>
                    <asp:TableRow ID="TableRow5" runat="server">
                        <asp:TableCell ID="TableCell9" runat="server" CssClass="td-libelle">SIRET</asp:TableCell>
                        <asp:TableCell ID="TableCell10" runat="server" CssClass="td-donnee">
                            <asp:TextBox ID="txtSiretMaj" runat="server" Text='<%# Eval("SIRET") %>'></asp:TextBox>
                        </asp:TableCell>
                    </asp:TableRow>
                    <asp:TableRow ID="TableRow6" runat="server">
                        <asp:TableCell ID="TableCell11" runat="server" CssClass="td-libelle">Nom de l'intervenant</asp:TableCell>
                        <asp:TableCell ID="TableCell12" runat="server" CssClass="td-donnee">
                            <asp:TextBox ID="txtNomIntervenantMaj" runat="server" Width="95%" Text='<%# Eval("NOM") %>'></asp:TextBox>
                            <font color="red"><b>*</b></font>
                        </asp:TableCell>
                    </asp:TableRow>
                    <asp:TableRow ID="TableRow7" runat="server">
                        <asp:TableCell ID="TableCell13" runat="server" CssClass="td-libelle">Numéro et rue</asp:TableCell>
                        <asp:TableCell ID="TableCell14" runat="server" CssClass="td-donnee">
                            <asp:TextBox ID="txtRueMaj" runat="server" Width="300px" Text='<%# Eval("RUE") %>'></asp:TextBox>
                            <font color="red"><b>*</b></font>
                        </asp:TableCell>
                    </asp:TableRow>
                    <asp:TableRow ID="TableRow8" runat="server">
                        <asp:TableCell ID="TableCell15" runat="server" CssClass="td-libelle">Ville</asp:TableCell>
                        <asp:TableCell ID="TableCell16" runat="server" CssClass="td-donnee">
                            <asp:HiddenField ID="hfIdCommuneMaj" runat="server" Value='<%# Eval("ID_COMMUNE") %>'/>
                            <asp:DropDownList ID="ddlCommuneMaj" runat="server" DataSourceID="odsVille" DataTextField="NOM"
                                DataValueField="ID">
                            </asp:DropDownList>
                        </asp:TableCell>
                    </asp:TableRow>
                    <asp:TableRow ID="TableRow9" runat="server">
                        <asp:TableCell ID="TableCell30" runat="server" CssClass="td-libelle">Référence marché</asp:TableCell>
                        <asp:TableCell ID="TableCell31" runat="server" CssClass="td-donnee">
                            <asp:TextBox ID="txtRefMaj" runat="server" Text='<%# Eval("REF_MARCHE") %>'></asp:TextBox>
                        </asp:TableCell>
                    </asp:TableRow>
                    <asp:TableRow ID="TableRow17" runat="server">
                        <asp:TableCell ID="TableCell32" runat="server" CssClass="td-libelle">Effectif de l'entreprise</asp:TableCell>
                        <asp:TableCell ID="TableCell33" runat="server" CssClass="td-donnee">
                            <asp:TextBox ID="txtEffectifMaj" runat="server" Width="75px" Text='<%# Eval("EFFECTIF") %>'></asp:TextBox>
                        </asp:TableCell>
                    </asp:TableRow>
                    <asp:TableRow ID="TableRow18" runat="server">
                        <asp:TableCell ID="TableCell34" runat="server" CssClass="td-libelle">Matériels et moyens mis à disposition</asp:TableCell>
                        <asp:TableCell ID="TableCell35" runat="server" CssClass="td-donnee">
                            <asp:TextBox ID="txtMaterielsMaj" runat="server" Rows="4" TextMode="MultiLine" Width="95%" Text='<%# Eval("MATERIELS") %>'></asp:TextBox>
                        </asp:TableCell>
                    </asp:TableRow>
                    <asp:TableRow ID="TableRow19" runat="server">
                        <asp:TableCell ID="TableCell36" runat="server" CssClass="tr-categorie">Commentaire</asp:TableCell>
                        <asp:TableCell ID="TableCell37" runat="server" CssClass="tr-vide"></asp:TableCell>
                    </asp:TableRow>
                    <asp:TableRow ID="TableRow20" runat="server">
                        <asp:TableCell ID="TableCell38" runat="server" CssClass="td-donnee" ColumnSpan="2">
                            <asp:TextBox ID="txtCommentaireMaj" runat="server" Rows="4" TextMode="MultiLine" Width="95%" Text='<%# Eval("COMM") %>'></asp:TextBox>
                        </asp:TableCell>
                    </asp:TableRow>
                </asp:Table>
            </EditItemTemplate>
        </asp:FormView>
        <asp:ObjectDataSource ID="odsIntervenants" runat="server" 
            OldValuesParameterFormatString="original_{0}" SelectMethod="GetDataByID" 
            TypeName="SANDRE.DAL.dsCampagnesEpandagesTableAdapters.V_INTERVENANTSTableAdapter">
            <SelectParameters>
                <asp:Parameter Name="pID" Type="String" />
            </SelectParameters>
        </asp:ObjectDataSource>
        <br />
        <br />
        <asp:Button ID="btnMajIntervenant" runat="server" CssClass="btn-EXP" Text="Mettre à jour" />
    </div>

et ce div se trouve dans le body de la page tout simplement mais il caché par la création de la boîte de dialogue.

**Beowulf59** · 08/10/2014, 17h39

Pourquoi n'utilises tu pas ScriptManager.RegisterStartupScript plutôt qu'un Cookie?
Cela me semble un peu complexe comme solution pour faire un appel de fonction JS, et cela pourrait fonctionner...

**Franck.H** · 09/10/2014, 09h24

Peut-être oui mais ça ne marche pas mieux avec ta solution car j'ai toujours ma boîte de dialogue sans les données dedans. La page n'étant pas rechargée entièrement, mon DataGrid ne l'est pas non plus du coup et donc n'affiche rien. Je pense que je vais abandonnée l'idée d'afficher ça en boîte de dialogue

Je laisse cependant le post ouvert si jamais quelqu'un a une solution.

Afficher une boîte modale jQuery depuis un UpdatePanel

ASP.NET

Vue hybride

Discussions similaires

Partager

Partager