Кнопка входа в JQuery BlockUI - PullRequest
Новая
       8

Кнопка входа в JQuery BlockUI

2 голосов
/ 23 января 2011

Я сделал форму входа в систему, которая невидима, и я использую BlockUI, чтобы показать форму.

Я могу открыть форму и выйти из нее, но когда я нажимаю кнопку «Войти», она не отправляется обратно на сервер.

Есть идеи как сделать постбэк кнопки входа в систему?

Примечание: функция входа в систему работает, так как я попытался разместить ее на самой странице без блокировки и отправляет обратно.

Моя форма входа 

<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>

Мой 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>

Ответы [ 2 ]

7 голосов
/ 23 января 2011

Я думаю, вам нужно добавить логин div обратно в форму. Новый 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') });

             //Add the LoginDiv back to the form.
            $('#LoginDiv').parent().appendTo($("form:first"));
        });
    });
</script>
2 голосов
/ 28 февраля 2013

Это действительно очень помогло мне.У меня была похожая проблема с blockUI, где у меня были кнопки asp.net, которые не отправляли обратно.Предложение awright18 очень помогло. 

<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>

Онклик просто вызывает это: 

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

Мой jquery: 

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

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