Afficher une boîte modale jQuery depuis un UpdatePanel

:salut:

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 :aie:

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

:merci:

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.

:arf:

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)

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

Code:

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:

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:

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:

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

dont la fonction est:

Code:

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:

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.

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

:salut:

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 :no:

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