JSF2 How to update different components from different pages

Question

let's start with my problem:

I've got two pages: main and profession.

Both got the same template: <ui:composition template="/common/decorators/template.xhtml">

template.xhtml

.
.
.   
<app:metaHeader />
</h:head>
<h:body>
<app:status/>
<ui:debug hotkey="d" rendered="#{initParam['facelets.DEVELOPMENT']}" />
<div id="geral">
    <div id="header">
        <app:header />
    </div>
    <p:messages id="messages" showDetail="false" autoUpdate="true" closable="true" />   

    <ui:insert name="body" />
</div>
</h:body>
</html>

And the <app:header /> is:

<?xml version="1.0" encoding="ISO-8859-1"?>
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:t="http://myfaces.apache.org/tomahawk"
xmlns:c="http://java.sun.com/jstl/core"
xmlns:acegijsf="http://sourceforge.net/projects/jsf-comp/acegijsf"
xmlns:app="http://cni.org.br/tags"
xmlns:fn="http://java.sun.com/jsp/jstl/functions"
xmlns:p="http://primefaces.org/ui" xml:lang="pt" lang="pt">
<div id="header">

    <div class="content">
        <h:form>
            <div>
                <p:outputPanel>
                    <label>You are in:</label>
                    <h:selectOneMenu id="cities" value="#{bean.selectedCity}"
                        converter="omnifaces.SelectItemsConverter">
                        <f:selectItems id="selectedCity" value="#{bean.cityList}"
                            var="city" itemLabel="#{city.name}" itemValue="#{city}" />
                        <p:ajax event="change" listener="#{bean.citySession}"
                            update="?????????" />
                    </h:selectOneMenu>
                </p:outputPanel>
            </div>

        </h:form>
    </div>
</div>

So, when i select a city at the header i need to update the entire main.xhtml page, but just a few components inside profession.xhtml.

I tried using

<p:ajax event="change" listener="#{bean.citySession}" upate=":componentsIwant" />

<p:ajax event="change" listener="#{bean.citySession}" upate=":professionForm:componentsIwant" />

<p:ajax event="change" listener="#{bean.citySession}" upate=":general:professionForm:componentsIwant" />

But componentsIwant doesnt exist on main.xhtml (page where i select which profession i will detail) so i got:

Cannot find component with expression ":componentsIwant" referenced from "j_id18836674_3d6516fd:cities".

There's a way i can fix it?

Ps i CAN'T change the template, because it's the company's standard.

Answer 1

I see two ways to solve the problem:

1. Expression language

   Use an EL in update attribute of your <p:ajax /> , like:

    update="#{someBean.someCondition ? ':formId:componentId' : ''}" 

   or

    update="#{someBean.componentId}" 

2. <ui:param />

   Pass the component id by parameter:

    <ui:composition template="/template.xhtml"> <ui:param name="componentId" value=":formId:componentId" /> ... </ui:composition> 

   And use it as:

    update="#{componentId}"