单击asp按钮显示加载面板 [英] Show loading panel on click of asp button
问题描述
我有一个asp按钮，在该按钮上我正在验证一些数据，然后触发其服务器端功能，看起来像这样
I have my asp button on which I am validating some data and then firing its server side function it is working fine it looks like this
<asp:Button CssClass="btnRequestFile" ID="btnSave" runat="server" Text="Request"
OnClientClick="if(clientValidate() == false) return false;" OnClick="btnSave_Click" />
因此，在我的客户端功能上，我想显示一个加载面板，但是直到发出警报后，加载面板才出现:
So on my client side function I want to show a loading panel but the loading panel does not appear until there is some alert being fired here is my code:
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放置在标记中，只是将其显示为加载，但没有任何建议可以实现.
I am using jquery.loading.min.js to show the loading panel it is not working also I have tried to place a div in markup and just show hide it as a loading but to no avail any suggestion how it could be done.
推荐答案
<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正文会隐藏面板
- 你微笑，因为你幸福.
- The loading panel is visible at the beginning (while the page is initializing)
- After first initialization,
document.onload=hide_loading_div();code hides the panel. - When you clicked the Asp button, JS code is triggered at first, and shows the panel again. Then C# code runs and does something at the background for a while.
- After postback is completed, html body hides the panel because you write
<body onload="hide_loading_div()"> - You smile, because you are happy.
注意:如果只想使用面板加载div来阻止页面的一部分，则容器div(将缩小")必须具有"position:relative;".属性和阻止者div必须具有"position:absolute"属性(不固定).
Note: If you want to block only a part of the page with a panel like loading div, the container div -which will 'dim out'- must have `position:relative;' attribute and the blocker div must have 'position:absolute' attribute (not fixed).
这篇关于单击asp按钮显示加载面板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
