单击asp按钮显示加载面板

时间:2011-12-19 06:22:53

标签: javascript jquery jquery-plugins javascript-events

我有我的asp按钮,我正在验证一些数据然后启动它的服务器端功能它工作正常它看起来像这样

<asp:Button CssClass="btnRequestFile" ID="btnSave" runat="server" Text="Request"
                            OnClientClick="if(clientValidate() == false) return false;" OnClick="btnSave_Click" />

所以在我的客户端功能上我想显示一个加载面板但是加载面板不会出现,直到这里有一些警报被触发是我的代码

function clientValidate() {
    // $("#IDData").html('');
    $.loading({ align: 'center', delay: 0, img: '../common/Content/images/shared/sq_loader_3.gif', onAjax: false, pulse: false });
    $("#divLoadingImg").show();
    alert("dfhdfh");
    var isValid = false;
    var objectData = null;

    var liTags = $('#' + secondContainer).find('li');
    if (liTags.length == 0) {
        alert('Please select at least one question !');
    }
    else {
        if (SaveConfiguration()) {
            //alert('error occurred');
        }
        else {
            //alert('error free');

            isValid = true;
        }
    }

    $("#divLoadingImg").hide();
    $.loading(false);
    return isValid;
}

我正在使用jquery.loading.min.js来显示加载面板它不起作用我也试图在标记中放置一个div并且只显示隐藏它作为加载但是没有任何建议如何它可能是完成。

2 个答案:

答案 0 :(得分:0)

 <head>
        <script type="text/javascript">

        document.onload=hide_loading_div();

        function show_loading_div(){
          var my_loading_div = document.getElementById('the_loading_div');
          my_loading_div.style.visibility = 'visible';
        }

        function hide_loading_div(){
          var my_loading_div = document.getElementById('the_loading_div');
          my_loading_div.style.visibility = 'hidden';
        }
    </script>

    <style type="text/css">

        .class_of_the_loading_div{
            position:fixed;
            width:100%;
            height:100%;
            top:0;
            left:0;
            background-color: rgba(0,0,0,0.75);
            text-align:center;           
        }
    </style>


</head>

<body onload="hide_loading_div()">

   Some elements, grids, buttons etc..

   <asp:Button ID="btn_something" runat="server" Text="A Button" OnClientClick="show_loading_div()" OnClick="btn_something_Click" />

  <div class="class_of_the_loading_div">
    Write here LOADING or put a loading gif...
  </div>
</body>

说明:

  • 加载面板在开头可见(页面正在初始化时)
  • 首次初始化后,document.onload=hide_loading_div();代码会隐藏面板。
  • 当您单击Asp按钮时,首先触发JS代码,然后再次显示该面板。然后C#代码运行并在后台执行一段时间。
  • 回发完成后,由于您编写了<body onload="hide_loading_div()">
  • ,html正文会隐藏该面板
  • 你笑了,因为你很开心。

注意:如果你只想用一个像加载div这样的面板来阻止页面的一部分,那么容器div - 它将会变暗 - 必须有`position:relative;&#39;属性和阻止div必须具有以下位置:绝对&#39;属性(不固定)。

答案 1 :(得分:-1)

放置潜水“sonu”并给它一些身份

并在jquery中写;

<script type="text/javascript">
    $(document).ready(function () {
$("#div1").hide();
function clientValidate() {

$("#div1").show("slow");
});
});
</script>

将你的loding gif放入潜水中