Discussion :

[Juju54350]

Bonjour à tous !

Je travaille sur un site web en langage ASP.NET. Mais ma question est essentiellement sur du Javascript et de l'Ajax.

En fait, sur une page de mon site, quand je clique sur un lien quelconque, une popup s'affiche, voici le lien en question et le code Javascript qui me permet de créer cette popup :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<a class="forgot" id="opener" href="">Mot de passe perdu</a>
 
    <script type="text/javascript">
        $(document).ready(function() {
            $("#opener").click(function() {
                $('#lostpassword').load("~/MyPanel/Special-pages/Lost-password.aspx");
                $('#lostpassword').dialog({ title: "Récupération du mot de passe", modal: true, height: 'auto', show: 'slide' });
                return false;
            });
        });
    </script>

En fait, c'est grâce à l'id du lien que je peux afficher cette popup. "lostpassword" correspond à l'id d'un div qui est présent sur la même page (il n'y a pas de contenu à l'intérieur). Et dans ce div, je charge la page Lost password (.load("~/MyPanel/Special-pages/Lost-password.aspx") ce qui fonctionne.

Pour que vous voyez mieux, j'ai mis la popup en pièce jointe.

Mon problème survient quand je clique sur le bouton "Envoyer", la page se charge (ce qui est normal) mais elle ne se charge pas dans la popup (ça charge la page en intégralité). En fait, quand on clique sur le bouton, ça envoie juste un message de confirmation.

Maintenant est-ce possible qu'une fois la page chargée, elle s'affiche dans la même popup ? J'ai entendu dire que je pouvais faire ça avec Ajax...

Merci d'avance de vos réponses.

[gael]

Peux-tu poster le code du popup?

[Juju54350]

Je l'ai posté au-dessus : y a le lien pour afficher la popup :

Code :

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

<a class="forgot" id="opener" href="">Mot de passe perdu</a>

Et le code Javascript de la popup elle-même :

Code :

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

1
2
3
4
5
6
7
8
9
<script type="text/javascript">
        $(document).ready(function() {
            $("#opener").click(function() {
                $('#lostpassword').load("~/MyPanel/Special-pages/Lost-password.aspx");
                $('#lostpassword').dialog({ title: "Récupération du mot de passe", modal: true, height: 'auto', show: 'slide' });
                return false;
            });
        });
    </script>

[vermine]

Bonjour,

Je pense que gael désire le code de Lost-password.aspx.
Le code où il y a le bouton Envoyer.

[Juju54350]

Ah d'accord, voici le code (.aspx) :

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
    <cms:QueryRepeater ID="QueryRepeater1" runat="server" QueryName="tns.mypanel_email.selectmail1"
        TransformationName="tns.mypanel_email.preview" Visible="false">
    </cms:QueryRepeater>
    <br />
    <div id="form" runat="server">
        <asp:Label ID="Label1" runat="server" Text="Veuillez saisir votre e-mail :"></asp:Label><br />
        <br />
        <asp:TextBox ID="TBEmail" runat="server"></asp:TextBox>
        <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"></asp:RequiredFieldValidator>
        <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server"></asp:RegularExpressionValidator>
        <br />
        <br />
        <asp:Button ID="BSend" runat="server" Text="Envoyer" OnClick="BSend_Click" />
        <br />
        <br />
    </div>
    <asp:Label ID="LCheck" runat="server" Visible="false"></asp:Label>

Le composant "QueryRepeater" me sert pour avoir le contenu du mail à envoyer.

Et voici le code behind (.aspx.cs) :

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
    //PASSWORD SENDING
    protected void BSend_Click(object sender, EventArgs e)
    {
        if (TBEmail.Text != "")
        {
            form.Visible = false;
            LCheck.Visible = true;
 
            //GET EMAIL CONTENT
            mypanelmember member = getMyPanelInformation.getPanelMemberinfo(TBEmail.Text);
 
            //CHECKING EMAIL
            if (member != null)
            {
                HtmlGenericControl controlEmailSubject = new HtmlGenericControl();
                HtmlGenericControl controlEmailText = new HtmlGenericControl();
                Control divEmailSubject = new Control();
                Control divEmailText = new Control();
 
                foreach (Control ctrl in QueryRepeater1.Controls)
                {
                    divEmailSubject = FindControlRecursive(ctrl, "EmailSubject");
                    divEmailText = FindControlRecursive(ctrl, "EmailText");
                }
 
                controlEmailSubject = (HtmlGenericControl)divEmailSubject;
                controlEmailText = (HtmlGenericControl)divEmailText;
                controlEmailText.InnerHtml = controlEmailText.InnerHtml.Replace("[FIRSTNAME]", member.Firstname);
                controlEmailText.InnerHtml = controlEmailText.InnerHtml.Replace("[PASSWORD]", member.Password);
 
                //GET EMAIL DATA
                email email = new email();
                email.To = TBEmail.Text;
                email.Subject = controlEmailSubject.InnerHtml;
                email.Body = controlEmailText.InnerHtml;
 
                hideControls();
 
                if (SendEmail.send(email) != -1)
                {
                    LCheck.Text = "Votre mot de passe a été envoyé sur votre adresse e-mail, attention il a pu être envoyé dans le courrier indésirable.";
                }
 
                else
                {
                    LCheck.Text = "Message non envoyé.";
                }
 
            }
            else
            {
                // MESSAGE EMAIL INVALIDE ; NON-EXISTENTE
            }
        }
    }

La méthode permet tout simplement d'envoyer un mail à l'adresse saisie. La fonction "FindControlRecursive" permet de récupérer les infos du mail (grâce à QueryRepeater).

[dedis]

Sinon, pour la question du chargement de contenu ajax dans une popup en js va voir du côté du plugin 'Dialog' de jquery-ui :

http://jqueryui.com/demos/dialog/#modal-form

c fait exactement pour ce que tu cherches à faire. La version qui t'intéresse est modal-form.