Unlock UI with jQuery BlockUI Plugin after the Open/Save As dialog box appears

I'm using jQuery BlockUI Plugin to show busy message when a click event is fired.

In the scenario below, it's working fine. The busy message shows and locks UI on click event, and dissapears when postback's done.

No file creation involved, which invokes browser Open/Save As dialog box

Mark-up:

$(function() { // when document has loaded

    ($.unblockUI); //unlock UI

    //Show busy message on click event and disable UI
    $('#btnDemo').click(function() {
    $.blockUI({ message: '<h3>Please wait...</h3>' });

    });

});

<asp:Button ID="btnDemo" runat="server" Text="Hello World" /><br/>

Code behind:

   Protected Sub btnDemo_Click(ByVal sender As Object, ByVal e As EventArgs) Handles btnDemo.Click
        Label1.Text = "Hello World"
        Threading.Thread.Sleep(6000)
    End Sub

Now, here comes the problem. There's file creation involved and it invokes browser Open/Save As dialog box. The busy message shows and locks UI on click event, but doesn't dissapear and unlock UI when postback's done and user saves file.

Mark-up:

$(function() { // when document has loaded

    ($.unblockUI); //unlock UI

    //Show busy message on click event and disable UI
    $('#btnCreateFile').click(function() {
    $.blockUI({ message: '<h3>Please wait...</h3>' });

    });

});

<asp:Button ID="btnCreateFile" runat="server" Text="Create File" /><br/>

Code-behind:

   Protected Sub btnCreateFile_Click(ByVal sender As Object, ByVal e As EventArgs) Handles btnCreateFile.Click

    Dim filename As String = "demo.xls"
    Response.ContentType = "a开发者_JAVA技巧pplication/vnd.ms-excel"
    Response.AddHeader("Content-Disposition", String.Format("attachment;filename={0}", filename))
    Response.Clear()

    Response.[End]()

    End Sub

I want to get rid of the busy message and unlock the UI when Open/Save As dialog box appears.

---

I asked the same questions here: Unblock (jQuery BlockUI) after file sent to browser through response stream (with no answers).

I don't think it's possible.. From what I can see the page obviously posts back but because the response is a file stream the page doesn't re-load, no client side events fire the page just stays in limbo.

Most tutorials suggest you create the file and re-direct the client to a 'download page'. You could potentially do all this through an iFrame. So postback, generate the file, set some client site jquery to run on document.ready to create an iFrame with a src of say: /downloadFile.aspx?fileID=blah

The dialog should still come up as normal but you can now control unblocking the UI.

---

Javascript:

$(document).ready(function () {
    $('#create_pdf_form').submit(function () {
      blockUIForDownload();
    });
  });

  var fileDownloadCheckTimer;
  function blockUIForDownload() {
    var token = new Date().getTime(); //use the current timestamp as the token value
    $('#download_token_value_id').val(token);
    $.blockUI();
    fileDownloadCheckTimer = window.setInterval(function () {
      var cookieValue = $.cookie('fileDownloadToken');
      if (cookieValue == token)
       finishDownload();
    }, 1000);
  }

ServerSide:

var response = HttpContext.Current.Response;
response.Clear();
response.AppendCookie(new HttpCookie("fileDownloadToken", downloadTokenValue); //downloadTokenValue will have been provided in the form submit via the hidden input field
response.AddHeader("Content-Disposition", string.Format("attachment; filename={0}", desiredFileName)); //desiredFileName will be whatever the resutling file name should be when downloaded

//Code to generate file and write file contents to response

response.Flush();

Here is the link to resolution.

http://geekswithblogs.net/GruffCode/archive/2010/10/28/detecting-the-file-download-dialog-in-the-browser.aspx

br, Jernej