title: Problem understanding component scoping in jsf. Special syntax needed for 'id' reference?
body: <p>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".</p>
  
  <p>In this case, when the calendar is selected, it runs the listener method on InputBean, and updates the panel with id="scores"</p>
  
  <p>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 <code>&lt;f:ajax&gt;</code> tag inside the selectOneListbox, to get the desired behavior. </p>
  
  <p>What I would like to happen, is once a score is selected form the selectOneListbox, to have it update a third panel.</p>
  
  <p>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)</p>
  
  <pre><code>&lt;f:ajax&gt; contains an unknown id 'scoreInfo' - cannot locate it in the context of the component j_idt24
  </code></pre>
  
  <p>Here is my xhtml file:</p>
  
  <pre><code>&lt;?xml version='1.0' encoding='UTF-8'&gt;
  &lt;!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;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"&gt;
     &lt;p:panel style="position: relative"&gt;
          &lt;h:form&gt;
               &lt;h:panelGrid columns="2" border="0"&gt;
                    Date: &lt;p:calendar value="#{inputBean.scoresDate}" mode="popup" popupIconOnly"true" showOn="button" selectListener="#{inputBean.handleDateSelect}" onSelectUpdate="scores"/&gt;
               &lt;/h:panelGrid&gt;
          &lt;/h:form&gt;
     &lt;/p:panel&gt;
     &lt;p:panel style="position: relative" id="scores"&gt;
          &lt;h:form&gt;
                &lt;h:selectOneListbox value="#{inputBean.score}" size="10"&gt;
                     &lt;f:ajax event="change" render="scoreInfo" listener="#{inputBean.handleScoreSelect}"/&gt;
                     &lt;f:selectItems value="#{inputBean.scores}" var="score" itemLabel="#{score.displayString}" itemValue="scoreId"/&gt;
                &lt;/h:selectOneListbox&gt;
          &lt;/h:form&gt;
     &lt;/p:panel&gt;
     &lt;p:panel style="position: relative" id="scoreInfo"&gt;
         &lt;h:inputText value="#{inputBean.testString}"/&gt;
     &lt;/p:panel&gt;
  &lt;/ui:composition&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>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" ? </p>
  
  <p>Your help is appreciated.</p>
  
  <p>Thanks</p>
  
  <p>P.S. - I typed the code by hand from a printed sheet of paper, so if there are any typos - I do apologize.</p>