CODEWITHSUNDEEP
ajaxjsfprimefaces
rootkit
rootkit

Reputation: 2165

How to show ajaxstatus for dynamic Primefaces components

I have noticed that pretty much all PF components that have 'dynamic' attribute set to 'true' will only show up after a short delay (which is understandable), and also will not trigger ajax start/stop event.

This is my (perfectly working) Ajax status component, actual dialog contents omitted for brevity:

<p:ajaxStatus onstart="statusDialog.show();" onsuccess="statusDialog.hide();" onerror="errorDialog.show();"/>

This is a dynamically loaded dialog. It needs to get data from backing beans:

<p:dialog modal="true" widgetVar="confDialog" position="center" id="confD" dynamic="true">
<p:panelGrid>
<p:row>
    <p:column>
        <h:outputText value="Date"></h:outputText>
    </p:column>
    <p:column>
        <h:outputText value="#{myBean.currentDate}">
            <f:convertDateTime locale="#{myBean.currentLanguage}" type="both" dateStyle="full" timeStyle="full" timeZone="#{myBean.currentTimeZone}"></f:convertDateTime>
        </h:outputText>
    </p:column>
</p:row>
</p:panelGrid>
<p:commandButton value="Close" type="button" onclick="confDialog.hide();">
</p:commandButton>
</p:dialog>

A commandbutton that does something and displays dynamically loaded confirmation dialog:

<p:commandButton value="Do it" type="submit" ajax="true" process="@form"
                action="#{bean.processForm}"
                oncomplete="if(!args.validationFailed){confDialog.show();}"
                update="confD @form"/>

Ajax status dialog is displayed while the commandbutton submits the data to backing bean and gets data back. Then ajax status dialog disappears, there is a delay of 1-2 seconds, and confirmation dialog is shown.

The same happens with dynamically loaded tabs (in PF tabView component).

Why isn't my ajax status dialog displayed during dynamic component load? How can I show it?

EDIT:

thanks to @partlov I figured out a solution without overriding PF function, by adding JQ ajax start/stop handler to the dynamically loaded dialog:

jQuery(document).ready(function() {
 confDialog.getJQ().ajaxStart(function(){statusDialog.show()});
 confDialog.getJQ().ajaxStop(function(){statusDialog.hide()});
});

Upvotes: 4

Views: 9359

Answers (1)

partlov
partlov

Reputation: 14277

As written in Primefaces documentation <p:ajaxStatus> just intercepts global AJAX requests, and this request is not global. There is no easy way to do this what you want. As time of loading of dialog is short I really don't see point for this. Only solution, as I think, is to overload Primefaces dialog JavaScript methods.

Primefaces calls loadContents() method when dialog content is loaded so you can override this method for this. I don't advice you to do that, because this is undocumented and can be changed in future versions of Primefaces:

jQuery(document).ready(function() {
  var oldLoadContents = PrimeFaces.widget.Dialog.loadContents;
  PrimeFaces.widget.Dialog.loadContents = function() {
    statusDialog.show();
    oldLoadContents();
  }
});

This should show your dialog on dynamic loading. You can use onShow attribute of p:dialog to close your dialog:

onShow="statusDialog.hide()"

Upvotes: 5

Related Questions