Question

我的网站上有微调器。我有绑定微调器锚点击并检查它包含href属性。它工作正常，我已经对锚定点击进行了一些验证，如果它的通过验证然后回发将发生。我的问题是当它没有通过验证然后spinner正在显示。如果没有通过验证，如何阻止它。

这是我的代码：

我的jQuery：

    var myVar,
        ShowProgress = function () {
            myVar = setTimeout(function () {
                var modal = $('<div />');
                modal.addClass("modal");
                $('body').append(modal);
                var loading = $(".loading");
                loading.show();
                var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
                var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
                loading.css({
                    top: top,
                    left: left
                });
            }, 200);
        };

    $(document).ready(function () {
        $(this.getElementById('form1')).submit(ShowProgress);
        $('a').click(function (evt) {
            var hrf = $(this).attr('href');
            if (hrf != "#" && hrf != "") {
                ShowProgress();
                evt.preventDefault();
                return false;
            }
        });
    });

我的HTML

    function Validate {
        if (!CheckDDL('<%= ddlDepartment.ClientID %>', 'Alert - pls select a department!!!')) {               
            return false;
        }
        if (!CheckDDL('<%= ddlDesignation.ClientID %>', 'Alert - pls select a designation!!!')) {
            return false;
        }
        if (!CheckDDL('<%= ddlType.ClientID %>', 'Alert - pls select type!!!')) {
            return false;
        }
    }

我的HTML ...

 <table>
                <tr>
                    <td style="width: 103px;">Departmnet : <span class="errorStar">*</span>
                    </td>
                    <td>
                        <asp:DropDownList ID="ddlDepartment" runat="server" Width="330px"></asp:DropDownList>
                    </td>
                </tr>
                <tr>
                    <td>Designation : <span class="errorStar">*</span>
                    </td>
                    <td>
                        <asp:DropDownList ID="ddlDesignation" runat="server" Width="330px"></asp:DropDownList>
                    </td>
                </tr>
                <tr>
                    <td>Type : <span class="errorStar">*</span>
                    </td>
                    <td>
                        <asp:DropDownList ID="ddlType" runat="server" OnSelectedIndexChanged="ddlType_SelectedIndexChanged" AutoPostBack="True">
                            <asp:ListItem Value="">[ -- SELECT TYPE -- ]</asp:ListItem>
                            <asp:ListItem Value="Goal">Goal</asp:ListItem>
                            <asp:ListItem Value="Competencies">Competencies</asp:ListItem>
                        </asp:DropDownList>
                    </td>
                </tr>
                <tr>
                    <td>Perspective : <span class="errorStar">*</span>
                    </td>
                    <td>
                        <asp:DropDownList ID="ddlPerspective" runat="server" Width="330px"></asp:DropDownList>
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <asp:Button ID="btnAdd" runat="server" Text="Add" Width="80px" OnClick="btnAdd_Click" OnClientClick="return Validate();" />
                        <asp:Button ID="btnBack1" runat="server" OnClick="btnBack1_Click" Text="Back" Width="80px" />
                    </td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                </tr>
            </table>

Answer 1

如果我理解正确，clearTimeout(myVar)应解决您的问题。

另外：请阅读documentation on jQuery。

<强>更新

以下是您的代码的更新版本：

$(document).ready(function () {
    var progressTimer,
        showProgress = function() {
            progressTimer = setTimeout(function () {
                var modal = $('<div />');
                modal.addClass("modal");
                $('body').append(modal);
                var loading = $(".loading");
                loading.show();
                var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
                var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
                loading.css({ top: top, left: left });
            }, 200);
        },
        hideProgess = function() {
            clearTimeout(progressTimer);
        };

    $('a').click(function () {
        var hrf = $(this).attr('href');
        if (hrf != "#" && hrf != "") {
            showProgress();
        } else {
            hideProgess();
        }
    });

    $("#form1").submit(function (event) {
        showProgress();
    });
});

如何在锚标记单击时发回回来显示微调器

1 个答案: