Veljko89 Veljko89 - 4 months ago 14
Javascript Question

Close modal before Response.Flush - C#

I have a problem with modal closing ...
So I have this button

btnReportingExport
that's inside of modal

<div id="Reporting_footer" class="modal-footer">
<asp:Button ID="btnReportingExport" runat="server" Text="Export"
CssClass="btn btn-default" OnClientClick="ChangeModalFunction();"
OnClick="btnReportingExport_Click"/>
<input id="Submit1" class="btn btn-default" type="submit" data-dismiss="modal"
value="Cancel" />
</div>


That button first calls JS function
ChangeModalFunction
that looks like this

function ChangeModalFunction() {
$('#Reporting_modal').modal('hide');
$('#GenerateReport_modal').modal('toggle');
}


So i just hide modal and show another modal that only has some
.gif
animation on it for generating the report. After that my main event happens
btnReportingExport_Click
that does loads of stuff, taking data from SQL, putting it on excel, converting to PDF, zipping and putting it into response
It looks like this ...

Response.Clear();
Response.ContentType = "application/x-zip-compressed";
Response.AddHeader("Content-Disposition",
string.Format("attachment; filename=\"{0}.zip\"", QuestionnaireName));

Response.WriteFile(FilePathZip);


So what I wish to accomplish, but failing miserably is to close the modal with a
.gif
on it, right before I flush my response ... and I got no clue how to do it anymore

ScriptManager.RegisterStartupScript(this, this.GetType(),
"CloseModal", "Closepopup();", true);

Response.Flush();


Closepopup
function is just simple function that does

function Closepopup() {
$('#GenerateReport_modal').modal('hide');
}


So after that long code trip, my problem shows up, I get download file dialog and my modal is still up and running in background. And I am all out of ideas how to fix it, how can I hide modal from code before doing the
Response.Flush()
?

Picture says 1000 of words - I just want to hide that modal behind before download dialog

Problem

Thank you for help and I apologize for wall of text

Answer

Interesting scenario, I would like you to try the following solution: call your zip file endpoint via ajax request using jquery (you can do it also with vanilla javascript). And then bind this event onreadystatechange to your request.

$(".submitButton").click(function(){
    var xhr  = $.ajax({url: "/data.zip",
     success: function(result){

    }});
    xhr.onreadystatechange = function() { 
        if(xhr.readyState === 4)
            Closepopup();
    };
});

this event will fire with 5 different statuses:

  1. 0: request not initialized
  2. 1: server connection established
  3. 2: request received
  4. 3: processing request
  5. 4: request finished and response is ready

I believe that when you will get this status 4, the dialog will open in the same time and you could close your popup window.