CODEWITHSUNDEEP
c#asp.netajaxajaxcontroltoolkit
Daniel Filipe
Daniel Filipe

Reputation: 308

Modal Popup Extender auto closing after .Show()

I am using ModalPopupExtender from AjaxToolkit for asp.net. I am trying to have a ModalPopupExtender triggered with different buttons. The problem is that unless I am using the TargetControlID the popup opens and quickly closes within under a second. I need this popup to be accessible by several different buttons with the same panel being used everytime.

The code below should replicate the problem nicely, on my actual application it almost works fine. Even content being updated with the chosen panel of the popup except that it closes after about 1/2 sec when i call .show() from OnClientClick;

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Untitled Page</title>
<script language="javascript" type="text/javascript">
    //Function to Hide ModalPopUp
    function Hidepopup() {
        $find('AjaxPopupHi').hide();
    }
    //Function to Show ModalPopUp
    function Showpopup() {
        $find('AjaxPopupHi').show();
    }

</script>

</head>

<form id="form1" runat="server">

<asp:LinkButton ID="lnk" OnClientClick = "Showpopup()" runat="server" Text="hi"></asp:LinkButton>


<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<br />

<asp:Button ID="Button_dummy" Style="display: none" runat="server" Text="Button" />

<ajaxToolKit:ModalPopupExtender ID="mpe" runat="server" BehaviorID="AjaxPopupHi" TargetControlID="Button_dummy" PopupControlID="pnl"
    CancelControlID="close" />

<!--BELOW panel does not remain OPEN :/-->
<asp:Panel ID="pnl" runat="server" CssClass="popupPanel">
    <div>
        Hi!!!
    </div>
    <asp:Button ID="close" runat="server" Text="Close" />
</asp:Panel>


 </form>

Thanks

Upvotes: 3

Views: 11171

Answers (2)

Bengi Besceli
Bengi Besceli

Reputation: 3748

It is very late but lets hope this helps someone who is looking for the answer.
When you click, a postback occurs and the page reloads. If you use updatepanel then your popup message will remain after page load. See this example below:

Aspx :

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Popup.aspx.cs" Inherits="Popup_example_Popup" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">

        //Function to Hide ModalPopUp
        function Hidepopup() {
            $find('AjaxPopupHi').hide();
        }
        //Function to Show ModalPopUp
        function Showpopup() {
            $find('AjaxPopupHi').show();
        }

    </script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

        <asp:UpdatePanel ID="udpOutterUpdatePanel" runat="server">
            <ContentTemplate>

                <asp:LinkButton ID="lnk" OnClientClick="Showpopup()" runat="server" Text="hi"></asp:LinkButton>

            </ContentTemplate>
        </asp:UpdatePanel>

        <br />

        <asp:Button ID="Button_dummy" Style="display: none" runat="server" Text="Button" />
        <ajaxToolkit:ModalPopupExtender ID="mpe" runat="server" BehaviorID="AjaxPopupHi" TargetControlID="Button_dummy" PopupControlID="pnl"
            CancelControlID="close" />

        <asp:Panel ID="pnl" runat="server" CssClass="popupPanel">
            <div>
                Hi!!!
            </div>

            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>

                    <asp:Button ID="close" runat="server" Text="Close" OnClick="close_Click" />

                </ContentTemplate>
            </asp:UpdatePanel>
        </asp:Panel>


    </form>
</body>
</html>

Code behind :

using System;

public partial class Popup_example_Popup : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void close_Click(object sender, EventArgs e)
    {
        mpe.Hide();
    }
}

Upvotes: 2

शेखर
शेखर

Reputation: 17614

You can use like this

OnClientClick = "return Showpopup()"


function Showpopup() {
    $find('AjaxPopupHi').show();
    return false;
}

You must use return in you OnClientClick combining your code

<asp:LinkButton ID="lnk" OnClientClick = "return Showpopup()" runat="server" Text="hi">  
</asp:LinkButton>

and your javascript function should be like

function Showpopup() {
    $find('AjaxPopupHi').show();
    return false;
}

Upvotes: 7

Related Questions