Question

I have some html controls which default display value is none. I have anchor which is showing this form.

Form:

  <div id="login_container">
                    <div id="login_close">
                        <img src="images/close.png" align="close" title="close" />
                    </div>
                    <h2>
                        Login</h2>
                    <h5 id="incorrect_login" runat="server">
                        Username or Password is incorrect</h5>
                    <span>
                        <p>
                            Username:</p>
                        <asp:TextBox ID="txtUserName" runat="server" CssClass="textbox" />
                    </span>
                    <br />
                    <span>
                        <p>
                            Password:</p>
                        <asp:TextBox ID="txtPasswrod" runat="server" CssClass="textbox" TextMode="Password" />
                    </span><span>Remember Me
                        <input type="checkbox" id="chkbRememberMe" class="checkox" runat="server" />
                    </span>
                    <input type="button" class="default_button" id="btnLogin" value="Login" runat="server"
                        onserverclick="btnLogin_Click" />
                    <br />
                    <div id="forgot">
                        <a href="#">Forgot you username?</a>
                        <br />
                        <a href="#">Forgot you password?</a>
                    </div>
                </div>
            </div>

jquery:

  var AnimateLoginShow = function () {
        $('#login_form').css('display', 'none');
        $('#back_drop, #login_container').animate({ 'opacity': '0.3' }, 200, 'linear');
        $('#login_container').animate({ 'opacity': '1.00' }, 0, 'linear');
        $('#login_container').animate({ 'width': '430' }, 150, 'linear');
        $('#login_container').animate({ 'height': '280' }, 150, 'linear');
        $('#login_form').css('display', 'block');
        $('#login_form').animate({ 'opacity': '1.00' }, 300, 'linear');
        $('#back_drop, #login_container').css('display', 'block');
    }

    $('#login').click(function () {
        AnimateLoginShow();
    });

So my problem is that when user clicks login button (on this form) which have code behind this form is Returns to its original state (display:none)

p.s this form is inside ajax update panel

Answer 1

It looks like you need to add script by calling ScriptManager.RegisterStartupScript method to show elements on page:

ScriptManager.RegisterStartupScript(this, this.GetType(), this.ID, "$('#back_drop, #login_container').css('display', 'block');", true);