The following code working in primefaces 3.0 does not work in 3.5.
Error : dialog() does not exist on javascript My query is dialog has been removed from dialog.js?? If so what is the alternative then?
function OpenDialog(currentDialog, commandSource) {
$(currentDialog).dialog('open');
var myDialogX = jQuery(commandSource).offset().left + 10;
var myDialogY = (jQuery(commandSource).offset().top - jQuery(document).scrollTop()) + 30;
//jQuery(currentDialog).dialog('option', 'position', [ myDialogX, myDialogY ]);
}
<p:commandLink id="treedialog-copy"
title="title" value="Copy tree"
oncomplete="OpenDialog('#copyTree','#treedialog-copy')" />
<p:outputPanel id="TreePanel">
<p:dialog id="copyTree" header="Tree Dialog"
styleClass="dlgAssignTree" modal="false" width="600" height="250" widgetVar="copyTrees">
<h:form id="copyTreeForm">
<p:outputPanel id="TreePanel">
<p:tree id="component2"
value="#{bean.provideTreeRootNode}" var="_node"
dynamic="true" cache="false" selectionMode="multiple"
selection="#{bean.selectedCopyNodes}">
<p:ajax event="select"
listener="#{bean.onNodeSelectCopy}" />
<p:ajax event="unselect"
listener="#{processBean.onNodeUnSelectCopy}" />
<p:treeNode>
<h:outputText value="#{_node.name}" />
</p:treeNode>
</p:tree>
</p:outputPanel>
</h:form>
</p:dialog>
</p:outputPanel>
I think you can directly crate a dialog box something like this..
<p:commandButton id="basic" value="Basic" onclick="dlg1.show();" type="button" />
<p:dialog id="basicDialog" header="Basic Dialog" widgetVar="dlg1">
<h:outputText value="Resistance to PrimeFaces is futile!" />
</p:dialog>
If you are using Primefaces then i dont thing we have to create a dialog box manually we can use their component it will increase productivity and bug fixing time
Related
I am using a PrimeFaces 6.2 p:tree component with a context menu which differ for each node. When I click left and then right the menu is rendered properly, but when I click right directly the menu is not updated. Any ideas how to solve it?
I know that there are some posts about ajax after right click (event contextMenu), but it does not help, because the context menu disappears.
Sample p:tree can look like:
<p:tree id="docs" value="#{treeContextMenuView.root}" var="doc"
selectionMode="single"
selection="#{treeContextMenuView.selectedNode}" dynamic="true">
<p:ajax event="select" update="form:contextMenu" />
<p:treeNode expandedIcon="ui-icon-folder-open"
collapsedIcon="ui-icon-folder-collapsed">
<h:outputText value="#{doc.name}" />
</p:treeNode>
<p:treeNode type="document" icon="ui-icon-document">
<h:outputText value="#{doc.name}" />
</p:treeNode>
<p:treeNode type="picture" icon="ui-icon-image">
<h:outputText value="#{doc.name}" />
</p:treeNode>
<p:treeNode type="mp3" icon="ui-icon-video">
<h:outputText value="#{doc.name}" />
</p:treeNode>
</p:tree>
and sample p:contextMenu like:
<p:contextMenu for="docs" id="contextMenu">
<p:menuitem value="View" update="messages"
actionListener="#{treeContextMenuView.displaySelectedSingle}"
icon="ui-icon-search" />
<p:menuitem value="Item for Documents"
rendered="#{treeContextMenuView.selectedNode.data.name eq 'Documents'}"
icon="ui-icon-print" />
<p:menuitem value="Delete" update="docs"
actionListener="#{treeContextMenuView.deleteNode}"
icon="ui-icon-close" />
</p:contextMenu>
Full reproducible MVCE: https://github.com/szydra/primefaces-test
edit: Recently, I have found the same issue reported for p:dataTable:
issue on github.
i need help with this. I have a 'form' which call a p:dialog through p:commandButton. That p:dialog include other p:commandButton, but that second button does not take any action, which is weird for me, because the first button works fine.
The code:
<ui:define name="body">
<br/>
<br/>
<br/>
<p:ajaxStatus onstart="PF('statusDialog').show()" onsuccess="PF('statusDialog').hide()" />
<p:dialog widgetVar="statusDialog" modal="true" draggable="false" closable="false" resizable="false" showHeader="false">
<p:graphicImage value="/resources/Images/ajax-loader.gif" alt="Por favor espere..." />
</p:dialog>
<h:form id="BuscarEmpresaForm">
<h:panelGroup id="display">
<h:panelGrid columns="2" style="margin-left: 10px;">
<p:outputLabel value="#{bundle.BuscarEmpresaBuscarLabel}" />
<h:outputLabel/>
<h:selectOneRadio id="idBusquedaRadio" value="#{cupoController.radioButtonBusqueda}">
<f:selectItem itemLabel="#{bundle.BuscarEmpresaCodigoLabel}" itemValue="Codigo" />
<f:selectItem itemLabel="#{bundle.BuscarEmpresaNombreLabel}" itemValue="Nombre" />
</h:selectOneRadio>
<h:outputLabel/>
<p:inputText id="empresa" value="#{cupoController.empresaTextoBusqueda}" required="true" requiredMessage="El campo es requerido"/>
<!--THIS BUTTON WORKS-->
<p:commandButton value="Buscar" actionListener="#{cupoController.prepareCreateEmpresa()}" action="#{cupoController.searchEmpresa()}" oncomplete="PF('dlg1').show();" update=":confirmDialogEmpresa">
</p:commandButton>
<p:message for="empresa"/>
</h:panelGrid>
</h:panelGroup>
</h:form>
<p:dialog id="dialog1" header="Mensaje" widgetVar="dlg1" minHeight="40" modal="true" appendTo="#(body)">
<h:form id="confirmDialogEmpresa">
<h:panelGroup id="display">
<h:panelGrid columns="2" rendered="#{cupoController.selectedEmpresa.codcor != null}">
<p:outputLabel value="Empresa encontrada, Continuar?"/>
<h:outputLabel/>
<p:outputLabel value="Nombre: #{cupoController.selectedEmpresa.razonsocial}"/>
<h:outputLabel/>
<p:outputLabel value="RUC: #{cupoController.selectedEmpresa.ruc}"/>
<h:outputLabel/>
<!--THIS BUTTON DOES NOT WORK-->
<p:commandButton value="Si" action="#{cupoController.buscarCupo}" icon="ui-icon-check"/>
<p:commandButton value="No" onclick="dlg1.hide();" icon="ui-icon-close" update="#none"/>
</h:panelGrid>
<h:panelGrid columns="2" rendered="#{cupoController.selectedEmpresa.codcor == null}" >
<p:outputLabel value="Empresa no encontrada"/>
<h:outputLabel/>
<p:messages />
<h:outputLabel/>
<p:commandButton value="Aceptar" onclick="dlg1.hide();" icon="ui-icon-close" update="#none"/>
</h:panelGrid>
</h:panelGroup>
</h:form>
</p:dialog>
</ui:define>
I have done some attempts replacing p:commandButton for h:commandButton but have same results.
An image showing what code outs
Thanks in advance.
I found the problem and is related to the topic: Backing beans (#ManagedBean) or CDI Beans (#Named)?
In my case i was confused. I was mixing CDI annotations with JSF annotations in the managed bean related, producing a strange behavior. Finally i have fixed letting just JSF annotations.
Core: JSF 2.0, PrimeFaces 5.0, GlassFish 4.1
I have a p:dialog. My intention is to create a list using p:datagrid and when user clicks an item this dialog will open and show its details. Please consider the example of p:datagrid in the showcase. However, currently it works fine in IE but not in Chrome. If I define "modal=true" then the browser turns black but the dialog doesn't show up.
<p:commandButton update=":form:sharePanel" value="Share" style="font-size: 10px" oncomplete="PF('dlg').show()" rendered="false">
<f:setPropertyActionListener target="#{shareController.current}" value="#{status}" />
</p:commandButton>
<p:dialog widgetVar="dlg" resizable="false" id="sharePanel" styleClass="no-border" modal="true">
<h:outputText value="#{shareController.current.url.url}" />
<h:panelGrid columns="3">
<p:dataGrid value="#{shareController.current.url.NLinkList}" var="nshare" columns="1" rendered="#{shareController.current.url.NLinkList.size() > 0}">
<h:panelGroup styleClass="tag noun">
<h:outputText value="#{nshare.noun}" />
</h:panelGroup>
</p:dataGrid>
<p:dataGrid value="#{shareController.current.url.VLinkList}" var="vshare" columns="1" rendered="#{shareController.current.url.VLinkList.size() > 0}">
<h:panelGroup styleClass="tag verb">
<h:outputText value="#{vshare.verb}" />
</h:panelGroup>
</p:dataGrid>
<p:dataGrid value="#{shareController.current.url.PLinkList}" var="pshare" columns="1" rendered="#{shareController.current.url.PLinkList.size() > 0}">
<h:panelGroup styleClass="tag prep">
<h:outputText value="#{pshare.prep}" />
</h:panelGroup>
</p:dataGrid>
</h:panelGrid>
</p:dialog>
What is wrong here?
If you are using Primefaces versions before 4.0 use dlg.show() instead of PF('dlg').show().
And try appending the dialog in body using attribute appendToBody="true", because if the Facelet is more complex and if you are using Layouts the dialog won't fire ind some browsers only model will appear.
<p:dialog appendToBody="true" >
I am using JSF 2.0 with Primefaces 3.4.2
For some strange reason I am not able to get the value in popup dialog window when a command button of row in datatable is clicked. Not sure what am I doing wrong?
Any help is highly appreciable.
I have the following in JSF page
<p:dataTable id="dataTable" var="emp" lazy="true"
value="#{myMB.lazyModel}"
selection="#{myMB.selectedEmployee}"...>
<p:column>
<p:commandButton id="edit" update=":frmedit:editDlg" process="#this"
onmousedown="dlg.show()" icon="ui-icon-pencil"
title="Edit" >
<f:setPropertyActionListener value="#{emp}"
target="#{myMB.selectedEmployee}" />
</p:commandButton>
</p:column>
Dialog code
<h:form id="frmedit">
<p:dialog header="Employees" style="font-weight:bold"
widgetVar=Dialog" resizable="false" id="dlg"
showEffect="fade" hideEffect="fade" appendToBody="true"
modal="true" width="200" height="250">
<h:panelGrid columns="2" cellspacing="5">
<h:outputText value="Employee #" />
<h:outputText value="#{myMB.selectedEmployee.empNo}"
style="font-weight:bold" />
</h:panelGrid>
And finally in ManagedBean
#Named("myMB")
#ViewAccessScoped
private Employee selectedEmployee= new Employee();
with getters and setters
Update 1
<p:column>
<p:commandButton id="edit" update=":frmedit:display" process="#this"
title="View"
icon="ui-icon-pencil" style="border-width:0;background:none;"
onmousedown="Dialog.show()">
<f:setPropertyActionListener value="#{emp}"
target="#{myMB.selectedEmployee}" />
</p:commandButton>
</p:column>
<p:dialog header="Employees" style="font-weight:bold"
widgetVar=Dialog" resizable="false" id="dlg"
showEffect="fade" hideEffect="fade" appendToBody="true"
modal="true" width="200" height="250">
<h:form id="frmedit">
<h:panelGrid id="display" columns="2" cellspacing="5">
<h:outputText value="Employee #" />
<h:outputText value="#{myMB.selectedEmployee.empNo}"
style="font-weight:bold" />
</h:panelGrid>
</h:form>
</p:dialog>
The three main reasons why this would be the case are
The dialog was not actually ajax updated
The property listener didn't set the value. You could easily debug this by adding some logging to the setter for that property
The bean was actually recreated and the selectedEmployee property was re-initialized per your
line:
Employee selectedEmployee= new Employee();
Per your comments on the previous answer, you should not have widgetVar and id for the same dialog having the same value
My vote is on (3). You should verify that the bean is not actually being trashed and recreated (constructor or #PostConstructor logging).
Try widgetVar="dlg" instead, in <p:dialog...> , according to this Example you should call
dialog from its widgetVar attribute
so dlg.show() refers to widgetVar="dlg" not the id
I try to add recaptcha in the Roo-generated xhtml:
<p:dialog id="createDialog" header="#{messages.label_create} Person" modal="true" widgetVar="createDialogWidget" dynamic="true" visible="#{personBean.createDialogVisible}" resizable="true" maximizable="true" showEffect="fade" hideEffect="explode">
<p:ajax event="close" update=":dataForm:data" listener="#{personBean.handleDialogClose}" />
<p:outputPanel id="createPanel">
<h:form id="createForm" enctype="multipart/form-data">
<h:panelGrid id="createPanelGrid" columns="3" binding="#{personBean.createPanelGrid}" styleClass="dialog" columnClasses="col1,col2,col3" />
<p:captcha id="createReCaptcha" theme="white"/>
<p:commandButton id="createSaveButton" value="#{messages.label_save}" action="#{personBean.persist}" update="createPanelGrid :growlForm:growl" />
<p:commandButton id="createCloseButton" value="#{messages.label_close}" onclick="createDialogWidget.hide()" type="button" />
</h:form>
</p:outputPanel>
</p:dialog>
And no recaptha is shown.... Where I am wrong?
Remove the dynamic="true" from your p:dialog