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;
}
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>
EXPLANATION:
- 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.
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).
place a dive ther "sonu" and give it some id
and in jquery write;
<script type="text/javascript">
$(document).ready(function () {
$("#div1").hide();
function clientValidate() {
$("#div1").show("slow");
});
});
</script>
place your loding gif in the dive
