How to make "p:remoteCommand" to trigger "p:ajaxStatus"?

0
votes

Have the following issue: there is p:remoteCommand that lazy loads p:dataTable after page load, but the load indicator of "p:ajaxStatus" is not shown during the time of the ajax request...

How to make "p:ajaxStatus" to be shown on the page when p:remoteCommand sends request for lazy loading of the data?

Code on the page:

<h:form id="form">

    <p:remoteCommand name="loadLazyData" action="#{crmBackingBean.crmOnControlLazyInit}" autoRun="true" process="@this" update="dtCrmOnControl" />

    <p:dataTable id="dtCrmOnControl" var="rowData" value="#{crmBackingBean.crmOnControlLazy}" widgetVar="dtCrmOnControl" rows="#{crmBackingBean.crmDTonControlRows}" paginator="true" ..... lazy="true" >
        .......................................................
    </p:dataTable>

</h:form>

I use Atlas theme, p:ajaxStatus is located in its original place, in template.xhtml:

<p:ajaxStatus style="width:40px; height:40px; position:fixed; right:30px; bottom:30px; z-index:999999;">
    <f:facet name="start">
        <i class="fa fa-circle-o-notch fa-spin Green Fs40"></i>
    </f:facet>
    <f:facet name="complete">
        <h:outputText value="" />
    </f:facet>
</p:ajaxStatus>

Thank you!

Versions: PrimeFaces 6.0.2; PrimeFaces Atlas Theme 1.1.1; GlassFish 4.1.1 with JSF 2.2.12 (Mojarra)

2
primefacesjsf-2.2
does it work if you use <p:commandButton type="button" onclick="loadLazyData" /> and manually click on the button? Does it work if you use the <p:ajaxStatus> inside the same form? – Kukeltje
@Kukeltje, thank you, the <p:commandButton type="button" onclick="loadLazyData();" /> works, and actually it made me able to find the solution: I use standard PrimeFaces Atlas theme, and its standard template contains <p:ajaxStatus /> tag after <ui:insert name="content">, thus obviously ajaxStatus just simply doesn't "hear" "remoteCommand" as it loaded after remoteCommand (actually not sure whether it is bug or feature...) So basically my fix was just to move <p:ajaxStatus /> above and put it as first tag after ` <h:body>` code – AndrewG10i
Please create this as an answer, but make sure you add the right version info to both the question and answer! And please file a bug in the PF issuelist. If it is not a bug, it should at least be documented! – Kukeltje

2 Answers

1
votes

The solutions is following:

The tag <p:ajaxStatus> should be placed on the xhtml source page BEFORE tag <p:remoteCommand>.

Environment:

  • PrimeFaces 6.0.2
  • PrimeFaces Atlas Theme 1.1.1
  • GlassFish 4.1.1 with JSF 2.2.12 (Mojarra)
-1
votes

it seems like you've missed a few essential defintions. How should your status notice that there is any action going on? Also, I suppose you'd like to display a dialog during waiting and configure its styling in ajaxStatus, is that correct?

If so, I recommend you to create an own dialog by <p:dialog> and add the onstart and onsuccess attributes to your ajaxStatus as described in Primefaces showcase: http://www.primefaces.org/showcase/ui/ajax/status.xhtml

It will be something like

<p:ajaxStatus onstart="PF('statusDialog').show()" onsuccess="PF('statusDialog').hide()" />

<p:dialog widgetVar="statusDialog" modal="true" draggable="false" closable="false" resizable="false" showHeader="false">
    <p:graphicImage name="waiting_picture.gif" />
</p:dialog>

You can easily combine this solution with a datatable / paginator.

I hope this helps!

EDIT: Why don't you define the rows per page to support lazy loading? http://www.primefaces.org/showcase/ui/data/datatable/paginator.xhtml

EDIT 2: You can also call your loadLazyData method on start:

<p:ajaxStatus onstart="loadLazyData" />

or something like this...