Show progress image while executing JSF managed bean action - jsf

Question

My question kind of applies to Prime Faces progress bar but any vanilla jsf implementations(using jquery) would be helpful. My problem is when I start the long mysql query I also render the progress bar. The problem is it starts it's progress after the data query is complete. I'm guessing because the render phase isn't applied until the back end stuff is complete. Would I need to start the progress bar in another thread?
The progress bar doesn't necessarily have to show where the query is at(if that is even possible). I really just want to show the application "thinking". Maybe with some text or an animated gif. Thanks for any help.
EDIT
This is what I have.
<p:ajaxStatus>
<f:facet name="start">
<h:graphicImage value="/resources/images/ajax-loader-bar.gif" />
</f:facet>
<f:facet name="complete">
<h:graphicImage value="/resources/images/ajax-loader-bar-still.gif" />
</f:facet>
<f:facet name="default">
<h:graphicImage value="/resources/images/ajax-loader-bar-still.gif" />
</f:facet>
</p:ajaxStatus>
The request is not ajax.
<p:commandButton value="Yes" update="growl" onclick="confirmation.hide()"
action="#{viewLines.downloadFile}" ajax="false" />
The method behind it is.
public void downloadFile() {
if (selectedPkgLine != null) {
ExcelSheet excelSheet = new ExcelSheet();
FacesContext facesContext = FacesContext.getCurrentInstance();
ExternalContext externalContext = facesContext.getExternalContext();
String pkgLineName = StringUtils.removeSpaces(StringUtils.stripGarbage(selectedPkgLine.getShortname()));
StringBuilder builder = new StringBuilder();
builder.append(pkgLineName);
builder.append(".xls");
externalContext.setResponseContentType("application/vnd.ms-excel");
externalContext.setResponseHeader("Content-Disposition", "attachment; filename=" + builder.toString());
try {
excelSheet.writeExcelSheet(this, externalContext.getResponseOutputStream());
} catch (WriteException ex) {
FacesUtils.addFatalMessage(ex.getMessage());
} catch (IOException ex) {
FacesUtils.addErrorMessage(ex.getMessage());
} catch (ServletException ex) {
FacesUtils.addErrorMessage(ex.getMessage());
}
facesContext.responseComplete();
} else {
submitDisabled = true;
FacesUtils.addErrorMessage("No packaging line was selected");
}
}

Answer 1

Grab some animated icon from http://ajaxload.info, include it in your page with CSS display: none; and use JavaScript to make it display: block; during onclick:
<h:commandButton onclick="document.getElementById('progress').style.display='block'" />
<img id="progress" src="progress.gif" style="display:none" />
Or if you prefer jQuery (which is already part of PrimeFaces):
<h:commandButton onclick="$('#progress').show()" />
<img id="progress" src="progress.gif" style="display:none" />
This however only works fine with synchronous requests. Since you're using PrimeFaces, I'd suggest to use p:ajaxStatus instead since it will take asynchronous (ajax) requests into account. Just put this piece of code anywhere in the template, you need only one of it. It will work for every <p:commandButton> and <p:commandLink> without ajax="false" and the <p:ajax>.
<img id="progress" src="progress.gif" style="display:none" />
<p:ajaxStatus>
<f:facet name="start"><h:graphicImage value="progress.gif" /></f:facet>
<f:facet name="success"><h:outputText value="" /></f:facet>
<f:facet name="error">An error has occurred!</f:facet>
</p:ajaxStatus>
If you want to intercept on the standard JSF <f:ajax>, then use <f:ajax onevent> instead.
<h:commandButton>
<f:ajax onevent="progressListener" />
</h:commandButton>
<img id="progress" src="progress.gif" style="display:none" />
With this JavaScript function:
function progressListener(data) {
document.getElementById("progress").style.display = (status == "begin") ? "block" : "none";
}