I've read many posts on this site, as well as MSDN, but can't quite find the solution I'm looking for. Here is my situation: I have a page that allows users to "upload" a file. The page includes an asp.net fileUpload control. However, all it does is send the byte array to a WSE 2.0 web service. I can't change this. This may be updated in the future, but for now, this is what I have to go with.
The page has an animated gif that starts when the user clicks the submit button. And the page should be updated accordingly based on the result returned by the web service call. I'm able to start the gif and consume the WS successfully. However, while the page is hitting the web service, the gif file freezes.
I then tried to use a separate thread to consume the web service. This speeds up the process and does not freeze the gif, but the page is not updated when the web service completes. If I put the main thread to sleep, the page updates, but I'm back to the same issue mentioned above, where the gif freezes.
I'm pretty sure I could make the call using javascript and update the page that way, but at this point, I'd really rather do it server side (out of stubbornness if nothing else).
Can someone point me in the right direction? Thanks in advance.
This has happened to me as well. I've managed to fix this by wrapping the img tag inside a div and just showing / hiding the div via JavaScript using the setTimeout function. The GIF won't freeze this way.
Example:
<script type="text/javascript">
function showLoadingIco() {
setTimeout(showLoadingGif, 50);
}
function showLoadingGif() {
// Using jQuery
$('#myDiv').css('display', 'inline');
}
</script>
Note that your HTML code must look like this:
<div id="myDiv" style="display:none">
<img src="loading.gif" alt="Loading..." />
</div>
The Upload File control doesn't work well with Update Panels, so my guess is that you're running into a full postback, which is why the image stops spinning. If you're not using an Update Panel (or some other Ajax platform), you're almost definitely having a post back.
It's not too tough to pull off asynchronously with JQuery though. Check out this link for an example.
Related
I'm working on tracking down an elusive bug in IE11 and Edge. I've noticed a difference in the network calls between Chrome and Edge, and I'm not sure if that's just a difference between the way the browsers' dev tools display traffic or if it's indicative that something is actually happening in Edge that isn't in Chrome.
The following screenshot is from dev tools in Edge, recorded during page load.
It looks like some request to the server is not considered authenticated, so it's being redirected to the login page. The same page load sequence in Chrome does not show that - it just has the one page request. My first question is - is there a way to track down which thing is making that particular request using the Edge dev tools? Or is this something I need to worry about at all, if it's expected behavior?
Some background on the bug I'm trying to resolve
The page uses UpdatePanels and jQuery ajax both to make requests to the server. The relevant jQuery ajax calls are made in click events triggered on objects inside the update panels. I've verified that those click events aren't triggering a postback. The click handlers seem to be executing just fine (most of the time), but the bug is that sometimes they don't seem to be executed at all - none of my console.log statements appear in the console, and nothing happens (except the page jumps a little) until you click again. Every other click seems to work. It seems to happen when there is a lot of data loaded on the page (note the load time for the first request in dev tools).
I've made sure to rebind the click events that are on the objects inside the update panels after each update panel postback using
Sys.WebForms.PageRequestManager.getInstance().add_endRequest
The site uses forms authentication. There is just one server on the site I'm testing on - no load balancer involved.
Also - before anyone suggests it - we are trying to move away from the update panels, but we're not quite ready to retire this page which relies heavily on them. That would be my preferred solution, too :)
You mention that the webpage concerned is large.
Because of this, the JavaScript onload will not always have been completed yet when you do a quick first click on such a clientside hyperlink/button, which means that a regular http GET request gets triggered, which you see in the developer tools.
You will also see this in other browsers.
Try to find a way to disable these clientside hyperlinks/buttons before the onload has finished.
You could disable them initially via:
<a class="clientsideButton" href="#" onclick="javascript:return false">click here</a>
And enable them afterwards.
Don't forget to also re-bind them again after a partial postback!
<script>
$(function() {
$(".clientsideButton").on("click",
function() {
// Make AJAX request.
});
});
</script>
I am working on ASP.Net project and Ajax (UpdatePanels and UpdateProgess)
Everything works fine. When I click on a button in order to refresh a drop down list for example, I see progress image in UpdateProgress control.
But, what I have a problem for the first page loading:
I need to display the page content quickly and then feed all dropdowns from database with a progress image animation.
It is hard to do because the first page loading is slow because everything is done in page load.
Anyone have a solution to this?
Thanks
There really isn't much you can do about first page load, because your code has not yet been compiled to be able to run, and show your progress dialog yet. It's a catch-22.
The best you can do is use a warmup tool to try and keep the app domain loaded.
I have a page I'm working on and it works correctly in the sense that I press a button and it executes a stored procedure. The problem is the stored procedure takes awhile to complete, and I want the user to know that there is progress being made and that it's not stuck. So is there a good method to give the user some idea of the progress being made? I was going to just simply display an animated gif, but not sure how to do this. Or if there is a more preferred way to do this I'm all ears. Thanks!
Generally it is a bad idea to have a website command take time, but when you have to Microsoft have an Ajax library which works with ASP.Net - this includes a Progress bar control which can appear when you are doing a long task
The site for the ASP.Net Ajax can be found here; http://www.asp.net/ajax
The Ajax Control Toolkit which includes the progress indicator is here; http://www.asp.net/ajaxlibrary/act.ashx
If you do an AJAX call you can use jQuery to show a loading graphic. See this post How to show loading spinner in jQuery?
Yes, you can definitely use an animated .gif to display to the user while the stored procedure is executing. You'll want to use ASP.NET AJAX to accomplish this, specifically using UpdatePanel and UpdateProgress controls.
View the following URL which guides you on implementing the UpdateProgress control: http://www.asp.net/AJAX/Documentation/Live/mref/T_System_Web_UI_UpdateProgress.aspx
The section on "Specifying the Content of the UpdateProgress Control" talks about using the ProgressTemplate to show an animated image that notifies the user of the progress on the page.
--Tyler
In my ASP.Net application I have a requirement that when a user clicks on an UI element we generate a PDF for them which they can download. This is currently implemented by doing a form post to an ashx page. This page essentially inspects the form and then executes the correct server side page which either results in HTML or a PDF document of that pages HTML.
On the client I know ahead of time if we are going to be getting a PDF or HTML, when its an HTML I open a new window and direct the form post to that window and all works well. When its a PDF I don't change the target for the form and it remains on the current page.
This works, the user is presented with a save dialog, and the current page is not changed or lost.
The problem I have is that generating the PDF takes anywhere from 1-15 seconds. What I want to do is popup a please wait dialog. Displaying the popup is going to be easy, what I am not sure of is how do I know to close the popup? The popup will be a div in the current page.
The popup can have a client side timer which polls the server for task completion. The long running server task should update the progress in a database table or a server cache object which can be accessed by the polling service.
Couple of old articles from MSDN magazine. You should be able to use the same concepts with newer libraries like asp.net Ajax.
Reporting Task Progress With ASP.NET 2.0
Simplify Task Progress with ASP.NET "Atlas"
just have some javascript on the client side and let it show some animated GIF for 1-15 seconds (your choice) and close itself after the designated time.
Gulzar's suggestion was spot on. I have a simple ajax enabled wcf service which checks a session variable. My ashx page sets the variable to false when it starts processing and then true when its done.
I think there might be a race condition if the client checks before we set the session item to false; however, there are ways around that if we modify the service to set the session item to false after a client gets an im done response.
The tricks is still going to be figuring out what the intervalon the client should be. If we set it to low the user could save the file and then see the still processing message. I'm debating myself between half a second and a second. Anything less then a half a second seems unnessecary.
You said:
When its a PDF I don't change the
target for the form and it remains on
the current page.
If that is the case then the original page will be gone when the PDF is opened. In that situation I would have a loading animated gif and open it using Javascript into a div tag overlaying the rest of the page. You would not need to close it, so no timer or polling needed. It would just be gone when the page is gone.
In our CMS, we have a place in which we enable users to play around with their site hierarchy - move pages around, add and remove pages, etc.
We use drag & drop to implement moving pages around.
Each move has to saved in th DB, and exported to many HTML files. If we do that in every move, it will slow down the users. Therefore we thought that it's preferable to let the users play around as much as they want, saving each change to the DB, but only when they leave the page - to export their changes to the HTML files.
We thought of making the user click a "publish" button when they're ready to commit their changes, but we're afraid users won't remember to do that, because from their stand point once they've moved a page to a new place - the action is done. Another problem with the button is that it's inconsistent with the behavior of the other parts of the site (for example, when a user moves a text inside a page, the changes are saved automatically, as there is only 1 HTML file to update)
So how can we automatically save user changes on leaving the page?
You should warn the user when he leaves the page with javascript.
From http://www.siafoo.net/article/67:
Modern browsers have an event called window.beforeunload that is fired right when any event occurs that would cause the page to unload. This includes clicking on a link, submitting a form, or closing the tab or window.
Visit this page for a sample the works in most browsers:
http://www.webreference.com/dhtml/diner/beforeunload/bunload4.html
I think it's bad practice to save the page without asking the user first, thats not how normal web pages work.
Sample:
<SCRIPT LANGUAGE="JavaScript1.2" TYPE="text/javascript">
<!--
function unloadMess(){
mess = "Wait! You haven't finished."
return mess;
}
function setBunload(on){
window.onbeforeunload = (on) ? unloadMess : null;
}
setBunload(true);
//-->
</SCRIPT>
The easiest way I can think of is to store the page info each time the user moves items around using Ajax (e.g. with an UpdatePanel, onUpdated event, let it fire some script that updates the users page config.
Alternatively - .Net's WebParts implementation does this automatically without intervention by the programmer (unless you want to change the storage engine, it uses a local mdb in by default.
Use a "Publish" checkbox/button and when the user interacts with the page in a way that causes them to navigate away ask them if they want to publish if that box is NOT checked/button not clicked. Be aware that there are actions (closing the browser, accessing their favorites menu, etc.) that you will probably not want or not be able to prompt the user.
I would force them to click a button such as publish. That is a 'training' issue.
Automatically saving changes when they leave could have other ramifications. For example if a user opens up a record and plays around with it and has no intention of changing it, they close it, like a word document, excel, etc. . . I would have your site mimic that model.
You also have to remember that the web is a disconnected environment and is not required all web applications run like a windows application.
If the user doesn't click the publish/save button then there changes are not saved and that is up to them to remember to do.