JSF/Primefaces AJAX page rendered callback

Question

My page layout (w/Primefaces) has a west, north and center layout panel which inclues all content. The center layout includes an iframe which each time a menu option is chosen (on the west panel), only the center content is updated (with Ajax).

While the page is rendering/loading I want to display a "loading gif" on one of the other panels. I have used the following code:

xhtml segment

 <p:ajaxStatus style="width:32px; height:32px;" id="ajaxStatusPanel">
            <f:facet name="start">
                <p:graphicImage value="/resources/img/progress.gif" />
            </f:facet>

            <f:facet name="complete">
                <h:outputText value="" />
            </f:facet>
    </p:ajaxStatus>

But this displays the loader briefly since it completes as soon as the ajax request is over. However the page loading/rendering may take a bit longer. Is there some way to provide a "page rendered" callback?

Menelaos Menelaos · Accepted Answer · 2013-06-20T13:09:25

As your actually loading content within an iframe, you can solve this problem by adding a little bit of javascript to your page, and especially the onloadevent handler.

For example:

<iframe id="navigation" src="#{layout.navigation}" onload="hideDialog()"
style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; width: 100%; height: 100%; border: none; margin: 0; padding: 0; overflow: hidden; z-index: 999999;">
</iframe>

The code above will cause the hideDialog() function to be executed when the content within the iframe has finished loading.

The function you call (e.g. hideDialog()) can contain a reference to the dialog generated by JSF/primefaces and hide it.

<script>
function hideDialog()
{
if(statusDialog != undefined)
statusDialog.hide();
}
</script>

You may have to do some searching in the generated html+javascript to find the exact names/ids to use (in order to obtain a reference to the dialog).

JSF/Primefaces AJAX page rendered callback

1 Answers