Develop Reference

Display loading progress modal doesn't hide

I need progress loading message after the SQL select finish executing. I've got a code from the internet but the modal doesn't hide after the loading finish. I need this kind of concept. Is there any code that can help me to make progress loading message after i select a query.. my problem is when i select too much data in SQL there is an eager loading that why i need progress message show that the process of selecting a data is ongoing/rendering from the database.
This is the code from internet now i'm trying to do but there is a bug the modal doesn't hide after loading finish.
<style type="text/css">
.modal
{
position: fixed;
top: 0;
left: 0;
background-color:Black;
z-index: 99;
opacity: 0.8;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
min-height: 100%;
width: 100%;
}
.loading
{
font-family: Arial;
font-size: 10pt;
border: 5px solid #67CFF5;
width: 200px;
height: 100px;
display: none;
position: fixed;
background-color: White;
z-index: 999;
}
</style>
<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);
}
$('form').live("submit", function () {
ShowProgress();
});
</script>

First of all, live is deprecated use 'on' instead.
Next, what happens in your code, is that you append your modal to the body and show it with jquery's show on a submission of a form.
You can notice how there is no code whatsoever that removes/hides your modal. You have a multitude of options to do that. You will either need to obtain your modal when removing or hiding it, or save it in a variable inside of the ShowProgress function:
Remove your modal from the document.
Hide your modal using jquery's hide().
Add or remove CSS classes or styles.
Now, there is a third issue that might be happening: you have no idea when the form is done submitting. Which well... it never is unless you changed something else with some other code. A form submit, by default will do a post request to it's destination. So normally, the user will be redirected and the need for hiding the modal is non-existent.
I don't think it is valuable to show any code examples on how to do this here, as it doesn't seem that you have tried to understand the code you took from the internet. I do believe that this answer is sufficient enough to point you to the right google searchss

How to hide modal after processing is done on page

I have a web page that contains a button. When the button is clicked it calls some code in my code behind that processes. I want to display a "processing" message and a modal to make it so the user has to wait for the processing to be done before they do anything else. I use a javascript function to show the "processing" message and the modal when the button is clicked. When the processing is done the message goes away but the modal stays.
Here's my code:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
function ShowProgress2() {
setTimeout(function () {
var modal = $('<div />');
modal.addClass("modal2");
$('body').append(modal);
var loading2 = $(".loading2");
loading2.show();
var top = Math.max($(window).height() / 2 - loading2[0].offsetHeight / 2, 0);
var left = Math.max($(window).width() / 2 - loading2[0].offsetWidth / 2, 0);
loading2.css({ top: top, left: left });
}, 200);
//$('modal2').modal('hide'); //this does not hide the modal when processing is done
//document.getElementById('modal2').style.display = 'none'; //this does not hide the modal when processing is done
}
</script>
.modal2
{
position: fixed;
top: 0;
left: 0;
background-color: black;
z-index: 99;
opacity: 0.8;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
min-height: 100%;
width: 100%;
}
.loading2
{
font-family: Arial;
font-size: 10pt;
border: 5px solid #67CFF5;
width: 200px;
height: 100px;
display: none;
position: fixed;
background-color: White;
z-index: 999;
}
<asp:Button runat="server" ID="MedicaidDataGenerateBillingFile_Generate" Text="Generate" width="100px" OnClientClick="ShowProgress2();"/>
<div class="loading2" align="center" style="display:none;">
<div style="margin: auto; text-align: center; position: absolute; top: 0px; left: 0px; z-index: 9998; width: 100%; height: 100%; background-color: #fff; filter: alpha(opacity=70); opacity: 0.7;">
<asp:Image ID="Image1" runat="server" ImageUrl="~/Images/activity/roller.gif" /><br />
Generating Billing File...
</div>
</div>
Running this as is when the button is clicked the modal displays and the processing message displays in the middle of the modal. When the processing is finished the processing message goes away but the modal stays visible. I've tried a couple of things that are listed at the end of the javascript function that I have commented out, neither of them work to hide the modal. I need the code to make it so the modal goes away/is hidden at the same time the processing message goes away. If anyone would help me out with what needs to be changed/added to my code to accomplish this I would be grateful, thanks in advance.

You define modal like this:
var modal = $('<div />');
modal.addClass("modal2");
$('body').append(modal);
document.getElementById('modal2').style.display = 'none';
this doesnt work, bc you modal doesn't have any id property, when you created it, only class. Either assign it, or use the class
$('modal2').modal('hide');
It doesn't work, because the class in jQuery should be written with dot $('.modal2');
And if you are not using any plugins for modals, the code should be
$('.modal2').hide();

After doing some additional looking into this I found a solution to getting the modal to hide/go away. I found this bit of code in another page where the similar code is being used and the modal is hidden after the processing is done:
<Triggers>
<asp:PostBackTrigger ControlID ="MedicaidDataGenerateBillingFile_Generate" />
</Triggers>
I included this code in my code and set the ControlID equal to my button ID that is getting clicked and now when the processing is finished the processing message goes away and so does the modal.
I hope this can help someone else.

Asp.net /JQuery to show/hide animated gif before download

I have created a page that shows an animation when it begins a server side operation. The div looks like this:
<div id="loading" style="display: none;">
<img id="loading-image"
src="../../Images/waiting-animation-extra.GIF" alt="Loading..." />
</div>
My client script looks like this
$(document).ready(function () {
$("#btnExportToExcel").click(function () {
$('#loading').show();
});
});
My Css looks like this:
<style type="text/css">
#loading {
width: 100%;
height: 100%;
top: 0px;
left: 0px;
position: fixed;
display: block;
opacity: 0.7;
background-color: #fff;
z-index: 99;
text-align: center;
}
#loading-image {
position: absolute;
top: 40%;
left: 45%;
z-index: 100;
}
</style>
When I click my asp button, the animation starts and the report is prepared. The problem is that I would like to hide the animation when the report is downloaded. However, when the download is done, the .gif just freezes. I have tried ScriptManager.RegisterStartupScript(this, GetType(), "DoHide", "$("#loading").hide();", true); in the code behind at various points but it seems to be affected by this code:
DateTime time = DateTime.Now;
Response.Clear();
Response.AddHeader("content-disposition"
,string.Format("attachment;filename=Equipement Man Game Played {0}.xls"
,time.ToShortDateString()));
Response.ContentType = "application/vnd.xls";
System.IO.StringWriter writer = new System.IO.StringWriter();
System.Web.UI.HtmlTextWriter html = new HtmlTextWriter(writer);
gdvData.RenderControl(html);
Response.Write(writer.ToString());
Response.End();
Response.Write and Repsonse.End stop the .hide(). All I need to do is to show an animation that will be started once the button is clicked and stops once the server-side database work and xls download is done. I am willing to take a different approach.

From asp.net button this will not work as you expecting. You need to call your download using AJAX from regular HTML button and on AJAX success you can hide your div with image.

Why is the overlay covering the new div

I have a link button in an ASP.NET application as below. When i click the link button it calls Javascript function which shows another div file and the overlay. However, in this case, the overlay is appearing OVER the div instead of beneath it. Any guess on what could be wrong? I have copied this from another form which works fine.
<asp:LinkButton Text='<%# Eval("CorrectiveActionName") %>'
OnClientClick='<%# Eval("ProductionID", "return ShowCorrectiveActionDiv({0});") %>'
runat="server" OnClick="lnkbtnCorrectiveAction_Click"
CausesValidation="false" ID="lnkbtnCorrectiveAction">
</asp:LinkButton>
The javascript for ShowCorrectiveActionDiv is
function ShowCorrectiveActionDiv(objectid) {
$("#divCorrectiveActionStatusChild").show();
$(".overlay").show();
var productionIdValue = document.getElementById("ContentPlaceHolder1_hdnProductionDIVID");
productionIdValue.value = objectid;
return true;
}
The CSS for overlay class is
.overlay {
width: 100%;
height: 100%;
position: fixed;
left: 0;
top: 0;
background: #083371;
opacity: 0.5;
filter:alpha(opacity=50);
}
The overlay div in master page is
<div class="overlay" runat="server"></div>

How to show a popup on click of Asp.Net Button click event

I have a popup which displays a message to the user which says their information has been submitted.The popup div's id NewCustomerStatusPopUp,I want this popup to be displayed when the information has been successfully inserted in the database , so how do I call the javascript function to show popup when all the information has been submitted.Can any one just let me know how can I do this.
Here is my popup
<div id="NewCustomerStatusPopUp">
<asp:Label ID="lblStatus" Text="" runat="server"/>
</div>
CSS:
#NewCustomerStatusPopUp
{
position: fixed;
width: 300px;
height: 250px;
top: 50%;
left: 50%;
margin-left:-255px;
margin-top:-150px;
border: 10px solid #9cc3f7;
background-color:White;
padding: 10px;
z-index: 102;
font-family:Verdana;
font-size: 10pt;
border-radius:10px;
-webkit-border-radius:20px;
-moz-border-radius:20px;
}
Any help is much appreciated.
Thanks.

To call a javascript function from server you can use a RegisterStartipScript:
After ur insert query write this code
ClientScript.RegisterStartupScript(GetType(), "id", "callMyJSFunction()", true);
<script type="text/javascript">
function callMyJSFunction()
{
alert("Record inserted sucessfully.");
}

If you've got an click event handler in your code behind performing the insert, no need for JS, wrap the div in a panel:
<asp:Panel ID="pnlStatus" Visible="false" >
<div id="NewCustomerStatusPopUp">
<asp:Label ID="lblStatus" Text="" runat="server"/>
</div>
</asp:Panel>
In your code behind, once you've asserted that the new customer was added successfully,
set pnlStatus to visible.
pnlStatus.Visible = true;