JSF grouping components within f:ajax

Question

I have a JSF page loaded into a main page via a ui:include - affordability.xhtml. My problem is that the f:ajax onblur events are not fired when the page first loads. If i refresh the page then the ajax onblur events fire as normal.

Is the issue related to the fact that the f:ajax tag cannot find the components listed within the execute tag on first load? I do not get any js errors or java/jsf exceptions thrown.
According to the Java EE 6 documentation it is OK to group components within an f:ajax tag.

Another odd issue is that the input components all maintain focus, i.e. you can click on multiple input boxes and they all stay in 'focus'.

In the image below I have 'selected' 6 input boxes. enter image description here

affordability.xhtml looks as follows:

        <h:panelGrid columns="2" style="font-size: 80%" id="incomePanel">
            <f:facet name="header"><h:outputText value="Income"/></f:facet>

            <f:ajax event="blur" execute="netSalary otherSalary" render="totalIncome affordabilityBreakdown">
                <h:outputText value="Net salary as per Payslip"/>
                <p:inputText id="netSalary" style="width:250px;" value="#{campaignBean.validBatchLead.lead.leadAffordability.incNetSalary}" required="true" requiredMessage="Please enter the Net Salary"/>                    

                <h:outputText value="Other"/>
                <p:inputText id="otherSalary" style="width:250px;" value="#{campaignBean.validBatchLead.lead.leadAffordability.incOther}" required="false"/>

                <h:outputText value="Total" style="font-weight: bold; float: right"/>
                <h:outputText id="totalIncome" value="#{campaignBean.validBatchLead.lead.leadAffordability.declaredIncome}">
                    <f:convertNumber minFractionDigits="2" maxFractionDigits="2"/>
                </h:outputText>
            </f:ajax>

        </h:panelGrid>

        <h:panelGrid columns="2" style="font-size: 80%; border: 1px dashed lightgray" id="affordabilityBreakdown">

            <h:outputText value="Provisional Calculation" style="font-weight: bold;"/>
            <h:outputText value="#{campaignBean.validBatchLead.lead.leadAffordability.provisional}">
                <f:convertNumber minFractionDigits="2" maxFractionDigits="2"/>
            </h:outputText> 

            <h:outputText value="Projected Expenses" style="font-weight: bold;"/>
            <h:outputText value="#{campaignBean.validBatchLead.lead.leadAffordability.projectedExpenses}">
                <f:convertNumber minFractionDigits="2" maxFractionDigits="2"/>
            </h:outputText>                

            <h:outputText value="Disposable Income" style="font-weight: bold; background: #EE0000;"/>
            <h:outputText value="#{campaignBean.validBatchLead.lead.leadAffordability.disposableIncome}" 
                          style="font-weight: bold; background: #EE0000">
                <f:convertNumber minFractionDigits="2" maxFractionDigits="2"/>
            </h:outputText>
        </h:panelGrid>

Should be EE6. J2EE refers to versions of enterprise java prior to 5. — StephenMeyer
The alternative (which I am trying to avoid) is to add an ajax tag to each p:inputText. This does work, however is a messy workaround since the page contains 25 p:inputText tags. — StephenMeyer
Stuff like this may boil down to something ridiculous e.g. have you observed this behaviour across browsers(might be a browser quirk)? Are you absolutely sure it's nothing to do with the specific PC you're testing with? Also let's have your Primefaces version. Try to upgrade to the latest (3.4.1 as at this time) — kolossus

Bill Rosmus Bill Rosmus · Accepted Answer · 2012-09-10T06:18:55

What are trying to do with the onblur event when the page loads? Is the purpose to populate the fields? If so, could you use <f:event type="preRenderView ... > instead?

e.g. Add this to the page:

<body>
    <ui:define name="metadata">
        <f:view>
            <f:metadata>
                <f:event type="preRenderView" listener="#{campaignBean.init}" />
            </f:metadata>
        </f:view>
    </ui:define>

<ui:composition template ="...

Then you populate the fields in the 'init' the method of the campaignBean (assuming that is your managed bean). But without telling us what you are trying to do it is not easy to help. Anyone else have ideas if this isn't it? :)

JSF grouping components within f:ajax

1 Answers