CODEWITHSUNDEEP
ajaxjsfrichfaces
jplatasv
jplatasv

Reputation: 155

Trigger <a4j:ajax> request on page load

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.

Upvotes: 1

Views: 2861

Answers (1)

jplatasv
jplatasv

Reputation: 155

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.

Upvotes: 2

Related Questions