primefaces update panel from p:autoComplete

Question

I have the p;autocomplete tag as below which populates list of contacts

<h:form id="relationshipsForm">
//code
    <p:autoComplete id="contactAutoComplete"
                                rendered="#{relationshipController.relationshipsName=='Contact'}"
                                value="#{relationshipController.contactKeyWord}"
                                completeMethod="#{contactRelationshipController.completeContacts}"
                                var="contact" itemLabel="#{contact.fullName}"
                                itemValue="#{contact}" converter="#{contactConverter}"
                                forceSelection="true" size="35" scrollHeight="200"
                                panelStyle="width:10px;">
                                <p:ajax event="itemSelect" update="relationshipsForm,graphViewPanel" />
                            </p:autoComplete> 

On selecting the contact it should ajaxically update the below tab view

<p:outputPanel id="graphViewPanel">
                <h:inputHidden id="orgViewUnMappedJSonDataList"
                    value="${relationshipController.getOrgViewUnMappedJSonData()}" />
                <h:inputHidden id="orgViewMappedJSonDataList"
                    value="${relationshipController.getOrgViewMappedJSonData()}" />

    <p:tabView scrollable="true" id="tabView" dynamic="true" cache="true">
                    <p:tab id="orgViewTab" title="Org View">
                        <h:outputScript library="js" name="go.js" />
                        <h:outputScript library="js" name="gojs_org_view.js" />
                        <h:outputStylesheet library="css" name="gojs_org_view.css" />
                    </p:tab>
                </p:tabView>
    </p:outputPanel>
</h:form>

Answer 1

You use <p:outputPanel id="graphView"> alter for <div id="graphView">.

In fact, <p:outputPanel render in clientside a div tag.