ModalPopup spécifiant résultat

Version imprimable

08/01/2013, 11h05
Pelote2012

ModalPopup spécifiant résultat

Bonjour,

J'ai dans un de mes sites (dans la master) une modalPopup de l'ajaxToolKit.
Je souhaite me séparer de cette bibliothèque pour passer en jquery, moins lourde.

j'ai trouvé ce tuto très bien. ici

Mais le problème et que je n'arrive pas à ouvrir ma popup dans le code behind à la fin de mon traitement. Je sais que jquery c'est du javascript en local et que le cde behind et du coté serveur. Mais je pense qu'on doit pouvoir quand même faire quelque chose.

Je précise je suis grand débutant en jquery et le javascript n'a jamais été ma tasse de thé. Donc si en même temps vous pouvez bien expliquer la démarche.

Merci
08/01/2013, 11h13
Bovino

Citation:

Mais le problème et que je n'arrive pas à ouvrir ma popup dans le code behind à la fin de mon traitement. Je sais que jquery c'est du javascript en local et que le cde behind et du coté serveur. Mais je pense qu'on doit pouvoir quand même faire quelque chose.

Je comprends pas trop... Si tu connais la différence entre un code serveur et un code client, ton but c'est quoi au juste ? Ouvrir la popup sur l'écran du serveur dans le datacenter hébergeant ton site en espérant qu'un technicien passera par là pour cliquer dessus ? :?

pas vraiment.

A l'heure actuelle quand je fais des traitement en BDD, j'ouvre une modal Popup pour dire à l'utilisateur si c'est ok ou pas.
Pour cela j'ai une méthode dans ma master :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
Public Sub AfficheMessage(ByVal Message As String, Optional ByVal OK As Boolean = True, Optional ByVal ReturnURL As String = "")
        lblError.Text = Server.HtmlEncode(Message)
        If OK Then
            lblError.CssClass = "Ok"
            imgError.ImageUrl = "~/images/clean.png"
        Else
            lblError.CssClass = "Ko"
            imgError.ImageUrl = "~/images/critical.png"
        End If
        If ReturnURL <> "" Then
            btnValiderError.PostBackUrl = ReturnURL
            btnValiderError.UseSubmitBehavior = False
            btnValiderError.Focus()
        End If
        mpopError.Show()
    End Sub

Associé à l'ajaxToolkit suivant :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<asp:Button ID="btnError" runat="server" Style="visibility: hidden" />
    <asp:Panel ID="pnlPopupError" runat="server" Style="display: none;" CssClass="outerPopup">
        <asp:UpdatePanel ID="UpdatePanelError" runat="server" UpdateMode="Always">
            <ContentTemplate>
                <asp:Panel ID="pnlInnerPopupError" runat="server" CssClass="innerPopup">
                    <asp:Image ID="imgError" runat="server" CssClass="PicOk" />
                    <asp:Label ID="lblError" runat="server" CssClass="Ko"></asp:Label>
                    <p align="center">
                        <asp:Button ID="btnValiderError" runat="server" CssClass="btnValid" Text="Ok" CausesValidation="false"
                            UseSubmitBehavior="false" /></p>
                </asp:Panel>
            </ContentTemplate>
        </asp:UpdatePanel>
    </asp:Panel>
    <cc1:ModalPopupExtender ID="mpopError" runat="server" TargetControlID="btnError"
        PopupControlID="pnlPopupError" BackgroundCssClass="modalBackground" />

Je cherche à faire l'équivalent en jquery.

A la fin de mon traitement coté serveur, faire afficher une popup pour avertir du bon (ou non) déroulement de l'opération

08/01/2013, 16h33
Bovino

Ce qu'il faut comprendre, c'est que ton code serveur n'est pas envoyé tel quel au navigateur puisque ce dernier ne saurait pas l'interpréter.
Il va créer du code HTML + JavaScript pour faire le travail côté client.
Le code client va donc faire une requête AJAX qui va lancer des actions côté serveur. Une fois ces actions terminées, une réponse va être renvoyée et en fonction de cette réponse, tu pourras exécuter le code JavaScript souhaité, ce qui se gère avec jQuery dans la méthode success des requêtes AJAX.
08/01/2013, 17h06
Pelote2012

Merci pour la réponse.

Est-ce que tu aurais un exemple concret avec lequel je pourrai décortiquer pour comprendre ce principe.

Pour mon problème je pensez mettre ma div en visiblity:hidden
à la fin de mon traitement coté server faire un truc du genre registerscriptblock . Un exemple : exemple

trouver en faisant sous google :

Citation:

asp.net jquery modal popup from code behind
11/01/2013, 09h38
Pelote2012

est-ce que quelqu'un aurait un exemple simple sur

Citation:

Le code client va donc faire une requête AJAX qui va lancer des actions côté serveur. Une fois ces actions terminées, une réponse va être renvoyée et en fonction de cette réponse, tu pourras exécuter le code JavaScript souhaité, ce qui se gère avec jQuery dans la méthode success des requêtes AJAX.

pour que je puisse comprendre un peu mieux

Bonsoir

:faq: http://javascript.developpez.com/faq...ax#AjaxRequest
http://api.jquery.com/jQuery.post/
http://api.jquery.com/jQuery.ajax/

La version conseillée depuis 1.8 utilise les objets différés et les promesses de cette manière :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 var jqXHR = $.getJSON( "fichier.php" ); jqXHR.done( function( data, textStatus, jqXHR ){ // succès de la transaction, on doit traiter le contenu de data console.log( data, textStatus, jqXHR ); }); jqXHR.fail( function( jqXHR, textStatus, errorThrown ){ // échec de la transaction, gérer la catastrophe console.log( jqXHR, textStatus, errorThrown ); }); jqXhr.always( function( jqXHR, textStatus ){ // la transaction est terminée console.log( jqXhr, textStatus ); });
Citation:

Deprecation Notice: The jqXHR.success(), jqXHR.error(), and jqXHR.complete()callbacks are deprecated as of jQuery 1.8. To prepare your code for their eventual removal, use jqXHR.done(), jqXHR.fail(), and jqXHR.always()instead.

Merci danielhagnoul pour cette réponse précise. J'ai bien lu les posts conseillé. Je vois un peu mieux comment ça peu marcher.

Je vais essayer de simplifier le problème en restant dans une page simple (pas de master comme dans le 1er message)

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
 
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="Jquery._Default" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="script/jquery-1.8.3.js"></script>
    <style>
        #overlay
        {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #000;
            opacity: 0.5;
            filter: alpha(opacity=50);
        }
        #modal
        {
            position: absolute;
            background: url(tint20.png) 0 0 repeat;
            background: rgba(0,0,0,0.2);
            border-radius: 14px;
            padding: 8px;
        }
 
        #content
        {
            border-radius: 8px;
            background: #fff;
            padding: 20px;
        }
 
        #close
        {
            position: absolute;
            background: url(close.png) 0 0 no-repeat;
            width: 24px;
            height: 27px;
            display: block;
            text-indent: -9999px;
            top: -7px;
            right: -7px;
        }
    </style>
    <script>
        var modal = (function () {
            var 
    method = {},
    $overlay,
    $modal,
    $content,
    $close;
 
            // Center the modal in the viewport
            method.center = function () {
                var top, left;
 
                top = Math.max($(window).height() - $modal.outerHeight(), 0) / 2;
                left = Math.max($(window).width() - $modal.outerWidth(), 0) / 2;
 
                $modal.css({
                    top: top + $(window).scrollTop(),
                    left: left + $(window).scrollLeft()
                });
            };
 
            // Open the modal
             method.open = function (settings) {
                $content.empty().append(settings.content);
 
                $modal.css({
                    width: settings.width || 'auto',
                    height: settings.height || 'auto'
                })
 
                method.center();
 
                $(window).bind('resize.modal', method.center);
 
                $modal.show();
                $overlay.show();
            };
 
            // Close the modal
            method.close = function () {
                $modal.hide();
                $overlay.hide();
                $content.empty();
                $(window).unbind('resize.modal');
            };          
 
            return method;
        } ());
 
        $overlay = $('<div id="overlay"></div>');
        $modal = $('<div id="modal"></div>');
        $content = $('<div id="content"></div>');
        $close = $('<a id="close" href="#">close</a>');
 
        $modal.hide();
        $overlay.hide();
        $modal.append($content, $close);
 
        $(document).ready(function () {
            $('body').append($overlay, $modal);
        });
 
        $close.click(function (e) {
            e.preventDefault();
            method.close();
        });
 
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table>
            <tr>
                <td>
                    Libellé
                </td>
                <td>
                    &nbsp;
                </td>
            </tr>
            <asp:Repeater ID="rpt" runat="server">
                <ItemTemplate>
                    <tr>
                        <td>
                            <asp:Localize ID="locLib" runat="server" Text='<%# eval("Libelle") %>'></asp:Localize>
                        </td>
                        <td>
                            <asp:Button ID="btn" runat="server" Text="Effacer" CommandName="Delete" CommandArgument='<%# eval("id") %>' />
                        </td>
                    </tr>
                </ItemTemplate>
                <AlternatingItemTemplate>
                    <tr>
                        <td>
                            <asp:Localize ID="locLib" runat="server" Text='<%# eval("Libelle") %>'></asp:Localize>
                        </td>
                        <td>
                            <asp:Button ID="btn" runat="server" Text="Effacer" CommandName="Delete" CommandArgument='<%# eval("id") %>' />
                        </td>
                    </tr>
                </AlternatingItemTemplate>
            </asp:Repeater>
        </table>
    </div>
    <div id='overlay'>
    </div>
    <div id='modal'>
        <div id='content'>
            No JavaScript Yet!</div>
        <a href='#' id='close'>close</a>
    </div>
    </form>
</body>
</html>

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
 
Public Class _Default
    Inherits System.Web.UI.Page
 
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
 
        If Not Page.IsPostBack Then
 
            Dim ds As New DataSet
            Dim dc As New DataColumn("Libelle", GetType(String))
            Dim dc2 As New DataColumn("id", GetType(Integer))
 
            ds.Tables.Add("Table1")
            ds.Tables(0).Columns.Add(dc)
            ds.Tables(0).Columns.Add(dc2)
 
            Dim r1 As DataRow = ds.Tables(0).NewRow
            r1("Libelle") = "Ligne 1 : Success"
            r1("id") = 1
            ds.Tables(0).Rows.Add(r1)
 
            Dim r2 As DataRow = ds.Tables(0).NewRow
            r2("Libelle") = "Ligne 2 : Fail"
            r2("id") = 2
            ds.Tables(0).Rows.Add(r2)
 
            rpt.DataSource = ds.Tables(0).DefaultView
            rpt.DataBind()
        End If
 
    End Sub
 
    Private Sub rpt_ItemCommand(source As Object, e As System.Web.UI.WebControls.RepeaterCommandEventArgs) Handles rpt.ItemCommand
        If e.Item.ItemType = ListItemType.AlternatingItem OrElse e.Item.ItemType = ListItemType.Item Then
            If e.CommandName = "Delete" Then
                If e.CommandArgument = "1" Then
 
                Else
                    Throw New Exception("Erreur pour test")
                End If
            End If
        End If
    End Sub
 
End Class

j'ai repris cet ex de modal sur ici

J'ai quand même un gros doute sur la place de

Code:

1
2
3
4
5
6
7
8
 $overlay = $('<div id="overlay"></div>');
        $modal = $('<div id="modal"></div>');
        $content = $('<div id="content"></div>');
        $close = $('<a id="close" href="#">close</a>');
 
        $modal.hide();
        $overlay.hide();
        $modal.append($content, $close);

J'aimerai savoir comment faire pour ouvrir la modal popup sur le résultat des boutons supprimer de mon répéteur

Quelqu'un peut-il me guider?:roll:

17/01/2013, 09h38
Pelote2012

Dans le post ci-dessus, j'ai juste mis un exemple simple d'un répéteur.
Si je clique sur le bouton da la ligne 1 : je voudrais prvoquer la modal popup disant Ok
Si je clique sur le bouton de la ligne 2 : je voudrais provoquer la modalPopup disant KO

Je pense n'être pas le seul à avoir ce genre de besoin.
Quelqu'un a déjà du faire ce genre de manip?
Please help! :? J'ai vraiment du mal à me lancer dans le jquery
23/01/2013, 15h27
Pelote2012

je cloture pour en ouvrir une autre discussion un peu mieux ciblés