Trigger request on page load

Question

I have a page which has to trigger an AJAX request when it is loaded. I've managed to perform the request when clicking a button on the page. But I haven't managed to trigger this automatically on page load. The parameter to use comes from the other page via f:viewParam.

I've tried to use a load event which seems to be usable with f:ajax and HTMLGraphicImage or HTMLBody as per this thread but it doesn't work with a4j:ajax (or I may be missing something).

Tag Exception
<a4j:ajax> loadevent is not supported for the HtmlGraphicImage

I haven't posted the bean for simplicity as this part now works as I want to. My problem is about triggering the a4j:ajax tag. If you think the bean would be also needed just let me know.

I think there is a way to do it via PrimeFaces. I am not sure I'll be allowed to add this library to the project so please post other solutions if there are any.

Here is the JSF page. This one tries to use an image load event to trigger AJAX. There is also an attempt to use HTMLBody but it's tagged with ui:remove:

<?xml version="1.0" encoding="ISO-8859-1" standalone="yes" ?>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:rich="http://richfaces.org/rich"
    xmlns:c="http://java.sun.com/jstl/core"
    xmlns:a4j="http://richfaces.org/a4j">

<ui:composition template="layouts/template.jsf">
    <ui:define name="body">

        <f:metadata>
            <f:viewParam name="recordCode"
                value="#{recordDetailBean.record.recordCode}" />
        </f:metadata>

        <h:graphicImage value="/images/transparent.gif">
            <a4j:ajax event="load"
                action="#{recordDetailBean.createDummyDelay}"
                status="loadingRecordDetail" render="recordDetail" />
        </h:graphicImage>

        <ui:remove>
            <a4j:ajax event="load"
                action="#{recordDetailBean.createDummyDelay}"
                status="loadingRecordDetail" render="recordDetail" />
        </ui:remove>

        <rich:popupPanel id="loadRecord" style="text-align:center"
            autosized="true" modal="true" width="200">
            <h:graphicImage value="/images/ajax-loader.gif" />
            <br />
            <h:outputText value="#{msg.loadingRecord}" />
        </rich:popupPanel>

        <a4j:status name="loadingRecordDetail">
            <f:facet name="start">
                <rich:componentControl event="start" operation="show"
                    target="loadRecord" />
            </f:facet>
            <f:facet name="stop">
                <rich:componentControl event="stop" operation="hide"
                    target="loadRecord" />
            </f:facet>
        </a4j:status>

        <h:form>

            <a4j:commandButton value="Do something"
                action="#{recordDetailBean.createDummyDelay}"
                status="loadingRecordDetail" render="recordDetail" />

            <a4j:outputPanel id="recordDetail">
                <h:outputText value="#{recordDetailBean.dummyDelay}" />
            </a4j:outputPanel>
        </h:form>

    </ui:define>
</ui:composition>
</html>

Thanks in advance.

In primefaces we have p:remoteCommand(equivalent of a4j:jsFunction in richfaces) with an attribute autoRun. If it is set to true then it will be execute on onload. Not sure of similar attribute in richfaces — Srikanth Ganji, Jan 31 '14 at 13:40
I'll soon ask my managers about adding PrimeFaces to the project, but I would also like to know another approach if there is any. Thanks for your help, Srikanth. — jplatasv, Feb 03 '14 at 08:00
try something like this callOnload(); and declare a4j:jsFunction with name="callOnload" with corresponding actions you want to execute. Hope this may serve your purpose — Srikanth Ganji, Feb 03 '14 at 12:07
Srikanth, I tried your approach and I couldn't get it to work. I probably missed something. Thanks anyway for your help! — jplatasv, Feb 03 '14 at 16:18

score 2 · Accepted Answer · edited May 23 '17 at 11:43

Watching again my question I guess I should have asked that I wanted to link two pages passing a parameter and invoking a method of the managed bean being invoked prior to page render.

This is the approach I finally used. It is probably shown in other threads so this may be closed as duplicate. I also followed guidelines shown in this answer by BalusC regarding f:metadata. Unfortunately I couldn't make a "loading" h:popupPanel appear prior to change to the other page. If somebody could provide an approach to do this I would open another question:

Link on the first page:

<h:link value="#{rSearch.recordCode}" outcome="recordDetail">
   <f:param name="recordCode" value="#{rSearch.recordCode}" />
</h:link>

Metadata on the page being called:

<ui:define name="metadata">
   <f:metadata>
      <f:viewParam name="recordCode" value="#{RecordDetailBean.theRecord.recordCode}" />
      <f:event type="preRenderView" listener="#{RecordDetailBean.populateRecord}" />
   </f:metadata>
</ui:define>

In the populateRecord method I use a DAO and the parameter stored in RecordDetailBean.theRecord.recordCode to retrieve all the info I need before the page is rendered.

Trigger request on page load

1 Answers1