Chargement de la même page dans une popup

Version imprimable

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:

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.

23/08/2010, 15h43
gael

Peux-tu poster le code du popup?

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

Code:

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

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

Code:

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>

24/08/2010, 10h15
vermine

Bonjour,

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

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

Code:

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:

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

24/08/2010, 18h08
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.
25/08/2010, 08h51
Juju54350

Ouais c'est à partir de ce lien que j'ai pu créer cette popup, mais je ne vois pas quelle option utiliser si, quand tu cliques sur un bouton, la page doit se charger dans la popup.
25/08/2010, 11h00
dedis

Il faut en effet faire un petit coup d'ajax. C très simple evec jQuery.
Je te conseille ce tuto :

http://www.babylon-design.com/site/i...dre-jquery-3-3

lis le en détail pour bien comprendre.
Si tu veux, je peux te poser un bout de code ou j'ai fais un popup avec 'dialog' + ajax.
25/08/2010, 11h12
Juju54350

Ton lien est intéressant mais je veux bien que tu me montres ce que t'as fait, pour voir si j'ai plus ou moins la même chose que toi :D

oki. Donc, je m'en sers dans un ecommerce pour afficher une pop-up 'Ajouter au Panier'.

Quand on valide le formulaire d'ajout au panier, le script appel le formulaire php de traitement défini dans le champs action du formulaire :

Code:

url: $(this).attr("action")

puis insère le retour dans le dialog

Code:

$("#dialog").empty().append(retour)

avant de l'afficher

Code:

$("#dialog").dialog("open")

ce qui donne côté js :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 $("form.caddyAjax").submit(function() { s = $(this).serialize(); $.ajax( { type: "POST", data: s, url: $(this).attr("action"), success: function(retour) { $("#dialog").empty().append(retour); $("#dialog").dialog("open"); } }); return false; });
Si ton formulaire est dans la popup, cela ne change pas grand chose. Quand on le valide, tu fais ton appel ajax, puis tu vides ta popup et insères le retour d'ajax. Au moment de l'insertion, tu peux mettre une petite anim en prime :ccool:.

25/08/2010, 11h36
Juju54350

D'accord je vois un peu mieux comme ça, mais moi je ne travaille pas avec PHP mais avec ASP. Mon bouton de validation se présente comme ceci :

Code:

<asp:Button ID="BSend" runat="server" Text="Envoyer" OnClick="BSend_Click" />

Maintenant, je ne sais pas si ça change grand-chose, mais je vais de suite essayer ce que tu m'as proposé. :)
25/08/2010, 11h49
dedis

Ahh.. ces cochonneries de frameworks Microsoft...

Le problème c'est que ton formulaire est déjà validé en JavaScript :

Code:

OnClick="BSend_Click"

Donc, pour faire de l'ajax avec jquery, il faudrait que tu aille voir ce que fait BSend_Click et quelle est la page de traitement du formulaire.

Visiblement, ce tuto devrait t'aider:

http://www.west-wind.com/presentatio...uerypart2.aspx
25/08/2010, 11h54
Juju54350

Merci pour ce lien mais je te précise quand même que c'est moi qui ait créé la méthode OnClick du bouton (c'est du C#, pas du Javascript) ainsi que ce qu'il y a à l'intérieur. :D

Regarde, j'ai posté tout ce que tu dois savoir un peu plus haut ^^
25/08/2010, 15h29
Juju54350

Je précise bien mon cas : sur une page .aspx, j'ai un lien HTML et un div (id : lostpassword) dans lequel le contenu de la popup sera chargé. En fait, quand je clique sur le lien, je charge une autre page .aspx (Lost-password.aspx) grâce à la méthode .load en Javascript dans le div que j'ai parlé.

C'est grâce à l'id de ce div que je charge la page dans la popup. Dans "Lost-password.aspx", il y a un petit formulaire et quand je clique sur le bouton, ça recharge la page en entier et pas dans la popup. Je voudrais que ça reste dans la popup. :)
25/08/2010, 16h12
dedis

Citation:

Envoyé par Juju54350

il y a un petit formulaire et quand je clique sur le bouton, ça recharge la page en entier et pas dans la popup. Je voudrais que ça reste dans la popup. :)

Bin comme je t'ai expliqué, tu 'ajaxise' ton petit formulaire. cf le code plus haut : tu récupère la page action du formulaire, tu envoie en ajax tes variables, tu récupère le résultat, tu efface sa div (avec son id), tu injecte dans la div (avec son id) le résultat.

(si t'y arrives pas, envoi le code ton formulaire)

En fait, je pense que c'est plus compliqué que ça, donc je préfère te montrer le code que t'auras besoin :)

Code:

<a class="forgot" id="opener" href="">lien_pour_afficher_la_popup</a>
Code:

1 2 <div id="lostpassword"> </div>
Code:

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', hide: 'slide' }); return false; }); }); </script>
Le premier bout de code correspond au lien pour afficher le popup, le deuxième au div qui récupérera le contenu de la popup et le troisième, la fonction Javascript qui permettra d'afficher la popup (qui chargera la page "Lost password.aspx" dans le div).
Je précise que ces trois bouts de code font partie de la même page, à savoir "MasterPage1.master" (je ne sais pas si tu connais les master pages en ASP.NET). À propos, j'ai une balise form dans cette page mais la propriété "action" n'est pas définie.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <cms:QueryRepeater ID="QueryRepeater1" runat="server" QueryName="tns.mypanel_email.selectmail1" TransformationName="tns.mypanel_email.preview" Visible="false"> </cms:QueryRepeater> <br /> <asp:Panel ID="PnlForm" runat="server"> <asp:Label ID="Label1" runat="server" Text="Veuillez saisir votre e-mail :"></asp:Label> <br /> <br /> <asp:TextBox ID="TBEmail" runat="server" Width="220"> </asp:TextBox> <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="TBEmail" ErrorMessage="Missing e-mail"> </asp:RequiredFieldValidator> <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ControlToValidate="TBEmail" ErrorMessage="Invalid e-mail" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"></asp:RegularExpressionValidator> <br /> <asp:Button ID="BSend" runat="server" Text="Envoyer" CssClass="lostpassword" OnClick="BSend_Click" /> </asp:Panel> <br /> <asp:Label ID="LCheck" runat="server"></asp:Label>
Voici le formulaire en question de la page "Lost password.aspx". Ne fais pas attention au composant "QueryRepeater". Et là aussi, la balise form ne contient pas "action".
Et c'est donc avec le bouton "BSend" que la page se recharge entièrement.

25/08/2010, 16h42
dedis

Bon, bin je vais me répéter. Tu devrais lire ça en détail :

http://www.west-wind.com/presentatio...uerypart2.aspx

Je ne fais pas de aspx. Je ne peux donc plus t'aider à se niveau là. Mais ce tuto à l'air bien fait.

A mon avis, c dans le JavaScript du bount BSend que tu trouveras ta page action... mais bon, lis le tuto, et va peut-être poser ta question dans un forum aspx.
25/08/2010, 16h47
Juju54350

Ouais à la base, j'avais créé ce topic dans la section ASP.NET mais vu que mon problème concernait plus du Javascript, il a été déplacé.
Je n'ai pas trouvé grand-chose sur ton lien mais je vais tâcher de le revoir.

C'est pour ça que j'ai préféré bien tout t'expliquer pour pas que tu confondes le PHP avec l'ASP.

Encore merci de ton aide. :)
26/08/2010, 10h20
Juju54350

Si quelqu'un repasse par là, j'ai trouvé ce lien :

http://forums.asp.net/t/963412.aspx

J'ai vu qu'on pouvait mettre du Javascript dans la propriété OnClientClick du bouton. Est-ce que ça conviendrait dedis pour la solution que tu m'as donnée ?