Apache My Faces Trinidad: triggering Partial Page Refresh ("AJAX") from non Trinidad components

In a recent post – Apache My Faces Trinidad: dynamically refreshing Non Trinidad components in a Partial Page Refresh (”AJAX”) – I have introduced the AJAX infrastructure inside Apache MyFaces Trinidad, called Partial Page Rendering and almost equal to the PPR mechanism in ADF Faces. In that article, I demonstrated how non-Trinidad components can still be targets of a Partial Page Render cycle, that is: whenever an AJAX like PPR cycle is processed, all JSF components stand a chance of being dynamically (DHTML) refreshed in the client at the end of the PPR cycle. There are two ways of making non-Trinidad components – that lack the partialTriggers attribute normally used for identifying the targets of a PPR cycle – still part of the client side refresh.

In this post, we look at another challenge: what if we want to have the PPR cycle, the AJAX conversation, started from a component that is not a Trinidad component? For normal Trinidad, we use the autoSubmit attribute to indicate whether or not changes to an input component should initiate a PPR cycle. This attribute however is not a generic JSF attribute, it is a Trinidad specific attribute, not available on other JSF implementations.

As it turns out, it is quite simple to have non JSF components start PPR cycles, just as if they had an autoSubmit attribute.

A simple example:

Whenever a new value is entered for the First Name , we want to immediately refresh the prompt X’s Current Age. The JSF source for this page fragment is:

 <tr:panelLabelAndMessage label="#{Customer.firstName}'s Current Age" >
    <h:outputText id="ageField"  value="#{Customer.age}" />
 </tr:panelLabelAndMessage>
 <tr:panelLabelAndMessage label="First Name">
       <h:inputText id="firstName" 
            value="#{Customer.firstName}" />
 </tr:panelLabelAndMessage>
 

Notice that the firstName input element is not a Trinidad InputText but a plain old JSF RI InputText component, that does not have the autoSubmit property.

In order to have the panelLabelMessage (‘s label) refreshed when the first name value is changed, we need to do two things:

• set the partialTriggers attribute for the panelLabelAndMessage and have it include firstName , the Id for the firstName inputText whose change should trigger PPR and indirectly refresh of the panelLabelAndMessage
• set the onChange attribute for the firstName inputText, to do the same thing whenever the value changes in this element as would happen for a Trinidad InputText with autoSubmit==true

The code now becomes:

 <tr:panelLabelAndMessage label="#{Customer.firstName}'s Current Age" partialTriggers="firstName">
    <h:outputText id="ageField"  value="#{Customer.age}" />
 </tr:panelLabelAndMessage>
 <tr:panelLabelAndMessage label="First Name">
       <h:inputText id="firstName" 
            onchange="window.submitForm('customerform',1,{source:'customerform:firstName'});"
            value="#{Customer.firstName}" />
 </tr:panelLabelAndMessage>
 

And this all that is required. Note that the call to submitForm – a standard Trinidad JavaScript function – passes the id of the dataForm, defined as:

      <tr:form id="customerform"> 

and the full id for the firstName field as the source for this PPR cycle.

Also note that this works exactly the same for ADF Faces.