Downloading large files with jQuery & iFrame - Need a File Ready event so I can hide the loading gif
16,215
Solution 1
Have the iframe
onload
event call your code:
var reportId = $(this).closest("tr").attr("data-report_id");
var url = "/Reports/Download?reportId=" + reportId;
var hiddenIFrameId = 'hiddenDownloader';
var iframe = document.getElementById(hiddenIFrameId);
if (iframe === null) {
iframe = document.createElement('iframe');
iframe.id = hiddenIFrameId;
iframe.style.display = 'none';
iframe.onload = function() {
$(".loading").hide();
};
document.body.appendChild(iframe);
}
iframe.src = url;
Solution 2
iframe.src = url;
$(iframe).load(function() {
$(".loading").hide();
});
Author by
Owen
Updated on June 17, 2022Comments
-
Owen almost 2 years
I'm using jQuery to download some files that take some time to create, so I show a loading gif to tell the user to be patient. But the problem is, the loading gif is currenntly shown and hidden all within a split second.
Is there a way for me to hide the loading gif after the download is complete and the user has the Save File popup on the screen?
HTML
<tr data-report_id="5"> <td> <input type="button" id="donwload"></input> <img class="loading" src="/Images/Loading.gif"/> <iframe id="hiddenDownloader"></iframe> <td> </tr>
JS
var reportId = $(this).closest("tr").attr("data-report_id"); var url = "/Reports/Download?reportId=" + reportId; var hiddenIFrameId = 'hiddenDownloader'; var iframe = document.getElementById(hiddenIFrameId); if (iframe === null) { iframe = document.createElement('iframe'); iframe.id = hiddenIFrameId; iframe.style.display = 'none'; document.body.appendChild(iframe); } iframe.src = url; $(".loading").hide();
THE SOLUTION I ENDED UP USING
<script> $("#download").on("CLICK", function () { var button = $(this); button.siblings(".loading").show(); var rowNumber = GetReportId(); var url = GetUrl(); button.after('<iframe style="display:none;" src="' + url + '" onload="loadComplete(' + rowNumber + ')" />'); } function loadComplete(rowNumber) { var row = $("tr[data-row_number=" + rowNumber + "]"); row.find(".loading").hide(); } </script> <tr data-report_id="5"> <td> <input type="button" id="download"></input> <img class="loading" src="/Images/Loading.gif" style="display:none;"/> <td> </tr>
UPDATE
I was having problems with this method in Chrome so I changed all my jquery code to look for a cookie that the back end code set when the download had finished processing. When the jquery detected the cookie, it turned off the loading gif & whiteout.
-
Manoj Rana about 6 yearsthis code work but it's not working for text file(.txt). please share code to download text file for all browsers
-
epoch about 6 years@ManojRana It is best to ask a new question.