Hey guys been a while since I needed your help.
I've got a reporting system (yes same old one) , one button runs the report and builds the html table into the page all nice with CSS, etc, the other button produces a CSV output. I set the header variables (content-type, etc...) so that the user gets the Open/Save/Cancel prompt instead of outputing the CSV data.
The problem:
Since some of these reports take a long time, When a button is clicked I display an ajax loader. It works fine in case of the display to screen button because the page is refreshed, but in case of the export, the dialogue is displayed to download the file and the ajax loader image is still spinning on page.
How can I forward the page after the CSV page is displayed? Since in this case the page is actually refreshed as well (goes to the page that outputs the CSV) but of course to the browser it doesn't "display" the URL and hence change the look of the page, instead it displays the dialog.
I'm not sure i'm explaining this right so let me know if you don't understand. Here's the two buttons:
-
############## SOME OF MY JS FUNCTIONS ################
-
-
-
/** SUBMIT THE MAIN FORM **/
-
function submitGlobalForm()
-
{
-
document.forms[0].submit();
-
-
}
-
-
/** PAGE LOCATION \ REDIRECTS **/
-
function changeURL(url)
-
{
-
document.location = url;
-
}
-
-
/** CHANGE DISPLAY VALUE OF AN ELEMENT, USED FOR AJAX LOADING IMAGE **/
-
-
function toggleDisplay(docID,displayValue)
-
{
-
if(document.getElementById(docID) != null)
-
{
-
document.getElementById(docID).style.display = displayValue;
-
}
-
}
-
-
###### H T M L (minus containers, other elements, etc) #########
-
-
<input type="submit" name="pageAction" id="runReportBtn" value="Run Report" class="btn" onclick="toggleDisplay('runBtnLoaderImage','block'); toggleDisplay('reportTable','none');toggleDisplay(this.id,'none')" disabled="disabled" />
-
-
<img id="runBtnLoaderImage" class="noDisplay" src="images/loaderSmall.gif" alt="Loading..."/>
-
-
-
-
<input type="submit" name="pageAction" id="exportCSVBtn" value="Export CSV" class="btn" onclick="toggleDisplay('exportBtnLoaderImage','block'); toggleDisplay('reportTable','none'); toggleDisplay(this.id,'none'); changeURL('report.php');" disabled="disabled" />
-
-
<img id="exportBtnLoaderImage" class="noDisplay" src="images/loaderSmall.gif" alt="Loading..."/>
-
-
-
//Note: Ignore the the in the elements, that's not in my code, don't know why it shows here.
-
Thanks guys!
Yours,
Dan
