Primefaces 5.0 dialog widgetvar

Question

I am building website using primefaces 5 and wildfly server. I have a problem with using component. I have with in each row as follows. Button have defined actionlistener property that invokes backing bean method and after that it should display dialog. Here is some code:

<?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="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:p="http://primefaces.org/ui"
                xmlns:pt="http://java.sun.com/jsf/composite/components"
                template="../templates/mainTemplate.xhtml">

    <ui:define name="title"></ui:define>

    <ui:define name="main-content">

        <h:form>
            <p:dataTable id="dataTable" value="#{bean.list}" var="item"
                         styleClass="hide-column-header small-text">

                <!-- some columns -->

                <p:column style="width: 18%; text-align: center;">
                    <p:commandButton value="Open dialog" actionListener="#{bean.buttonListener(item)}" oncomplete="PF('dlg').show();"/>
                </p:column>

            </p:dataTable>
        </h:form>

        <p:dialog id="dialog" widgetVar="dlg" resizable="false" modal="true"
                  header="Dialog">
            <h:form> <!-- some inputs --> </h:form>
        </p:dialog>
    </ui:define>

</ui:composition>

But it is not working. I check chrome console and got message "Widget for var 'Widget for var 'dlg' not available!" when click on button so I checked 'Primefaces.widgets' and indeed there is no widget for my dialog. Can anyone help me with that?

// edit
Ok I finally get it to work. By trial and error i found this line in my template:

<script type="text/javascript" src="//code.jquery.com/jquery-2.1.1.min.js"></script>

After removing it everything started to work as planned. I think that it is because primefaces come with own version of jquery right?

Answer 1

Primefaces already has a jQuery, so it's very recommended to not to use another jQuery lib while working with Primefaces.

Try to remove you external jQuery lib and call the dialog by the command PF('dlg').show();

You can check this and other changes in the migration guide at: https://code.google.com/p/primefaces/wiki/MigrationGuide