The following code implements a datatable inside a layout, in the datatable I added a menu Button whose menu Item updates the content of a dialog "outside the table" upon clicking it.
I get this error upon running the cde at the browser:
JBWEB000065: HTTP Status 500 - Cannot find component with identifier ":choice" referenced from "form:accounts:0:j_idt11".
Here is the code:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head>
<link type="text/css" rel="stylesheet"
href="#{request.contextPath}/style.css" />
</h:head>
<h:body>
<h:form id="form">
<p:dialog header="You selected" widgetVar="dlg" id="choice" resizable="false" modal="true">
This item.
</p:dialog>
<p:layout style="min-width:400px;min-height:200px;" id="layout">
<p:layoutUnit position="center">
<p:dataTable id="accounts" var="account" value="pop" rowKey="1">
<p:column headerText="ID"></p:column>
<p:column headerText="Option">
<p:growl id="messages" />
<p:menuButton value="">
<p:menuitem value="1" update="choice" oncomplete="dlg.show()" />
<p:menuitem value="2" update="choice" oncomplete="dlg.show()" />
<p:menuitem value="3" update="choice" oncomplete="dlg.show()" />
</p:menuButton>
</p:column>
</p:dataTable>
</p:layoutUnit>
</p:layout>
</h:form>
</h:body>
</html>
Update: When I add the dialog inside the databale it is seen by the menu button, but it either doesn't display properly, or opens and can't be closed.
In your case, <h:form> will prepend its id to its components. To get rid of the error change your <p:menuitem> (all three) from
<p:menuitem value="1" update="choice" oncomplete="dlg.show()" />
to
<p:menuitem value="1" update=":form:choice" oncomplete="dlg.show()" />
Useful links
How can I know the id of a JSF component so I can use in Javascript
How to find out client ID of component for ajax update/render? Cannot find component with expression "foo" referenced from "bar"
Get id of parent naming container in template for in render / update attribute
Related
I am using Jsf primefaces version 8 and trying to show the calendar field in the xhtml page. But inspite all efforts, the popup calendar field is not displaying at all in the page.
My main.xhtml page contains a p:dialog and this dialog includes another xhtml page, dateEdit.xhtml. Inside the second xhtml, I am trying to have the p:datePicker or p:calendar field. But its not working.
Below is the piece of code from my main.xhtml page:
<p:dialog closable="true" visible="false" modal="true" id="dateDialog" widgetVar="dateDialog" resizable="false" showEffect="fade" hideEffect="fade"
header="Date Edit" width="60%" height="50%" style="max-height:100%; overflow:auto; ">
<ui:include src="dateEdit.xhtml" >
</ui:include>
</p:dialog>
Below is the code snippet from the dateEdit.xhtml :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:c="http://xmlns.jcp.org/jsp/jstl/core" >
<h:head>
<f:facet name="last">
<link type="text/css" rel="stylesheet" href="../jsfStyle.css" media="all"></link>
</f:facet>
</h:head>
<h:body>
<h:form id="formDtId" enctype="multipart/form-data" method="post" >
<p:outputPanel id="editProjectInfo">
<h:panelGrid id="coreGrid" columns="3" style="margin-bottom:10px" cellpadding="7">
<p:outputLabel for="update_Date" value="Demo Date : " />
<p:calendar id="update_Date" value="#{dateManagedBean.demoDate}" mode="popup" navigator="true" pattern="yyyy-MM-dd" style="font-size:8pt;" showOn="button" >
<f:convertDateTime type="date" pattern="yyyy-MM-dd" for="update_Date"></f:convertDateTime>
</p:calendar>
</h:panelGrid>
</p:outputPanel>
</h:form>
</h:body>
</html>
But if I click on the button icon, no calendar is getting displayed. Nothing is happening.
I tried with the below code also, instead of p:calendar, but that also didn't work :
<p:datePicker id="update_Date" value="#{dateManagedBean.demoDate}" pattern="MM-dd-yyyy" showIcon="true" />
Kindly help to resolve this issue. Thanks.
I have a p:dataTable and the selected value is throwing null pointer when Im tring to get it,this situation is after put the datatable inside a modal p:dialog, but if remove the modal atribute works fine.
PD:the modal p:dialog was behid the overlay like this question
Primefaces - AjaxStatus - Dialog is behind the overlay
the answer is not working for me, because Im using primefaces 5.1, so I have to use appendTo="#(body)"
I don´t know if that is important for my problem.
Resume: the null pointer exist if the p:dialog is modal.
Here is my code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<ui:composition template="/resources/sysged.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:fn="http://java.sun.com/jsp/jstl/functions">
<ui:define name="vDoc">
<h:form id="form">
<p:panel header="Document">
<h:panelGrid columns="4">
<p:commandButton id="prev"
actionListener="#{DocumentController.priviousPage()}"
icon="ui-icon-circle-triangle-w" update="docImage next prev"
disabled="#{DocumentController.inicioLista}" />
<p:commandButton id="next"
actionListener="#{DocumentController.nextPage()}"
icon="ui-icon-circle-triangle-e" update="docImage prev next"
disabled="#{DocumentController.finalLista}" />
<p:commandButton id="anotacoes" value="Anotaçoes"
onclick="PF('dialogAnotacao').show();" />
<p:button id="voltar" outcome="pesquisaDocumento.xhtml"
value="Voltar" />
</h:panelGrid>
</p:panel>
</h:form>
<h:form id="panotation">
<p:dialog id="dialogAnotacao" closeOnEscape="true" header="Anotaçoes"
widgetVar="dialogAnotacao" modal="true" resizable="false"
appendTo="#(body)" draggable="true">
<p:dataTable id="tanotation" var="anotation"
value="#{DocumentController.arquivo.anotacaoList}"
selectionMode="single"
selection="#{DocumentController.selected}"
rowKey="#{anotation.i}">
<p:column headerText="Indice" style="text-align:left">
<h:outputText value="#{anotation.i}" />
</p:column>
<p:column headerText="text" style="text-align:left">
<h:outputText value="#{anotation.text}" />
</p:column>
</p:dataTable>
<p:contextMenu for="tanotation">
<p:menuitem value="do" update="tanotation"
icon="ui-icon-close" actionListener="#{DocumentController.doit}">
</p:menuitem>
</p:contextMenu>
</p:dialog>
</h:form>
</ui:define>
</ui:composition>
My method in the managedBean
public void doit() {
System.out.println(selected);
}
You append your <p:dialog> to the body of the html page(see appendTo attribute), as a result it is not included in any <h:form>.
This could be a problem for your <p:dataTable>
Could you place your <h:form id="panotation"> inside of your <p:dialog> and not outside ?
I'm trying open a dialog using Primefaces 3.5. I create a MenuBar and an view.xhtml with <p:dialog> .I want to open this view.xhtml as dialog modal.
I am using: JSF2 and Primefaces 3.5
I'm trying this
<h:form>
<p:menubar>
<!-- cadastros -->
<p:submenu label="Cadastro">
<p:submenu label="Participantes">
<p:menuitem value="Aluno" />
<p:menuitem value="Professor"/>
</p:submenu>
<p:separator/>
<p:menuitem value="Turma" onclick="#{menuMB.openDialog('/turma/view.xhtml')}"></p:menuitem>
</p:submenu>
<!-- termina cadastros -->
<!-- relatorios -->
<p:submenu label="Relatorios">
</p:submenu>
</p:menubar>
</h:form>
view.xhtml
<p:dialog header="Turmas" appendToBody="false" modal="true" widgetVar="turmaView">
<h:form>
<h:outputLabel value="I am a modal" />
</h:form>
</p:dialog>
managed bean
#ManagedBean
public class MenuMB {
public void openDialog(String view){
RequestContext.getCurrentInstance().execute("view.show()");
}
}
Any idea ?
Solved
view.xhtml
<p:dialog header="Turmas" widgetVar="turmaView" appendToBody="true" modal="true" resizable="false" draggable="false">
<h:form>
<h:outputLabel value="I am a modal" />
</h:form>
</p:dialog>
menubar
<h:form>
<p:menubar>
<p:submenu label="Cadastro">
<p:submenu label="Participante">
<p:menuitem value="Aluno"></p:menuitem>
<p:menuitem value="Professor"></p:menuitem>
</p:submenu>
<p:separator/>
<p:menuitem value="Turma" onclick="PF('turmaView').show()"/>
</p:submenu>
</p:menubar>
</h:form>
<ui:include src="/turma/view.xhtml"/>
now works.
It's not possible to execute server side methods wrapping them in onclick listeners or similars like that. You're confused about client side javascript functions and server side listeners. According to PF docs:
MenuItem has two use cases, directly navigating to a url using GET or doing a POST to execute an action.
So there's no way to use it for client-side specific purpose, as it's going to perform one request. What you could do is to show the dialog after it happens:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head />
<h:body>
<h:form>
<p:menubar>
<p:menuitem value="Turma" oncomplete="dlg.show();" />
</p:menubar>
<p:dialog header="Modal Dialog" widgetVar="dlg" modal="true"
height="100">
<h:outputText value="This is a Modal Dialog." />
</p:dialog>
</h:form>
</h:body>
</html>
This properly displays the dialog when the p:menuItem is clicked. An ajax request with no listener is performed and when it's completed, the javascript code to show it runs.
I'm trying to add a contextMenu to a dataTable contained inside a tab. I have been able to get the menu to show up on a dataTable which is not inside a tab and was also to get it to show up on the entire tab...but not specifically on the dataTable.
I've tried several different references in the 'for' attribute of the contextMenu...some blow up, some do not but the menu doesn't show up on right-click.
I'm using PrimeFaces 4.0. Any suggestions?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:p="http://primefaces.org/ui">
<h:head></h:head>
<h:body>
<h:form id="someForm">
<p:tabView id="tv" var="tb" value="#{TempBeans.tabs}">
<p:ajax event="tabClose" listener="#{TempBeans.tabClose}"
update="#form" />
<p:tab id="tempTab" title="#{tb.name}" closable="true">
<p:dataTable id="dTable" var="d" value="#{tb.dtbs}">
<p:column id="column1" headerText="name">
<h:outputText value="#{d.name}" />
</p:column>
<p:column id="column2" headerText="id">
<h:outputText value="#{d.id}" />
</p:column>
</p:dataTable>
</p:tab>
</p:tabView>
<p:contextMenu for=":someForm:tv:dTable">
<p:menuitem value="TableView" update="#form" icon="ui-icon-search" />
<p:menuitem value="TableDelete" update="#form" icon="ui-icon-close" />
</p:contextMenu>
</h:form>
</h:body>
</html>
Well, I was able to get the context menu to appear by changing the table to be selectable...which is sort of what I wanted anyway. However, now I have another problem...If I make the selectionMode "multiple" and use ctrl-clicks to select rows it seems to register the last right-click as a single click.
click one row
ctrl-click second row
ctrl-click third row
right-click one of the rows...deselects other rows
So it seems I would have to force my users to:
click one row
ctrl-click second row
ctrl-right-click third row
AAAAAAAAAAAAAAAAAAAAAAAAAAARRRRGH!! Deal-breaker...looks like I'm going back to prehistoric ui times and implementing multiple selection with checkboxes.
Please someone tell me I'm wrong and there's a simple way to make it not behave like this.
Anyway, here is how I eventually managed to get a contextMenu to show up:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:c="http://java.sun.com/jsp/jstl/core" xmlns:p="http://primefaces.org/ui">
<h:head></h:head>
<h:body>
<h:form id="someForm">
<p:tabView id="tv" var="tb" value="#{TempBeans.tabs}">
<p:ajax event="tabClose" listener="#{TempBeans.tabClose}" update="#form" />
<p:tab id="tempTab" title="#{tb.name}" closable="true">
<p:dataTable id="dTable" var="d" value="#{tb.dtbs}" selection="#{tb.selectedDTBs}" selectionMode="multiple" rowKey="#{d.name}">
<p:column id="column1" headerText="name">
<h:outputText value="#{d.name}" />
</p:column>
<p:column id="column2" headerText="id">
<h:outputText value="#{d.id}" />
</p:column>
</p:dataTable>
<p:contextMenu id="cMenuId" for="dTable">
<p:menuitem value="TableView" update="#form" icon="ui-icon-search" />
<p:menuitem value="TableDelete" update="#form" icon="ui-icon-close" />
</p:contextMenu>
</p:tab>
</p:tabView>
</h:form>
</h:body>
</html>
The following code contains two tabs and basic code from showcase example. I tried to put this code into a xhtml and did ui:include within the tabs and also just adding them within tabs as list below. Either way when I click the submit button, do not see any results displayed.
Thanks in advance
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<h:form>
<p:tabView id="tabs" orientation="left" styleClass=".borderlessUnit" dynamic="true">
<p:tab id="tab0" title="Test Menu 1">
<p:layout id="layout0" style="min-height:600px;">
<p:layoutUnit position="center" resizable="true" styleClass="borderlessUnit">
<h:outputLabel for="name" value="Name 1:" style="font-weight:bold"/>
<p:inputText id="name" value="#{personBean.firstname}" />
<p:commandButton value="Submit" update="display"/>
<h:outputText value="#{personBean.firstname}" id="display" />
</p:layoutUnit>
</p:layout>
</p:tab>
<p:tab id="tab1" title="Test Menu 2">
<p:layout id="layout1" style="min-height:600px;">
<p:layoutUnit position="center" resizable="true" styleClass="borderlessUnit">
<h:outputLabel for="name1" value="Name 2:" style="font-weight:bold"/>
<p:inputText id="name1" value="#{personBean.secondname}" />
<p:commandButton value="Submit1" update="display1"/>
<h:outputText value="#{personBean.secondname}" id="display1" />
</p:layoutUnit>
</p:layout>
</p:tab>
</p:tabView>
</h:form>
</html>
In use manual of PrimeFaces is documented that you should avoid nesting layout and layout units inside forms, and that each layout unit should have its own form, instead. So remove form, and put separated form inside each layoutUnit