primefaces :dialog does not show

Question

My Problem is p:dialog is not getting displayed. Listener is getting fired, no error messages. My requirement is: when I select a row, then the row details has to be displayed in dialog.

Kindly help me out. Thanks in advance.

<h:form id="form">  
    <p:dataTable id="cars" var="car" value="#{tableBean2.carsSmall}" paginator="true"
        rows="10" rowKey="#{car.model}" selection="#{tableBean2.selectedCar}"
        selectionMode="single">  
        <p:ajax event="rowSelect" listener="#{tableBean2.onRowSelect}"    
            update=":form1:display :form1:growl" oncomplete="PF('carDialog').show()" />
        <p:ajax event="rowUnselect" listener="#{tableBean2.onRowUnselect}"
            update=":form1:growl" />
        <f:facet name="header">  
            Select a row to display a message  
        </f:facet>  
        <p:column headerText="Model">  
            #{car.model}  
        </p:column>  
        <p:column headerText="Year">  
            #{car.year}  
        </p:column>  
        <p:column headerText="Manufacturer" >  
            #{car.manufacturer}  
        </p:column>  
        <p:column headerText="Color">  
            #{car.color}  
        </p:column>
    </p:dataTable>  
</h:form>

<h:form id="form1">
    <p:growl id="growl" showDetail="true"/>  
    <p:dialog id="dialog" header="Car Detail" widgetVar="carDialog"  
        resizable="false" position="center center" height="123"
        width="456" appendToBody="true">  
        <h:panelGrid id="display" columns="2" cellpadding="4">  
          <h:outputText value="Model:" />  
          <h:outputText value="#{tableBean2.selectedCar.model}" />  
          <h:outputText value="Year:" />  
          <h:outputText value="#{tableBean2.selectedCar.year}" />  
          <h:outputText value="Manufacturer:" />  
          <h:outputText value="#{tableBean2.selectedCar.manufacturer}" />  
          <h:outputText value="Color:" />  
          <h:outputText value="#{tableBean2.selectedCar.color}" />  
       </h:panelGrid>  
    </p:dialog>  
</h:form>

Solution

I'm not entirely sure what the PF function does but when I ran your code on my end and changed

oncomplete="PF('carDialog').show()"

to

oncomplete="carDialog.show()" 

the <p:dialog> popped up.

Comments

[Prasad Kharkar]

that is because primefaces recognizes components with their IDs. In this case, the id of <p:dialog> is carDialog. and show is implicit method for popping up.

[Andy]

@PrasadKharkar Thanks Prasad. I know that much :) but it's the PF function that's throwing me off. I'm not seeing an example so far. Still looking.

[Andy]

@PrasadKharkar The showcase uses it but when I download the source code I'm not seeing it being used (so far).

[Prasad Kharkar]

Even though not regarding this dialog, good that you downloaded the source code, it is more useful than documentations sometimes. I got to know all the ajax events from source code for datatable which were not listed in user document