Trying to get wait status to work with file download
Question
Environment: .Net 3.5, jQuery 2.1.4, IE9 support
Can't seem to get wait status( spin.gif ) to appear, do a file download with generic handler, and then make wait status disappear. The problem is I'm not getting the dialog to download the file.
aspx - client
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="WebApplication3._default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="jquery.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="Button1" type="button" value="button" /><img src="spin.gif" id="Spin1" style="display: none;" />
</div>
</form>
<script>
window.onload = function () {
var btn1 = document.getElementById('Button1');
var spn1 = document.getElementById('Spin1');
btn1.onclick = function () {
//alert('achievement unlocked!');
//window.location = "handler1.ashx";
$.ajax({
beforeSend: function () { spn1.style.display = "inline-block" },
url: "handler1.ashx",
type: "POST",
success: function (result) {
spn1.style.display = "none";
//alert('done.')
}
});
}
}
</script>
</body>
</html>
ashx - server
public class handler1 : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
Thread.Sleep(5000);
//Download the CSV file.
context.Response.Clear();
context.Response.Buffer = true;
context.Response.AddHeader("content-disposition", "attachment;filename=SqlExport.csv");
context.Response.Charset = "";
context.Response.ContentType = "application/text";
context.Response.Output.Write("Hello, World");
context.Response.Flush();
context.Response.End();
}
public bool IsReusable
{
get
{
return false;
}
}
}
2 answers
solution1
0 2017-05-23 21:29:00
Your JS code looks workable - as I don't have access to the server side of it I replaced in your posted code the ajax and callback for a setTimeout() call. Run the snippet and click the button - spinner image (missing source of course) appears and 2 secs later its gone.
So I guess you are experiencing that the spinner appears but does not go away, so I expect some issue with the ajax. What makes you think it works?
window.onload = function () { var btn1 = document.getElementById('Button1'); var spn1 = document.getElementById('Spin1'); btn1.onclick = function () { spn1.style.display = "inline-block"; setTimeout( function(){ spn1.style.display = "none"; }, 2000 ) } }
<form id="form1"> <div> <input id="Button1" type="button" value="button" /><img src="spin.gif" id="Spin1" style="display: none;" /> </div> </form>
solution2
0 2017-05-23 21:48:48
You can remove "content-disposition", "attachment; header. Offer file for download at success of $.ajax() using <a> element, download attribute, Blob URL
var a = $("<a>", {download:"SqlExport.csv"}), blob, url;
$.ajax({
beforeSend: function () { spn1.style.display = "inline-block" },
url: "handler1.ashx",
type: "POST",
success: function (result) {
spn1.style.display = "none";
blob = new Blob([result], {type:"text/plain"});
url = URL.createObjectURL(blob);
a.attr("href", url);
$("body").append(a);
a[0].click();
$(window).one("focus", function() {
URL.revokeObjectURL(url);
if (blob.close) blob.close();
a.remove();
});
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.