Problem understanding component scoping in jsf. Special syntax needed for 'id' reference?

So I'm having a hard time understanding scoping of components in JSF. Here's an example piece of code I'm working on. I have three separate panels, in the first panel I have a primefaces calendar component. Primefaces has built-in AJAX for the calendar component, notice the "onSelectUpdate" and "selectListener".

In this case, when the calendar is selected, it runs the listener method on InputBean, and updates the panel with id="scores"

Inside the "scores" panel there is a standard jsf (not primefaces) "selectOneListbox" since there is no built-in AJAX support for selectOneListbox, I'm forced to use the JSF <f:ajax> tag inside the selectOneListbox, to get the desired behavior.

What I would like to happen, is once a score is selected form the selectOneListbox, to have it update a third panel.

When testing the first panel with the calendar component, everything worked just fine. However when testing the second panel, I get this error: (keep in mind that component "j_idt24" is the selectOneListbox I'm referring to)

<f:ajax> contains an unknown id 'scoreInfo' - cannot locate it in the context of the component j_idt24

Here is my xhtml file:

<?xml version='1.0' encoding='UTF-8'>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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:p="http://primefaces.prime.com.tr/ui"
     xmlns="http://www.w3.开发者_如何转开发org/1999/xhtml">
   <p:panel style="position: relative">
        <h:form>
             <h:panelGrid columns="2" border="0">
                  Date: <p:calendar value="#{inputBean.scoresDate}" mode="popup" popupIconOnly"true" showOn="button" selectListener="#{inputBean.handleDateSelect}" onSelectUpdate="scores"/>
             </h:panelGrid>
        </h:form>
   </p:panel>
   <p:panel style="position: relative" id="scores">
        <h:form>
              <h:selectOneListbox value="#{inputBean.score}" size="10">
                   <f:ajax event="change" render="scoreInfo" listener="#{inputBean.handleScoreSelect}"/>
                   <f:selectItems value="#{inputBean.scores}" var="score" itemLabel="#{score.displayString}" itemValue="scoreId"/>
              </h:selectOneListbox>
        </h:form>
   </p:panel>
   <p:panel style="position: relative" id="scoreInfo">
       <h:inputText value="#{inputBean.testString}"/>
   </p:panel>
</ui:composition>

For InputBean, the method "handleDateSelect" simply gets a list of scores from the database, given the selected date, then sets the in an ArrayList named "scores" - This all works perfectly.

All i'm doing right now for the method "handleScoreSelect" is changing the value of "testString" so that I can see the AJAX update, but right now it can't even find the 3rd panel.

Is there a special syntax I can use that I haven't been able to find on google, one that can break out and read from the document level instead of the level of the "selectOneListbox" ?

Your help is appreciated.

Thanks

P.S. - I typed the code by hand from a printed sheet of paper, so if there are any typos - I do apologize.

Try this syntax:

<f:ajax 
    event="change" 
    render=":scoreInfo" 
    listener="#{inputBean.handleScoreSelect}" />

The problem is that a <h:form> is a 'naming container'. Any id is treated as being within the scope of the naming container it is inside (and your ajax tag is inside the form). The colon tells it to start looking for the id from the root of your document, not start from the root of the naming container.

See the Javadoc for the findComponent() method here for the details: http://download.oracle.com/javaee/6/api/javax/faces/component/UIComponent.html#findComponent(java.lang.String)