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.
Related
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
I'd like to link an iframe to a button so I can open the below iframe (iframe/ model window) from clicking on the "keep me posted" button on my site: http://www.aphealthnetwork.com.
iframe code:
<iframe width='810px' height='770px' src='https://recruit.zoho.com/recruit/WebFormServeServlet?rid=36a8431719e8992d52d2a3fd6413be1b174be02b570ad6d6d795388ce21476a8gid4b981a4b826d7e00d977121adb371cbfd816dda10dd585759e7046fd7a75b6a2'></iframe>
code for the button:
<div class="buttons">Keep Me Posted! or learn more</div>
I've been searching and searching and can't find the answer anywhere.
Not sure what the end goal is exactly, but if you want to show that iframe in a modal when you click on the button, you could put the iframe in an element for the modal, hide that by default, then show the modal when you click the button. I also added a link to close the model. You might want to adjust the height/width of the modal to fit your needs, too. Or let me know what the end goal is and I can help out with that.
$('.buttons a').on('click',function(e) {
if ($(window).width() > 820) {
e.preventDefault();
$('#modal').show();
}
});
$('.close').on('click',function(e) {
e.preventDefault();
$('#modal').hide();
})
#modal {
display: none;
background: rgba(0,0,0,0.5);
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
iframe {
position: absolute;
top: 1em; left: 50%;
transform: translate(-50%,0);
}
.close {
position: absolute;
top: 1em; right: 1em;
background: black;
color: white;
padding: .5em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="buttons">Keep Me Posted! or learn more</div>
<div id="modal">
<a class="close" href="#">close</a>
<iframe width='810px' height='770px' src='https://recruit.zoho.com/recruit/WebFormServeServlet?rid=36a8431719e8992d52d2a3fd6413be1b174be02b570ad6d6d795388ce21476a8gid4b981a4b826d7e00d977121adb371cbfd816dda10dd585759e7046fd7a75b6a2'></iframe>
</div>
Just use <input type='button' class='buttons' id='kmp' value='Keep Me Posted' /> or something similar instead... then you could make an output Element <iframe id='output'></iframe> and do this, using jQuery:
$(function(){
$('#kmp').click(function(){
$('#output').css('display', 'block').attr('src', 'https://recruit.zoho.com/recruit/WebFormServeServlet?rid=36a8431719e8992d52d2a3fd6413be1b174be02b570ad6d6d795388ce21476a8gid4b981a4b826d7e00d977121adb371cbfd816dda10dd585759e7046fd7a75b6a2');
}
}
You also need to make sure that src is a full document as well. I see that it's not. I threw in that .css('display', 'block') in case you want to start your CSS with #output{display:none;}.
What do you exactly want?
For responsive modal look here
If you want to display the modal content a similar question is here
If you want to only display the iframe use jquery.
Or look at Display website in modal
CSS:
<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>
JS:
<script type="text/javascript">
function ShowProgress() {
// alert("aa");
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);
}
</script>
HTML:
<div class="loading" align="center" id="loader">
Loading. Please wait.
<br />
<img id="abc" src="../../Images/loader.gif" alt="" />
</div>
<div>
<asp:UpdatePanel ID="UpdatePaneltab" runat="server" UpdateMode="Always">
<ContentTemplate>
<asp:Button ID="btnSearch" runat="server" Text="Run" CssClass="btn-in" OnClick="btnSearch_Click" OnClientClick="ShowProgress()" />
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="btnSearch" />
</Triggers>
</asp:UpdatePanel>
I am using above code to show loading image div on button click.But i am not able to hide it wherever i want to inside button click code.It automatically gets hidden after all the button click code is executed.I have exporttoexcel functionality and i want to hide it before my this functionality starts executing because once the exporting starts there is no control over the page and code.But the loading image continuously displays even when the exporting is done.
currently i am using
ClientScript.RegisterStartupScript(this.GetType(), "hwa", "document.getElementById('loader').style.visibility = 'hidden';", true);
to hide div.
I am not able to find out whats the issue.Is there something i am missing which i need to add in code.
Any suggestions ? any ideas?
Please helpme.I am stuck.
You should put write a javascript function in a javascript file or in your aspx file.
function HideLoader() {
$(".loading").hide();
$(".modal").hide();
}
Then you should call this function in your startup script:
ClientScript.RegisterStartupScript(this.GetType(), "hwa", "HideLoader();", true);
Since the output of RegisterStartupScript is written into the page after the page is loaded, the inline script isn't executed.
Edit:
You should probably hide both the .modal div and the .loading div. I changed the javascript. You should put a breakpoint to HideLoader javascript function and see if it gets called. If it gets called and it doesn't hide the div, then you will have an easier time to solve the problem. Just correct the js function to hide the loading divs. If it doesn't get called, you should focus on RegisterStartupScript and see how you can make it call your function.
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.
I have an HTML page and unfortunatly I don't know much about it. In my HTML page there is a simple button that redirect to another website. What I would like to do is to show a popup that advise the user that he is moving to another site. If he accepts so he is redirected, if not then he stays in page.
I've made a graphic for all the process described before and it is a simple gif animated. what I wanna do is this:
The user click on the button
the gif animated pop up (and all the background is unclickable with a dark color if it's possible to do)
after 2 seconds the alert pop up next to the gif.
I've an example of what I wanna do. http://imgur.com/8dAf3Xp
Try this sample i created in js fiddle
fiddle
I use 2 overlapping divs to achieved this, wait 2 seconds and the pop-out will automatically show.
Hope this helps :)
HTML
<div id = "pop-out">
<div id = "message">
Message goes here
<button class = "ok"> Ok </button>
</div>
</div>
<div id = "container">
Content goes here
<button>You can't click me</button>
</div>
CSS
div#pop-out {
position: absolute;
top: 0;
left: 0;
background-color: rgba(255,255,255,.2);
width: 100%;
height: 100%;
z-index: 1;
display: none;
}
div#message {
width: 50%;
height: 100px;
margin: 0 auto;
border: 1px solid red;
text-align: center;
line-height: 100px;
}
jQuery
$(document).ready(function(){
setTimeout(function(){
$("#pop-out").show();
},2000);
$("button.ok").click(function(){
$("#pop-out").hide();
});
});