Form submit cancels jQuery ajax call

Question

I have a Generic Handler (DownloadHandler.cs) which serves as both generating a pdf and downloading a pdf. When generating I use a jQuery ajax call and when downloading I use a form element which is submitted. The problem is that the form element cancels the generate request and therefore the "success" event never gets called (See image below).

Status List

Generate code (Gets called from a button):

$.ajax({
    type: "POST",
    url: "/DownloadHandler.ashx",
    data: {
        GeneratePdf: true
    },
    success: function (result) {
        console.log(result);
    },
    error: function (errorMessage) {
        console.log(errorMessage);
    }
});

Download code (Gets called from a button):

var data = { "GeneratePdf": false }

var inputs = '';

$.each(data, function (key, value) {
    inputs += '<input type="hidden" name="' + key + '" value="' + value + '" />';
});

$('<form action="/DownloadHandler.ashx" method="POST">' + inputs + '</form>').appendTo('body').submit().remove();

DownloadHandler:

public void ProcessRequest(HttpContext context)
{
    if (!String.IsNullOrEmpty(context.Request["GeneratePdf"]) && Convert.ToBoolean(context.Request["GeneratePdf"]))
    {
        Thread.Sleep(3000);
        context.Response.Clear();
        context.Response.Write("GENERATING");
        context.Response.Flush();
    }
    else
    {
        Thread.Sleep(3000);

        FileInfo pdfFile = new FileInfo(@"C:\1.pdf");

        context.Response.Clear();
        context.Response.AddHeader("Content-Disposition", "attachment; filename=" + pdfFile.Name);
        context.Response.AddHeader("Content-Length", pdfFile.Length.ToString());
        context.Response.ContentType = "application/octet-stream";
        context.Response.WriteFile(pdfFile.FullName);
        context.Response.Flush();
    }
}

public bool IsReusable
{
    get
    {
        return false;
    }
}

I just added a Thread.Sleep to demonstrate the generation of the pdf. Am I missing something or should I use some other method?

It does, but when you return a file with an "attachment" header it just downloads it instead of reloading the page. — Dumpen, Nov 06 '13 at 13:08

jbl · Accepted Answer · 2013-11-06T13:45:38.547

1

Maybe you can try targetting a tiny dynamic iframe on your page with your form. Something like :

var data = { "GeneratePdf": false }

var inputs = '';

$.each(data, function (key, value) {
    inputs += '<input type="hidden" name="' + key + '" value="' + value + '" />';
});

var f = $('<form action="/DownloadHandler.ashx" method="POST">' + inputs + '</form>');


var iframe = $('<iframe src="about:blank"/>')  // should be made tiny/transparent with some css
              .appendTo('body');

iframe.contents().find('html').append(f);
f.submit().remove();

edited Nov 06 '13 at 13:45

answered Nov 06 '13 at 12:57

jbl

15,179
3
34
101

That canceled both the DownloadHandler.ashx and the _blank iframe :( It seems when i'm submitting a form everything on a page gets canceled. I'm thinking of using another way of downloading the pdf since this seems to be the problem – Dumpen Nov 06 '13 at 13:17
@Dumpen modified my answer to put the form inside the iframe. I guess a possible answer should be something like this. Hope this will help. – jbl Nov 06 '13 at 13:46
It works in Chrome but not in Internet Explorer. Do you know why? EDIT: Funny thing, my original post works in IE but not in Chrome >.> – Dumpen Nov 08 '13 at 09:40
@Dumpen Do you get any error message ? Random thought : it could be an issue with src about:blank of the iframe. Have you tried pointing to a valid html file (with a blank body) as src ? – jbl Nov 08 '13 at 10:15

Form submit cancels jQuery ajax call

1 Answers1