How to show status between onclick and oncomplete?

[daxxy]

The 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>

[ilya_shaikovsky]

I have tried a4j:status but it does not seem to work the way I anticipate.

please clarify that. status should works as I think in your case.

[daxxy]

Here is the code with the a4j:status tag

<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>
      <a4j:status id="stat1" forceId="true" startText="DELETING" stopText="DONE"/>
      <h:panelGrid columns="2">
     
        <a4j:commandButton id="in222" value="OK"
          oncomplete="#{rich:component('confirmationPanel')}.hide()"
          onclick="deletedevice();refreshlist();endit()"
          eventsQueue="ondQ" />

        <a4j:commandButton id="in2" value="Cancel"
          eventsQueue="ondQ"
          onclick="#{rich:component('confirmationPanel')}.hide();endit()" />

      </h:panelGrid>
    </h:panelGrid>

</h:form>

When I click the button to open the modalPanel the word DONE is displayed front and center.  Then when I click the button confirming "OK", the device is deleted, the list is refreshed, the conversation is ended and finally the modalPanel closes.  The word DONE is displayed throughout.  I see two problems,

1 Why is the status displayed when I click the a4j:commandButton that opens the modalPanel when that status is seemingly not attached to that request.

2 Why is the startText never displayed?

The reRender is on one of the a4j:jsFunction's displayed higher in the page.

[daxxy]

This seems to work.  I didn't think I needed a4j:region if I used forceId=true.  And I left off the stopText because it is still showing up whenever the modalPanel opens.

<a4j:region id="reg1">
  <a4j:status for="reg1" id="stat1" forceId="true" startText="Deleting..." />
  <h:panelGrid columns="2">
     
        <a4j:commandButton id="in222" value="OK"
          style="width: 75px;font-size: 14px" stat="stat1"
          oncomplete="#{rich:component('confirmationPanel')}.hide()"
          onclick="deletedevice();refreshlist();endit()"
              reRender="deviceTable"
          eventsQueue="ondQ" />

        <a4j:commandButton id="in2" value="Cancel"
          style="width: 75px;font-size: 14px" eventsQueue="ondQ"
          onclick="#{rich:component('confirmationPanel')}.hide();endit()" />

  </h:panelGrid>
</a4j:region>