- Home
- Forum
- ASP.NET Web Forms (Classic)
- Cannot get Waiting popup to appear on Button Click
Cannot get Waiting popup to appear on Button Click
- Jun 29, 2021 06:44 PM UTC
- Jul 20, 2021 06:14 AM UTC
I have looked at your Documentation on Waiting Popup and several forum questions regarding my issue, but I cannot get Waiting Popup to Show after a Button Click.
I have a button that if clicked, creates a PDF (based on a grid selection, one PDF could be created or several PDF's could be created). Once the PDF(s) are created, I show a Dialog stating the PDF's have been created successfully.
While the server is working to create the PDF, I would like to show a Waiting Popup stating the PDF's are being created and greying out the web page so the user cannot do anything until the Dialog pops up to say the PDF's are created successfully.
Below is my ASPX code for the button and the Code Behind for my button click. How can I get the Waiting Popup to appear in the center of the screen and prevent the user from doing anything on the page until the Waiting Popup disappears and my Dialog comes up stating the files have been created.
I've tried the getData() example from the forums. Examples in the Documentation for Waiting Popup, but I cannot get it to work.
I do not care if the popup is generated in Code Behind or Client Side. I just want the Waiting Popup to appear when the user clicks the button to create PDF's. And right before I set my Dialog.ShowOnInit = true, I would like to have the Waiting Popup disappear and the user can then close the Dialog.
Thank you.
protected void PDF_Click(object sender, EventArgs e) { try { bool reportCreated = false; if (chkIndividualReports.Checked == false) { if (chkDisplayPictures.Checked == true) { reportCreated = PDF_CreateSingleContinuousReport(); } else { reportCreated = PDF_CreateSingleContinuousReportWithoutPhotos(); } } else { int numOfRecords = EmailSelectedResults.Count(); if (chkDisplayPictures.Checked == true) { foreach (var item in EmailSelectedResults) { reportCreated = PDF_CreateIndividualReport(item, numOfRecords); } } else { foreach (var item in EmailSelectedResults) { reportCreated = PDF_CreateIndividualReportWithoutPhotos(item.Batch.ToString(), numOfRecords); } } } } catch (Exception ex) { Log.Error("Dashboard -> VeneerEmail -> PDF_Click() ERROR: {0}", ex.ToString()); } }
ASPX<div style="padding-left: 10px; padding-top: 15px; padding-right: 1%; width: 97%; box-sizing: border-box" ><asp:Button CssClass="fsSubmitButton" ID="btnPDF" Text="PDF" runat="server" OnClick="PDF_Click" /></div>
|
<div ID="target">
<ej:WaitingPopup ID="target" runat="server" ShowOnInit="false" Target="#target" ></ej:WaitingPopup>
</div>
<div id="buttons" style="display:inline-block">
<asp:Button ID="button1" runat="server" OnClick="button1_Click" Text="Show Popup"/>
<asp:Button ID="button2" runat="server" OnClick="button2_Click" Text="Hide Popup"/>
</div>
|
|
protected void button1_Click(object sender, EventArgs e)
{
this.target.ShowOnInit = true;
}
protected void button2_Click(object sender, EventArgs e)
{
this.target.ShowOnInit = false;
} |
I cannot seem to get the this.target.ShowOnInit = true; to run. If I start the <ej:WaitingPopup> tag's ShowOnInit=true then the page loads with the WaitingPopup running. I click the button and when my PDF's are completed, the WaitingPopup disappears and my Dialog appears. I just am unable to get the this.target.ShowOnInit = true; to fire in my Code Behind.
Any Suggestions? I am using your example to see if I can reproduce the error by having other method calls on button click to see if that is causing my problems in my application.
Thanks.
I think I determined the culprit. If you set this.target.ShowOnInit = true; within the button click event and then call another method, it does not work. You have to remain within the method to have ShowOnInit to work. I proved this by updating your demo that you sent me. I simply added a method called Waiting() and did a Thread.Sleep for 5 seconds and it does not allow the Waiting Popup to appear.
I think I can get around this issue, but if you have any suggestions, I would greatly appreciate it.
My idea did not work. So, in essence, if you call the button click event and set this.target.ShowOnInit = true; it will not work until you come out of that event handler.
So, my question is, how can I have a WaitingPopup appear when the user clicks a button which creates PDF(s) which could take 20 seconds to a couple of minutes?
Thank you.
Your example shows exactly the issue I have encountered. What I would expect from a waiting popup is once I click the button, I get the waiting popup immediately and then wait 20 seconds. I want the popup to appear immediately after the button is clicked so I can show the user that the computer is working, please stand by. As it is now, I click the button, wait 20 seconds, and then the waiting popup appears. That isn't useful.
In my real world scenario, I call several methods that can create several PDF's which could include some images that are quite large. So, while the computer is working behind the scenes creating the PDF, I would like the user to see a waiting popup while the PDF's are being created.
How can I achieve this? So, if you take the example you sent me, please show me how I can click the button, immediately show the waiting popup, then after 20 seconds hide the waiting popup and then show a message dialog box saying "All Done." Can this be done?
Any help would be greatly appreciated as I have exhausted all my ideas to get it to work.
We have checked with your queries regarding Waiting Popup.
|
protected void click(object sender, EventArgs e)
{
this.target.ShowOnInit = true;
success();
} |
|
protected void success()
{
ClientScript.RegisterStartupScript(GetType(), "Javascript", "javascript:hidePopup(); ", true);
} |
|
<script>
function hidePopup() {
setTimeout(function () {
var obj = $("#<%=target.ClientID%>").data("ejWaitingPopup");
obj.hide();
// you can show required alert message here;
}, 3000);
}
</script> |
I don't believe I am conveying my problem very well, because the same issue is still present. I cannot show a WaitingPopup AND call other methods at the same time. The 5 seconds I am sleeping in the program is simply test code to simulate what I am trying to accomplish.
So, we have the event handler "click". What I want to do is after calling success() method, I want to call other methods to create one or more PDF's. While the program is creating the PDF(s), I want a WaitingPopup to be displayed to let the user know that the PDF(s) are being created.
The problem is still the same. I cannot call other methods and have the WaitingPopup appear simultaneously. So, if we look at the code below, you can see that when the click event is run, following the success() method, comes 2 more methods that need to run. I would like the WaitingPopup to be displayed while the other 2 methods run. For testing purposes, I have simply used a Thread.Sleep(5) in each method to act as if lots of work is being done. However, the WaitingPopup does not appear until after the CreatePDFandDownloadToUsersDownloadFolder() has completed. That does not let the user know to "stand by" while the other methods are finishing up their work.
The question is, how can I show the WaitingPopup while 2 more methods are being performed? As it is now, the WaitingPopup will not appear until after all methods in the click event have executed.
protected void click(object sender, EventArgs e){this.target.ShowOnInit = true;success();//The Waiting Popup should be shown to user while the next 2 methods are being completed.//For testing purposes, instead of getting Images and Creating a PDF, I simply Sleep for (5) seconds.//But while the program is in Sleep mode, the Waiting Popup should be spinning while letting the user//know that the PDFs are being created.GetImagesForPDF(); //This could take 10 seconds to completeCreatePDFandDownloadToUsersDownloadFolder(); //This method could take up to 20 seconds to complete}
|
protected void click(object sender, EventArgs e)
{
this.target.ShowOnInit = true;
getImagesAndPdf();
success();
}
protected void getImagesAndPdf()
{
Thread.Sleep(1000);
}
protected void success()
{
ClientScript.RegisterStartupScript(GetType(), "Javascript", "javascript:hidePopup(); ", true);
} |
I believe we are getting somewhere now. So, take the code in getImagesAndPdf() method and change Thread.Sleep(1000) to Thread.Sleep(9000).
When you run the code, you will see that when you press the ejButton, you will have to wait 9 seconds before you see the WaitingPopup.
With the Thread.Sleep(9000) code in place, how can I get the WaitingPopup to appear immediately after you click ejButton?
Because the 9 second wait is actually what the user will experience when I try to create my PDF(s). I want to inform the user that the program is working on creating their PDF and that they need to wait a few seconds.
|
<div id="buttons" style="display:inline-block">
<ej:Button ID="button" runat="server" OnClick="click" Text="EjButton" ClientSideOnClick="showPopup"></ej:Button>
</div>
<script>
function showPopup() {
var obj = $("#<%=target.ClientID%>").data("ejWaitingPopup");
obj.show();
}
</script> |
Thank you. I apologize if I wasn't more clear in my explanations. But this is exactly what I needed. I just changed the hidePopup() script time from 3000 to 0 and it worked perfectly.
Thanks again.
- 13 Replies
- 3 Participants
-
DP Don Pierce
- Jun 29, 2021 06:44 PM UTC
- Jul 20, 2021 06:14 AM UTC
