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.
Related
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 ?
Hi guys I want to link from my Menubar to certain Tab, but always the first tab is activated I tried lot of solutions from StackOverflow but nothing works. I think the problems is that i use a preRenderView. I hope someone can help me :)
I use jsf 2.1 and primefaces 3.5
The code for the menubar
<p:menubar >
<p:submenu label="Taskbox" >
<p:menuitem value="Inbox" url="taskbox.xhtml" />
<p:menuitem value="Sent" url="taskbox.xhtml#sentTab"/>
<p:menuitem value="Trash" url="taskbox.xhtml" onclick="tabPanel.select(3)"/>
<p:menuitem value="New Message" url="#"/>
</p:submenu>
</p:menubar>
Der code for the tabs
<ui:composition template="/META-INF/templates/templateContentSplit.xhtml">
<ui:define name="metadata">
<f:metadata>
<f:event type="preRenderView" listener="#{taskboxBean.initPage}" />
</f:metadata>
</ui:define>
<ui:define name="metadata">
<f:metadata>
<f:event type="preRenderView" listener="#{taskboxBean.initPage}" />
</f:metadata>
</ui:define>
<ui:define name="title">
<h:outputText value="Taskbox" />
</ui:define>
<ui:define name="contentLeft">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet" />
<h:form id="postForm">
<p:tabView id="tabViewPosts" widgetVar="tabPanel">
<p:tab title="Inbox" id="inboxTab">
<ui:include src="/user/inboxTaskbox.xhtml" />
</p:tab>
<p:tab title="Sent" id="sentTab">
<ui:include src="/user/sentTaskbox.xhtml" />
</p:tab>
<p:tab title="Trash" id="trashTab">
<ui:include src="/user/trashTaskbox.xhtml" />
</p:tab>
</p:tabView>
</h:form>
</ui:define>
<ui:define name="contentRight">
<h:form id="contentForm">
<ui:include src="/user/detailTaskbox.xhtml" />
</h:form>
</ui:define>
</ui:composition>
For your <p:menuitem /> use an outcome attribute, which specifies the navigation case, instead of url, that's intended to be used with an absolute and not JSF related url. Here you've got a basic explanation case, based in #Daniel Camargo's suggested code:
tabs.xhtml:
<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">
<h:head />
<h:body>
<f:metadata>
<f:viewParam name="index" value="#{index}" />
<f:event type="preRenderView" listener="#{bean.initPage}" />
</f:metadata>
<h:form>
<p:menubar>
<p:submenu label="Taskbox">
<!-- Different ways of passing the view param -->
<p:menuitem value="Inbox" outcome="tabs?index=0" />
<p:menuitem value="Sent" outcome="tabs.xhtml?index=1" />
<p:menuitem value="Trash" outcome="tabs">
<f:param name="index" value="2" />
</p:menuitem>
<!-- External url -->
<p:menuitem value="Google" url="http://www.google.com"
target="_blank" />
</p:submenu>
</p:menubar>
</h:form>
<h:form id="postForm">
<p:tabView id="tabViewPosts" widgetVar="tabPanel"
activeIndex="#{index}">
<p:tab title="Inbox" id="inboxTab">
A
</p:tab>
<p:tab title="Sent" id="sentTab">
B
</p:tab>
<p:tab title="Trash" id="trashTab">
C
</p:tab>
</p:tabView>
</h:form>
</h:body>
</html>
Note the outcome attribute here let's the JSF servlet evaluate the destination url. Basically, an outcome with value of tabs will get rendered as basePath/tabs.xhtml at client side. So basically you are making the page be directed to itself, but changing the viewParam value.
See also:
When should I use h:outputLink instead of h:commandLink?
Remember that this is a zero based index. You tabPanel.select(3) will try to activate the 4th tab which doesn't exist. Try doing this:
The menu:
<h:form>
<p:menubar >
<p:submenu label="Taskbox" >
<p:menuitem value="Trash" url="taskbox.xhtml?index=2"/>
</p:submenu>
</p:menubar>
</h:form>
The Taskbox page:
<f:metadata>
<f:viewParam name="index" value="#{viewMBean.index}" />
</f:metadata>
<h:form id="postForm">
<p:tabView id="tabViewPosts" widgetVar="tabPanel" activeIndex="#{viewMBean.index}">
<p:tab title="Inbox" id="inboxTab">
A
</p:tab>
<p:tab title="Sent" id="sentTab">
B
</p:tab>
<p:tab title="Trash" id="trashTab">
C
</p:tab>
</p:tabView>
</h:form>
I'm using PF 3.5 and JSF Mojarra 2.1.
I have a dialog which I want to use appendToBody=true. This usually results in "unpredictable behavior" though.
Basically what the dialog does is, when I choose an entry (a persn entity) from a datatable, it gives me filled up input boxes which I can edit, thus editing the particular entry (person details).
Sometimes the input boxes get filled up properly with the entries data. Sometimes they dont.
This behavior does not happen with appendToBody=false.
Aside from that I'm pretty sure there are no nested forms.
As you will notice I am trying out a "One page design" with purely ajax navigation.
Main page (index.xhtml)
<h:body>
<pe:layout id="page" fullPage="true">
<!-- North -->
<pe:layoutPane id="north" position="north" minSize="140"
closable="true" resizable="false">
....
</pe:layoutPane>
<!-- West -->
<pe:layoutPane id="west" position="west" minWidth="150" size="180"
style="font-size: 14px !important;" closable="true"
styleClassHeader="menuBar" resizable="false">
<f:facet name="header">Main Menu</f:facet>
<h:form id="form1">
<p:panelMenu id="panelMenu" style="width: 160px !important">
<!-- On menu click update with Ajax centerpanel and msgPanel -->
<p:submenu label="Persons" style="font-size: 10px ">
<p:menuitem value="Person List" update=":centerpanel"
actionListener="#{layout.setAll('formPersonList.xhtml', 'Person List')}"
action="#{person.init()}">
</p:menuitem>
</p:submenu>
.....
</p:panelMenu>
</h:form>
</pe:layoutPane>
<!-- Center -->
<pe:layoutPane id="content" position="center"
style="font-size: 14px !important" styleClassHeader="menuBar">
<h:panelGroup id="centerpanel" layout="block">
<ui:include id="include" src="#{layout.navigation}" />
</h:panelGroup>
</pe:layoutPane>
</pe:layout>
The dialog is in a file formPersonList.xhtml and is outside the form
<ui:composition ....>
<h:form id="mainForm">
<p:contextMenu for="personTable">
<p:menuitem value="View Details"
process="#form" actionListener="#{person.handleSelectedPerson()}"
update=":dlgPersonGrp"
oncomplete="dlgPerson.show();">
</p:menuitem>
</p:contextMenu>
<p:dataTable id="personTable ....>
....person entities
</p:dataTable>
</h:form>
<p:dialog widgetVar="dlgPerson" showEffect="size"
width="1100" appendToBody="true">
<h:panelGroup id="dlgPersonGrp">
<ui:include src="formPerson.xhtml" />
</h:panelGroup>
</p:dialog>
</ui:composition>
Finally, the form with the input boxes: formPerson.xhtml
<ui:composition ....>
<h:form id ="subForm">
....Input boxes that are supposed to be filled up from a backing bean
and then resubmitted to edit the chosen entry
</h:form>
</ui:composition>
I have tried to dumb it down as much as possible. Let me know if you need more detail.
I know this is a old question, but I was having the same problem with Primefaces 5.
The solution was simple, I've included the attribute appendTo="#(body)" in tag.
<p:dialog header="Title" widgetVar="dlg" modal="true" appendTo="#(body)">
<h:outputText value="Dialog text..." />
<p:commandButton value="Ok" onclick="PF('dlg').close()" />
</p:dialog>
Perhaps the answer is not to use appendToBody. Do you really need it?
One of the common reasons for using appendToBody is to avoid error resulting from putting modal dialogs inside layouts. This workaround, as you've already noted, results in "unpredictable behaviour".
The better way would be just to place the dialog outside the layout.
For more details please see:
http://forum.primefaces.org/viewtopic.php?f=3&t=6154
http://forum.primefaces.org/viewtopic.php?f=3&t=16504
I am trying to use dialog element of primefaces but it is not working. so I have tried the same code provided in primefaces site. but that code is also not working.
<h:panelGrid columns="1" cellpadding="5">
<p:commandButton id="basic" value="Basic" onclick="PF('dlg1').show();" type="button" />
<p:commandButton id="modalDialogButton" value="Modal" onclick="PF('dlg2').show();" type="button"/>
<p:commandButton id="effectsDialogButton" value="Effects" onclick="PF('dlg3').show();" type="button" />
</h:panelGrid>
<p:dialog id="basicDialog" header="Basic Dialog" widgetVar="dlg1" appendToBody="false">
<h:outputText value="Resistance to PrimeFaces is futile!" />
</p:dialog>
<p:dialog id="modalDialog" header="Modal Dialog" widgetVar="dlg2" modal="true" height="100" appendToBody="false">
<h:outputText value="This is a Modal Dialog." />
</p:dialog>
<p:dialog header="Effects" widgetVar="dlg3" showEffect="explode" hideEffect="bounce" height="100" appendToBody="false">
<h:outputText value="This dialog has nice effects." />
</p:dialog>
This is the header of my page:
<!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:p="http://primefaces.org/ui">
Try opening your dialog like so:
<p:dialog id="modalDialog" header="Modal Dialog" widgetVar="dlg2" modal="true" height="100" appendToBody="false">
<h:outputText value="This is a Modal Dialog." />
</p:dialog>
<p:commandButton id="modalDialogButton" value="Modal" onclick="dlg2.show();" type="button" process="#this" update="#none"/>
Please post the header of your xhtml file and state what version of PrimeFaces you are using.
The following call:
PF('dlg2').show();
does not work with Primefaces v3.5 it works 4.0 and up. Version 4.0 supports
dlg2.show();
and
dlg2.hide();
but not for long, it will be deprecated in future versions so use PF('dlg2').show();
p:commandButton need to be inside h:form
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