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

Question

Hi,

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 = "application/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.

Answer 1

I asked the same questions here: http://stackoverflow.com/questions/3302131/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.