Question

I have a login FORM inside a Hidden DIV, this DIV is hidden using CSS display:none; when I click on some other DIV, I show this DIV using jquery .slideDown(), so I can be able to use this form.

When I click on the button, the OnClick="Login" doesn’t seem to work,and when I removed this form from this hidden div to simply another place in the body, it worked. What’s the problem?

ASP.NET:

<div id="userCPContainer">
<form id="loginForm" runat="server">
    <asp:Label ID="Label1" runat="server" Text="Username" class="loginLabels"></asp:Label>
    <br />
    <asp:TextBox ID="usernameField" runat="server" MaxLength="50" class="loginFields"></asp:TextBox>
    <asp:Label ID="Label2" runat="server" Text="Password" class="loginLabels"></asp:Label>
    <br />
    <asp:TextBox ID="passwordField" runat="server" MaxLength="50" 
        TextMode="Password" class="loginFields"></asp:TextBox>


    <asp:Button ID="loginButton" runat="server" Text="Log in" onclick="Loginn" class="loginButton"/>
</form>
</div>

JQUERY:

function showUserCP() {

    $("#userCPContainer").slideDown(200);
    $(".userCPDiv").css("background-color", "#000000");
    $(".userCPDiv").css("border-color", "#000000");
}

function hideUserCP() {
    $(".userCPDiv").css("background-color", "rgb(43, 147, 206)");
    $(".userCPDiv").css("border-color", "rgb(43, 147, 206)");
    $("#userCPContainer").slideUp(200);

}

$(".userCPDiv").click(function (e) {
        //Either way, hide Main Menu
        hideMainMenu();
        if ($("#userCPContainer").is(":visible")) {
            hideUserCP();
        }
        else {
            showUserCP();
        }
        e.stopPropagation();

    });

CSS:

#userCPContainer
{
    overflow:hidden;
    border-style:solid;
    border-top-style:none;
    border-color:rgb(43,147,206);
    border-width:2px;
    position:absolute;
    right:0px;
    top:0px;
    display:none;
    z-index:1;
    width:300px;
    background-color:  #000000;
}

Nothing really complicated…

Answer 1

When you use CSS display: none; the problem is that all that’s inside that DIV gets removed completely from the HTML Document and that causes that ASP.NET does not recognize this element when you show it via jQuery. I see to possible solutions:

1. Use visibility: hidden instead of display: none;, if you do this you will probably have some problems with the DIV height because it will take the space needed to render but it will not be visible.
2. Use a ScriptManager and an UpdatePanel and put the div and the form inside those elements, so the server will know when you render the Button in the client. Also, make sure that you register your jQuery scripts inside the ScriptManager

Hope this helps you