【问题标题】:How to hide a progress bar in javascript如何在javascript中隐藏进度条
【发布时间】:2015-01-02 17:40:21
【问题描述】:

伙计们,我正在做一个航班预订 API 集成项目。当我单击按钮进度条上的搜索航班时,一切正常。但是我得到的问题是我正在从 javascript 调用进度条,并且当​​页面上出现验证错误时,进度条仍然显示。所以我的问题是如何在我使用 asp.net 服务器验证的页面上出现验证错误时隐藏进度条。

我的 javascript 是这样的:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        function ShowProgress() {
            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);
        }


         function changes() {

             ShowProgress();

         }
    </script>

我在按钮点击时调用它,就像 thsi:

<asp:Button ID="btnSearch" OnClientClick ="changes();"  runat="server" ValidationGroup ="r" Text="Search" Height="40px" 
                Width="134px" onclick="btnSearch_Click" />

我的进度条div是这样的:

<div class="loading" align="center">
        Loading. Please wait.<br />
        <img src="load.gif" style="height:50px; width :50px;" alt="" />
    </div>

【问题讨论】:

  • 嗯,隐藏进度条很容易。我认为您真正的问题是“我如何检测验证失败并采取行动”
  • 是的@Basic,但我也想知道更好的隐藏方法。
  • $(".loading").remove(); 将删除所有具有loading 类的 div。如果你想给它一个更具体的 id,你可以做$("#someId").remove();
  • @basic 如何检查验证
  • 我不确定。我已经很多年没有使用过网络表单了。对不起。

标签: javascript jquery asp.net validation


【解决方案1】:

真的很简单 不需要隐藏进度条。我所做的只有在页面没有验证错误时才显示进度条。为此,我将验证组分配给每个验证控件并将搜索按钮设置为“r”,然后将验证错误检查为:

function changes() {
            if (Page_ClientValidate("r"))
                ShowProgress();


        }

修改了 changes() 函数。谢谢@Basic

【讨论】:

  • 很高兴你把它整理好了 :)
猜你喜欢
  • 2011-06-10
  • 2020-09-04
  • 1970-01-01
  • 1970-01-01
  • 2016-12-26
  • 1970-01-01
  • 1970-01-01
  • 2018-04-02
  • 1970-01-01
相关资源
最近更新 更多