How to show status between onclick and oncomplete?
daxxy Oct 4, 2010 10:42 AMThe big picture dilemma is this:
I have a list of devices. Next to each one is a link that you click if you want to delete the device from the list.
A modalPanel pops up and asks you if you really want to delete it.
You click OK.
The device is deleted and the page is reRendered and by the time you are looking at your new list, up to 15s have elapsed. Way too long, but I think I'm stuck with it for now.
Below is the code. When you click OK several tasks are fired "onclick" and with "oncomplete" the modalPanel goes away. The problem is how to display a status that covers the time period between onclick and oncomplete. I have tried a4j:status but it does not seem to work the way I anticipate.
Any ideas on how to accomplish this? Here is my code:
<a4j:commandLink ajaxSingle="true" id="editLink"
oncomplete="#{rich:component('confirmationPanel')}.show()"
actionListener="#{devicesHome.loadDevice(_device.devId)}"
reRender="confirmationPanel" eventsQueue="ondQ">
<h:graphicImage value="/img/error.gif" />
<a4j:jsFunction name="refreshlist" reRender="deviceTable"
action="#{officesList.refreshList()}"
eventsQueue="ondQ" />
<a4j:jsFunction name="deletedevice"
action="#{devicesHome.removeAll()}" eventsQueue="ondQ" />
<a4j:jsFunction name="endit"
actionListener="#{devicesHome.endIt()}"
eventsQueue="ondQ" />
</a4j:commandLink>
<rich:modalPanel id="confirmationPanel" autosized="true" width="400">
<f:facet name="header">Confirmation Dialog</f:facet>
<h:form>
<h:panelGrid>
<h:panelGrid columns="2">
<h:graphicImage value="/img/alert-icon.png" />
<h:outputText
value="Are you sure you want to delete #{devicesHome.instance.name}?"
style="FONT-SIZE: large;" />
</h:panelGrid>
<h:panelGrid columns="2">
<a4j:commandButton id="in1" value="OK"
style="width: 75px;font-size: 14px"
oncomplete="#{rich:component('confirmationPanel')}.hide()"
onclick="deletedevice();refreshlist();endit();return false"
eventsQueue="ondQ" />
<a4j:commandButton id="in2" value="Cancel"
style="width: 75px;font-size: 14px" eventsQueue="ondQ"
onclick="#{rich:component('confirmationPanel')}.hide();endit()" />
</h:panelGrid>
</h:panelGrid>
</h:form>
</rich:modalPanel>