Login Button Inside jQuery BlockUI

Question

I made a log in form which is invisible and i'm using BlockUI to show the form.

I can open the form and exit the form but when I click the "Login" button, it doesn't postback to the server.

Any idea on how to make the log in button postback?

Note:the log in function works since I tried to place it on the page itself without blockui and it posts back.

My login form

<div id="LoginDiv" class="LoginDiv">
    <input type="image" id="CloseForm" src="../Images/SiteRelated/CloseForm.jpg" style="float: right;" />
    <div style="display: inline-block; margin-top: 15px">
        Username
    </div>
    <div class="InlineBlock">
        <asp:TextBox ID="UsernameTB" Text="Or" runat="server" Style="width: 90px"></asp:TextBox>
    </div>
    <div style="clear: both;">
    </div>
    <div class="InlineBlock">
        Password
    </div>
    <div class="InlineBlock">
        <asp:TextBox ID="PasswordTB" TextMode="Password" Text="123" runat="server" Style="width: 90px;
            margin-right: 18px"></asp:TextBox>
    </div>
    <asp:Panel ID="Panel1" HorizontalAlign="Center" runat="server">
        <asp:Button ID="LoginBtn" runat="server" Text="Login" Style="width: 150px;" OnClick="LoginBtn_Click" />
    </asp:Panel>
</div>

My Javascript

<script language="javascript" type="text/javascript">
    $(document).ready(function () {
        $('#CloseForm').click(function () {
            $.unblockUI();
        });

        $('#Login').click(function () {
            $.blockUI.defaults.css = {
                padding: 0,
                margin: 0,
                width: '15.8%',
                top: '40%',
                left: '35%',
                textAlign: 'center',
                color: '#000',
                border: '3px solid #aaa',
                backgroundColor: '#fff',
                cursor: 'wait'
            };
            $.blockUI({ message: $('#LoginDiv') });
        });
    });
</script>

Answer 1

I think you need to append login div back to the form. The new javascript would look like this.

<script language="javascript" type="text/javascript">
    $(document).ready(function () {
        $('#CloseForm').click(function () {
            $.unblockUI();
        });

        $('#Login').click(function () {
            $.blockUI.defaults.css = {
                padding: 0,
                margin: 0,
                width: '15.8%',
                top: '40%',
                left: '35%',
                textAlign: 'center',
                color: '#000',
                border: '3px solid #aaa',
                backgroundColor: '#fff',
                cursor: 'wait'
            };
            $.blockUI({ message: $('#LoginDiv') });

             //Add the LoginDiv back to the form.
            $('#LoginDiv').parent().appendTo($("form:first"));
        });
    });
</script>

Answer 2

This really helped me a lot. I had a similar issue with blockUI where I had an asp.net buttons that wouldn't postback. The suggestion by awright18 helped a lot.

<div id="taxStatus" style="display:none;">
<br />
     <div class="row">
        <div class="three columns"><asp:Button runat="server" ID="unitedStatesTaxStatusButton" Text="United States" CssClass="submitButton" OnClick="unitedStatesTaxStatusButton_Click" /></div>
        <div class="three columns"></div>
         <div class="six columns"></div>
    </div>
    <br /><br />

 </div>   

The onclick just calls this:

protected void unitedStatesTaxStatusButton_Click(object sender, EventArgs e)
    {
        //do whatever
    }

My jquery:

$(document).ready(function () {
        $('#<%=unitedStatesTaxStatusButton.ClientID%>').click(function () {
            $.unblockUI();

            //**  added this line to make it work ******
            $('#taxStatus').parent().appendTo($("form:first"));
            return true;
        });