How to close PopupControl through javascript?

Last post 05-08-2008 4:13 PM by krupini. 6 replies.

Sort Posts:

  • How to close PopupControl through javascript?

    05-02-2008, 7:23 PM
    • Member
      point Member
    • krupini
    • Member since 05-02-2008, 7:18 PM
    • Posts 3

     Hello,

     I have a panel that gets popped up using PopupControl. On the panel I added a little x so that it can be closed should the user chooses to. I could easily do it by calling popupControl.Cancel() but I don't want a postback for the close button, I want to do it through JavaScript.

     
    So which function do I call? I mean if I click on another control on the form the popup closes, so there must be a function somewhere that does it.

     

    Thanks!!

     

  • Re: How to close PopupControl through javascript?

    05-03-2008, 1:24 PM
    • Participant
      1,708 point Participant
    • mvang
    • Member since 12-27-2007, 6:59 PM
    • Mid West
    • Posts 361

    For the ModalPopup Control Extender, could you assign the 'x' image button (I am assuming...) to the Modal's CancelControlID property? I don't believe that cause a postback.

    "If you have knowledge, let others light their candles in it."
    — Margaret Fuller
  • Re: How to close PopupControl through javascript?

    05-04-2008, 11:45 AM
    • Member
      point Member
    • krupini
    • Member since 05-02-2008, 7:18 PM
    • Posts 3

    I tried but I get an exception saying CancelControlID is a non-existant property for PopupControl
    Also, you mention ModalPopup but I am using PopupControl

  • Re: How to close PopupControl through javascript?

    05-04-2008, 5:31 PM
    • Participant
      1,708 point Participant
    • mvang
    • Member since 12-27-2007, 6:59 PM
    • Mid West
    • Posts 361

    try

    <div style="display:none">

    <asp:button id="cancelControl" runat="server">

    </div>

    "If you have knowledge, let others light their candles in it."
    — Margaret Fuller
  • Re: How to close PopupControl through javascript?

    05-08-2008, 7:11 AM
    Answer

    Hi krupini,

    Based on my understanding, you situation is there is a “X” sign as a close button in the PopupPanel, and the issue is could not find the way to hide the PopupPanel without post back, if I have misunderstood you, please feel free to tell me, thanks.

    Actually, there are many way to hide the PopupPanel, and base on your request, we recommend using the hidePopup() function in the PopupControlBehavior.

    Please refer to this sample code: 

    .aspx file
    
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestHidePopUp.aspx.cs"
        Inherits="SoluTest_ModalOutsideUDP.TestHidePopUp" %>
    
    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
    <!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>Untitled Page</title>
        <style type="text/css">
            /*Popup Control*/.popupControl
            {
                background-color: White;
                position: absolute;
                visibility: hidden;
            }
            .closeLabel
            {
                background-color: #666666;
                color: #FFFFFF;
                text-align: center;
                font-weight: bold;
                text-decoration: none;
                border: outset thin #FFFFFF;
                padding: 5px;
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <div>
            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
            <cc1:PopupControlExtender ID="PopupControlExtender2" runat="server" DynamicServicePath=""
                PopupControlID="Panel2" Enabled="True" ExtenderControlID="" TargetControlID="TextBox1"
                CommitProperty="value" Position="Bottom" CommitScript="e.value += ' - do not forget!';">
            </cc1:PopupControlExtender>
            <asp:Panel ID="Panel2" runat="server" CssClass="popupControl">
                <div style="border: 1px outset white; width: 100px">
                    <asp:UpdatePanel runat="server" ID="up2">
                        <ContentTemplate>
                            <asp:RadioButtonList ID="RadioButtonList1" runat="server" AutoPostBack="true" OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged">
                                <asp:ListItem Text="Walk dog" />
                                <asp:ListItem Text="Feed dog" />
                                <asp:ListItem Text="Feed cat" />
                                <asp:ListItem Text="Feed fish" />
                                <asp:ListItem Text="Cancel" Value="" />
                            </asp:RadioButtonList>
                            Whatever controls you could add here.
                            <asp:Label ID="btnClose" runat="server" onclick="ClosePopup()" Text="X" ToolTip="Close"
                                CssClass="closeLabel" />
                        </ContentTemplate>
                    </asp:UpdatePanel>
                </div>
            </asp:Panel>
        </div>
        </form>
    
        <script type="text/javascript" language="javascript">
        function ClosePopup(){
            var pce = $find("PopupControlExtender2");
            pce.hidePopup();
    //        var pop = $get("Panel2");
    //        pop.style.visibility="hidden";
        }    
        </script>
    
    </body>
    </html>
     

    .aspx.cs file
    
    /// <summary>
    /// Handler for radio button changes
    /// </summary>
    /// <param name="sender">source</param>
    /// <param name="e">arguments</param>
    protected void RadioButtonList1_SelectedIndexChanged(object sender, EventArgs e)
    {
        if (!string.IsNullOrEmpty(RadioButtonList1.SelectedValue))
        {
            // Popup result is the selected task
            PopupControlExtender2.Commit(RadioButtonList1.SelectedValue);
        }
        else
        {
            // Cancel the popup
            PopupControlExtender2.Cancel();
        }
        // Reset the selected item
        RadioButtonList1.ClearSelection();
    }
      

    And this is the hidePopup() function: 

        hidePopup : function() {
            /// <summary>
            /// Hide the popup
            /// </summary>
            
            this._popupBehavior.hide();
            this._popupVisible = false;
            AjaxControlToolkit.PopupControlBehavior.__VisiblePopup = null;
        },
     

    For more information, please refer to the files PopupControlBehavior.js and PopupControlExtender.cs, you can get the code from AjaxControlToolkit-Framework3.5.zip.

    Please tell me whether it helps or not, thanks!

    Best regards,

    Zhi-Qiang Ni

    Microsoft Online Community Support

    Please remember to click “Mark as Answer” on the post that helps you, and to click “Unmark as
    Answer” if a marked post does not actually answer your question.
  • Re: How to close PopupControl through javascript?

    05-08-2008, 10:59 AM
    • Member
      2 point Member
    • lx2008
    • Member since 05-08-2008, 2:52 PM
    • Posts 4

    I have a couple of PopupControlExtenders within an ItemTemplate and an EmptyDataTemplate of a GridView and I'm trying to do the same thing. I figure I can use the sample above, but how do I reference the popupextender controls inside the templates from Javascript? I tried many ways, including using the FindControl, but none of them works. Is there any way I can use the $find function by passing in a fully qualified name to reference the controls inside the gridview templates, i.e. gridview:template controlname?

    Thanks.

  • Re: How to close PopupControl through javascript?

    05-08-2008, 4:13 PM
    • Member
      point Member
    • krupini
    • Member since 05-02-2008, 7:18 PM
    • Posts 3

    Zhi-Qiang Ni,

     Thank you very much for your insightful and detailed answer -- it worked!

Page 1 of 1 (7 items)