ASP.Net Button control not firing when i placed in modal popup using jquery

Last Reply on Jun 15, 2012 05:39 AM By Mudassar

Posted on Jun 15, 2012 04:15 AM

i have used jquery modal popup for login. It is not firing when i click button .

below sample  code to check

<div id='basic-modal'>

        
					<a href="webadmin/login/Default.aspx" class="basic">   Login</span></a>
		</div>
		
		<!-- modal content -->
		<div id="basic-modal-content">
			<h3>Company Logo</h3>   
			  <img src='webadmin/login/'  alt="Register" style="cursor: pointer"  class='basic'>  
                            <asp:TextBox ID="txtuname" runat="server"></asp:TextBox>
                            <asp:Label ID="lblerr" runat="server" Text="Label"></asp:Label>  <asp:Button ID="btnLogin"  runat="server" Text="Submit" />
                     
		</div>

		<!-- preload the images -->
		<div style='display:none'>
			<img src='img/basic/x.png' alt='' />
		</div>



 

  protected void btnLogin_Click(object sender, EventArgs e)
    {
        if (TextBox1.Text=="rafi")
        {
            Server.Transfer("default2.aspx");
        }
        else
        {
            lblerr.Text ="Error";
        }
    }

 

Posted on Jun 15, 2012 05:39 AM Modified on on Jun 15, 2012 05:40 AM

ASP.Net Button will not work inside dialog hence you will have to do the following trick.

1. Place the button outside dialog and hide it using style="display:none"

2. Now on the OK Button click of Dialog call the ASP.Net Button Click event.

 

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Untitled Page</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
    <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        $(function () {
            $("#dialog").dialog({
                buttons: {
                    Ok: function () {
                        $("[id*=Button1]").click();
                    }
                }
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="dialog" style="display:none">
    This is a Sample Dialog
    </div>
    <asp:Button ID="Button1" runat="server" Text="Button" style = "display:none" OnClick = "Button1_Click" />
    </form>
</body>
</html>

 

    protected void Button1_Click(object sender, EventArgs e)
    {
        ClientScript.RegisterStartupScript(Page.GetType(), "key", "alert('Button Clicked')", true);
    }