Edit Question - KnowledgeHub

Title Body

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 ba

Tags (comma-separated) Cancel