jsf - Primefaces - Cannot find component with identifier outside the datatable

Question

 <ui:define name="content">
    <f:view>                        
    <h:form id="myForm" styleClass="form" >

        <p:dataTable var="provider" id="ss"  value="#{providerSelectBean.providerList}" rowKey="#{provider.license}"  

            selection="#{providerSelectBean.selectedProvider}" selectionMode="single"> 

            <p:ajax listener="#{providerSelectBean.onRowSelect}"    
                            update=":myForm:output"event="rowSelect"/>  

            <p:column sortBy="#{provider.license}" width="110" >
                <f:facet name="header">
                    <h:outputText value="License#" />
                </f:facet>
                <h:outputText value="#{provider.license}" />
            </p:column>

            <p:column sortBy="#{provider.prgName}" width="110" >
                <f:facet name="header">
                    <h:outputText value="Program Name" />
                </f:facet>
                <h:outputText value="#{provider.prgName}" />
            </p:column>

        </p:dataTable><br/>

        <p:panelGrid id="output" >
            <h:outputText value="License" />
            <h:outputText value="#{provider.license}" /> 
        </p:panelGrid>

    </h:form>           
    </f:view>

</ui:define>    

This is my first stint with JSF2.0 and primefaces 3.4.1 and the <p:ajax update gives an error

javax.faces.FacesException: Cannot find component with identifier  
":myForm:output"  referenced from "myForm:ss"

Answer 1

Try to inspect the generated HTML code and see the actual id being generated for your panelGrid and update that id. If it happens to be dynamic, you can always use the JQuery CSS selectors (I find myself doing that pretty often). In your case, you can go like this:

update="@([id$=output])"

This expression stands for every component whose id ends with output. Take a look at the JQuery docs for more info.