Jquery Dialog不会立即等待用户输入和服务器端事件触发

时间:2013-02-20 10:16:21

标签: jquery asp.net jquery-ui

我有GirdViewGirdview内有Checkbox列。 Checkbox AutoPostback属性设置为TRUE,因为我正在对Checkbox checked州进行一些数据库工作。现在我用javascript confirm Jquery替换普通的DialogBox框。问题是当用户check出现checkbox对话框时,用户必须确认是否确保他们想要检查复选框,如果他们按yse然后复选框被选中然后我想要服务器端事件t fire。相反,当用户检查复选框和服务器端事件触发然后出现对话框时,即使他们按NO,数据库已经更新为YES,也会发生这种情况。

这是我的代码。

HTML

<asp:GridView ID="gvOrders" runat="server" AutoGenerateColumns="false"
CssClass="gvClickCollectOrders" DataKeyNames="OrderId" OnRowDataBound="gvOrders_RowDataBound"
AllowPaging="true" OnPageIndexChanging="gvOrders_PageIndexChanging">
    <Columns>
        <asp:BoundField DataField="OrderId" Visible="false" />
        <asp:BoundField DataField="OrderNumber" HeaderText="Order No" DataFormatString="WWW {0}"
        />
        <asp:TemplateField HeaderText="Order Date">
            <ItemTemplate>
                <asp:Label ID="orderDateText" Text="" runat="server"></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Order Ship Date">
            <ItemTemplate>
                <asp:HyperLink ID="orderShipDateAndTrackingData" CssClass="trackingInfo"
                runat="server" Target="_blank" Text="" NavigateUrl=""></asp:HyperLink>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Customer Name">
            <ItemTemplate>
                <%# Eval( "BillToFirstName") %>&nbsp;
                    <%# Eval( "BillToLastName") %>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Received In Store">
            <ItemTemplate>
                <asp:CheckBox ID="cbIsReceived" runat="server" AutoPostBack="true" Checked='<%# MWClickAndCollectHelper.CheckOrderReceivedStatus(AlwaysConvert.ToInt(Eval("OrderId"))) %>'
                OnCheckedChanged="cbIsReceived_CheckedChanged" CssClass="isReceivedCheckBox"
                />
                <asp:Label ID="receivedDateText" Text="" runat="server"></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Collected By Customer">
            <ItemTemplate>
                <asp:CheckBox ID="cbIsCollected" runat="server" AutoPostBack="true" Checked='<%# MWClickAndCollectHelper.CheckOrderCollectedStatus(AlwaysConvert.ToInt(Eval("OrderId"))) %>'
                OnCheckedChanged="cbIsCollected_CheckedChanged" CssClass="isCollectedCheckBox"
                />
                <asp:Label ID="collectedDateText" Text="" runat="server"></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
    <EmptyDataTemplate>
        <asp:Label ID="emptyGrid" runat="server" Text="There are no 'Click and Collect' orders placed for this store."
        CssClass="emptyGridMessage"></asp:Label>
    </EmptyDataTemplate>
</asp:GridView>

的Jquery

< script type = "text/javascript" >

var isReceivedCheckBox = $('.isReceivedCheckBox input[type=checkbox]');
var isCollectedCheckBox = $('.isCollectedCheckBox input[type=checkbox]');
var def = $.Deferred();

function confirmDialog(msg) {
    var dialog = $("<div id=\"dialog\">" + msg + "</div>");
    $(dialog).dialog({
        autoOpen: true,
        width: 300,
        height: 200,
        resizable: false,
        modal: false,
        buttons: {
            'Yes': function () {
                def.resolve();
                $(this).dialog("close");
            },
                'No': function () {
                def.reject();
                $(this).dialog("close");
            }
        },
        close: function () {
            $(this).remove();
        }
    });
    return def.promise();
}

$(function () {
    $(isReceivedCheckBox).on("change", function () {
        var checked = this.checked;
        var checkbox = this;
        if (checked) {
            confirmDialog("are your sure you want to check this checkbox?").done(function () {
                checkbox.checked = true;
            })
                .fail(function () {
                checkbox.checked = false;
            });
        } else {
            confirmDialog("are your sure you want to uncheck this checkbox?").done(function () {
                checkbox.checked = false;
            })
                .fail(function () {
                checkbox.checked = true;
            });
        }
    });
}); < /script>

1 个答案:

答案 0 :(得分:1)

不确定是否有其他方法,但您可以手动进行回发。 设置AutoPostBack = false并使用__doPostBack函数。

www.ilearnttoday.com/tag/how-to-use-__dopostback