Dean.DePue Dean.DePue - 3 months ago 6
Javascript Question

Disable page on Javascript submit

I've looked and don't see any way to disable the page, like an overlay on the page to prevent any action when I have a JavaScript submit action:

function AgendaMinutes() {
var id = '@Model.ID';
var form = $('<form method="POST" action="AgendaMinutes">');
form.append($('<input type="hidden" name="dprid" value="' + id + '">'));
$(body).append(form);
form.submit().remove();
return false;
}


This works like a charm in generating and sending a PDF to the client, but allows the user to click the button more than once. I could disable the button but how do I know when the PDF has been returned so that I can release it?

Answer

but how do I know when the PDF has been returned [so that I can re-enable the page]

The simplest option for downloading a file and "knowing" when it is complete is to send the file to a new window/tab via target="_blank".

This way, the user gets a progress indicator (via the browser) and your page doesn't need to know when it's completed (as the other tab handles it) so can be be re-enabled immediately.

If your page needs to wait for some reason, eg the document must be generated before continuing, then an alternative solution would be require: in this case, I'd generate and persist the file on the server, then provide a download link to the client.