Getting Javascript error while using p:commandButton and p:dialog

Question

I am getting a javacript error when I click on the p:commandButton to display ap:dialog.

Please find the errors below:

Message: Object doesn't support this property or method
Line: 1
Char: 169
Code: 0
URI: http://localhost:8080/idm/javax.faces.resource/dialog/dialog.js.xhtml?     ln=primefaces&v=2.2.1

Message: Object doesn't support this property or method
 Line: 1
 Char: 133
 Code: 0
 URI: http://localhost:8080/idm/javax.faces.resource/button/button.js.xhtml?ln=primefaces&v=2.2.1

Here is the code block:

     <ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.prime.com.tr/ui" 
xmlns:f="http://java.sun.com/jsf/core"
xmlns:c="http://java.sun.com/jsp/jstl/core">

<p:commandButton value="save"  onclick="dlg1.show();" ></p:commandButton>
     <p:dialog id="basicDialog" header="Basic Dialog" widgetVar="dlg1">  
  <h:outputText value="Resistance to PrimeFaces is futile!" />  
</p:dialog>
      </ui:composition>

All the other primefaces components are working fine.

Any help would be appreciated.

Answer 1

Yes we are using another copy of jQuery

Remove it. PrimeFaces as being a JSF component library based on top of jQuery/jQuery UI already auto-includes its bundled jQuery file for among others the dialog component. Multiple copies of jQuery would only conflict with each other, resulting in the kind of JS errors like the one you're facing.

If you intend to use jQuery on pages which do not necessarily use PrimeFaces components which auto-include the PrimeFaces-bundled jQuery file, then add this line to <h:head> .

<h:outputScript library="primefaces" name="jquery/jquery.js" />

This way PrimeFaces-bundled jQuery file is always included and PrimeFaces won't auto-include duplicate jQuery files if some PrimeFaces component happen to require it.