I have a h:commandbutton in h:dataTable, and in my application have a dropdown that have ajax command to update h:dataTable. But when make update in my dataTable my commandbutton stop work.
this is my h:dataTable:
<h:dataTable value="#{viewBean.requestList}" var="o" id="request_table" class="table table-striped table-bordered table-hover" cellspacing="0" width="100%">
(...)
<h:column>
<f:facet name="header">Edit</f:facet>
<h:form>
<div style="text-align: center">
<h:panelGroup id="teste_button">
<h:commandButton title="Edit" class="btn btn-info btn-sm" action="#{navigationBean.toEdit()}" rendered="#{true}">
<span class="glyphicon glyphicon-pencil"></span>
<f:param name="selectedRequestID" value="#{o.id}" />
<f:param name="itemMenuAnterior" value="#{viewBean.itemActual}" />
</h:commandButton>
</h:panelGroup>
(...)
</div>
</h:form>
</h:column>
</h:dataTable>
this is my dropdown:
<h:form>
<h:selectOneMenu value="#{viewBean.itemActual}" id="select_filter" class="form-control">
<f:selectItems value="#{viewBean.items}" var="itematual" itemLabel="#{itematual}"/>
<f:ajax listener="#{viewBean.itemChange(event)}" render="request_table" onevent="functionName"/>
</h:selectOneMenu>
</h:form>
Related
Here is my view
<h:body>
<div id="header"></div>
<div id="upload">
<h:form id="frmMain" enctype="multipart/form-data">
<p:inputTextarea id="text" style="width: 99%" value="#{uploadfile.content}" placeholder="What are you thinking?"></p:inputTextarea>
<p:fileUpload auto="true" oncomplete="input()" id="fileIdPhoto" previewWidth="200" style="width: 100%" messageTemplate="{name}" fileUploadListener="#{uploadfile.upload}" mode="advanced" dragDropSupport="true"
multiple="true" update="messages" allowTypes="/(\.|\/)(gif|jpe?g|png)$/" />
<p:messages id="messages" autoUpdate="true" closable="true" />
<p:menubar autoDisplay="false">
<p:menuitem />
<f:facet name="options">
<p:commandButton value="Publish" update="fileIdPhoto" icon="ui-icon-extlink" actionListener="#{uploadfile.uploadPhoto}">
</p:commandButton>
</f:facet>
</p:menubar>
</h:form>
</div>
<div id="body">
<div id="post_container">
<ul>
<ui:repeat value="#{image.allpost}" var="value">
<h:form id="form">
<li>
<div id="post">
<p:commandButton rendered="false" id="dynaButton" process="#this,form" value="Show" type="button" icon="ui-icon-extlink"/> cant not trigger it so I set render false
<p:menu overlay="true" trigger="dynaButton" my="left top" at="left bottom">
<p:submenu label="Ajax">
<p:menuitem value="Delete" icon="ui-icon-disk"/>
<p:menuitem value="Update" icon="ui-icon-arrowrefresh-1-w"/>
</p:submenu>
</p:menu>
<b>#{value.content}</b> <br/>
#{value.createtime} <br/>
<br />
<p:galleria value="#{image.getImgByID(value.id)}" rendered="#{not empty image.getImgByID(value.id)}" var="a" panelWidth="720" panelHeight="400" showCaption="true">
<h:graphicImage value="data:image/jpeg;base64,#{a.imgUrl}" style="width:100%;height:100% " alt="Image Description for #{a.imgName}" title="#{a.imgName}"/>
</p:galleria>
<p:rating value="#{value.rating}" stars="10" cancel="false"/>cant change those stars by clicking on it
</div>
<div id="post_ceperator"/>
</li>
</h:form>
</ui:repeat>
</ul>
</div>
</div>
</h:body>
What I am trying to do is change the value of p:rating tag and p:menu to trigger but its seem like my page is only submitting the first form. Also how can I submit a post and div that contains my post will automatically update?
In my opinion the problem is that your components inside of the ui:repeat have all the time the same id's for each iteration.
The way i used to define ids in loops like that was to add some sort of unique prefix or suffix to them based on some field of the data over which i am iterating:
<ui:repeat value="#{image.allpost}" var="value">
<h:form id="form_#{value.id}">
<li>
<div id="post_#{value.id}">
Now each of your components, including the form, which is highly likely to be the cause of your problem, will have its unique id for each of the loop repetition.
I have a datatable and I load a modal for Edit data. But when I Edit and render the datatable nothing changed.
I mean I have a datatable and actions like delete and edit. When I press on edit I open modal then I edit the data on this modal then press Edit. As you see I make render for datatable but I can't see any changes in the datatable
<h:form id="branchesForm">
<h:panelGroup layout="block" class="box-header">
<h3 class="box-title">Branches</h3>
<h:commandButton value="Add New Branch" id="createBranchBtn" pt:data-loading-text="Loading..." pt:autocomplete="off" class="btn btn-primary sye-action-btn-loading">
<f:param name="pageType" value="create"/>
</h:commandButton>
</h:panelGroup>
<h:panelGroup layout="block" class="box-body table-responsive no-padding branches-datatable">
<div class="SYE-modal"> </div>
<h:panelGroup id="branchesListDiv" layout="block" class="container-fluid">
<h:dataTable id="example1" binding="#{index}" class="table table-hover table-bordered table-striped" value="#{branchesMB.list}" var="branch">
<h:column>
<f:facet name="header" >
<h:outputText value="#"/>
</f:facet>
<h:outputText value="#{index.rowIndex+1}"/>
<f:facet name="footer" >
<b><h:outputText value="#"/></b>
</f:facet>
</h:column>
<h:column >
<f:facet name="header">
<h:outputText value="Branch Name"/>
</f:facet>
<h:outputText value="#{branch.branchName}"/>
<f:facet name="footer">
<b><h:outputText value="Branch Name"/></b>
</f:facet>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Address"/>
</f:facet>
<h:outputText value="#{branch.branchAddress}"/>
<f:facet name="footer">
<b><h:outputText value="Address"/></b>
</f:facet>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Abbreviation"/>
</f:facet>
<h:outputText value="#{branch.branchAbbreviation}"/>
<f:facet name="footer">
<b><h:outputText value="Abbreviation"/></b>
</f:facet>
</h:column>
<h:column headerClass="syeActionDatatable">
<f:facet name="header">
<h:outputText value="Action"/>
</f:facet>
<f:facet name="footer">
<b><h:outputText value="Action"/></b>
</f:facet>
<div class="btn-group" >
<a class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" href="#">
<i class="glyphicon glyphicon-cog"></i>
<span class="caret"></span>
</a>
<ul class='dropdown-menu pull-right'>
<li>
<!--pt:data-toggle="modal" pt:data-target=".bs-example-modal-lg"-->
<h:commandLink actionListener="#{branchesMB.setEntityEditObject(branch)}" class="editDatatable" >
<f:ajax onevent="load" onerror="load" render=":branchesForm:branchEditArea"/>
<i class='glyphicon glyphicon-pencil'></i>
Edit
</h:commandLink>
</li>
<li>
<!--onclick="if (!confirm('Are you sure you want to delete this record?')) return false"-->
<h:commandLink action="#{branchesMB.destroy()}" onclick="if (!confirm('Are you sure you want to delete this record?'))
return false;">
<f:ajax render=":branchesForm:branchEditArea"/>
<f:setPropertyActionListener target="#{branchesMB.entityDeleteObject}" value="#{branch}"/>
<i class='glyphicon glyphicon-trash'></i>
Delete
</h:commandLink>
</li>
</ul>
</div>
</h:column>
</h:dataTable>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Edit Branch</h4>
</div>
<div class="modal-body">
<h:panelGroup id="branchEditArea" layout="block" class="box-body">
<ui:include src="/view/includes/messages.xhtml"/>
<h:inputHidden value="#{branchesMB.entityEditObject}" converter="BranchesConverter"/>
<h:panelGroup id="branchNameDiv" layout="block" class="form-group">
<h:outputLabel value="Branch Name" for="branchName"/>
<h:inputText id="branchName" class="form-control" value="#{branchesMB.entityEditObject.branchName}" />
</h:panelGroup>
<h:panelGroup id="branchAddressDiv" layout="block" class="form-group">
<h:outputLabel value="Branch Address" for="branchAddress"/>
<h:inputText id="branchAddress" class="form-control" value="#{branchesMB.entityEditObject.branchAddress}"/>
</h:panelGroup>
<h:panelGroup id="branchAbbreviationDiv" layout="block" class="form-group">
<h:outputLabel value="Abbreviation" for="branchAbbreviation"/>
<h:inputText id="branchAbbreviation" class="form-control" value="#{branchesMB.entityEditObject.branchAbbreviation}"/>
</h:panelGroup>
</h:panelGroup>
</div>
<div class="modal-footer">
<!--pt:data-dismiss="modal"-->
<h:commandButton id="close" value="Close" class="btn btn-default" >
<f:ajax render="branchesForm:branchesListDiv"/>
</h:commandButton>
<h:commandButton id="edit" value="Edit" action="#{branchesMB.update()}" class="btn btn-primary sye-action-btn-loading" pt:data-loading-text="Loading..." pt:autocomplete="off">
<f:ajax render=":branchesForm:branchesListDiv,:branchesForm:branchEditArea, #this" execute="branchEditArea branchesForm:branchesListDiv"/>
</h:commandButton>
<!-- <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>-->
</div>
</div>
</div>
</div>
</h:panelGroup>
</h:panelGroup>
<h:panelGroup layout="block" class="box-footer">
Branches
</h:panelGroup>
</h:form>
The mistake is here:
<f:ajax render=":branchesForm:branchesListDiv,:branchesForm:branchEditArea, #this" ... />
The render and execute attributes of <f:ajax> are space separated, not comma separated.
<f:ajax render=":branchesForm:branchesListDiv :branchesForm:branchEditArea #this" ... />
Normally, this should have thrown an exception as detailed in this Q&A How to find out client ID of component for ajax update/render? Cannot find component with expression "foo" referenced from "bar", but since Mojarra 2.2.5 it stopped validating those attributes in order to support referencing a specific <ui:repeat> iteration round (issue-2958). Spec issue 1372 was started to address this nasty quickfix and to bring back the validation.
The comma separation is only supported in PrimeFaces <p:ajax> and this is most likely where your confusion came from. It supports both space and comma separation. It's strongly recommended to not use comma separation in <p:ajax> as it's in long term only confusing when you come back to <f:ajax>.
i don't know why i get previous data when i use dialog that i call it from datatable, when i open the dialog and leave required field empty and press edit when i close the dialog and open another row i notice that the old data is appear in the fields
here's my code
<h:form id="content" prependId="false">
<c:set target="#{facilityMB}" property="facilityType" value="Recreation"/>
<h:panelGrid class="ipmagix-mainFrom" cellpadding="0" cellspacing="0" columns="1">
<h:panelGroup layout="block" class="ipmagix-breadcrumb">
<ul class="breadcrumb">
<li>Home <span class="divider">/</span></li>
<li>Services <span class="divider">/</span></li>
<li class="active">Recreation Promotion</li>
</ul>
</h:panelGroup>
<h:panelGroup layout="block" class="panel panel-primary">
<h:panelGroup layout="block" class="panel-heading">
<i class="icon-white icon-list"></i>
<i></i>
<h:outputText value="#{bundle.facilityRecreationList}"/>
</h:panelGroup>
<h:panelGroup layout="block" class="panel-body">
<p:messages id="messagesForList" showDetail="false" autoUpdate="false" closable="true"/>
<h:panelGroup layout="block" class="ipmagix-list-width" id="facilityListForm">
<ui:include src="facility-view.xhtml"/>
</h:panelGroup>
</h:panelGroup>
</h:panelGroup>
<h:panelGroup layout="block" class="panel panel-primary">
<h:panelGroup layout="block" class="panel-heading">
<i class="icon-white icon-plus"></i>
<i></i>
<h:outputText value="#{bundle.facilityRecreationAdd}" />
</h:panelGroup>
<h:panelGroup layout="block" class="panel-body">
<p:messages id="messages" showDetail="false" autoUpdate="false" closable="true"/>
<h:panelGroup layout="block" class="ipmagix-form-width form-horizontal" id="facilityAddForm">
<div class="control-group">
<h:outputLabel for="facilityName" class="control-label" value="#{bundle.name}"></h:outputLabel>
<div class="controls">
<p:inputText value="#{facilityMB.facilityName}" id="facilityName" maxlength="40" required="true" requiredMessage="#{validation.emptyName}" />
<p:watermark value="#{bundle.name}" for="facilityName"/>
</div>
</div>
<div class="control-group">
<h:outputLabel for="language" class="control-label" value="#{bundle.language}"></h:outputLabel>
<div class="controls">
<p:selectOneMenu id="language" value="#{facilityMB.languageId}">
<f:selectItems value="#{facilityMB.languageList}" var="lang" itemValue="#{lang.languageID}" itemLabel="#{lang.languageName}" />
</p:selectOneMenu>
</div>
</div>
<div class="control-group">
<h:outputLabel for="facilityDesc" class="control-label" value="#{bundle.description}"></h:outputLabel>
<div class="controls">
<p:inputTextarea value="#{facilityMB.facilityDesc}" id="facilityDesc" maxlength="100" style="width: 80%" autoResize="false" rows="3" required="true" requiredMessage="#{validation.emptyDescription}" />
<p:watermark value="#{bundle.description}" for="facilityDesc"/>
</div>
</div>
<h:panelGroup layout="block" id="uploader" class="control-group">
<h:outputLabel class="control-label" value="#{bundle.imageURL}"></h:outputLabel>
<div class="controls">
<p:fileUpload fileUploadListener="#{facilityMB.handleFileUpload}" mode="advanced"
update="uploader, messages" auto="true" allowTypes="/(\.|\/)(gif|jpe?g|png)$/"/>
</div>
</h:panelGroup>
<div class="control-group well well-small">
<p:commandButton id="saveFacility" value="#{bundle.save}" styleClass="btn btn-mini btn-primary" icon="ui-icon-plus" action="#{facilityMB.saveFacility()}"
oncomplete="filter();" update ="facilityAddForm, facilityListForm, messages">
</p:commandButton>
</div>
</h:panelGroup>
</h:panelGroup>
</h:panelGroup>
</h:panelGrid>
<h:panelGroup layout="block" id="uiBlock">
<p:blockUI block="facilityListForm" trigger="saveFacility" >
LOADING<br />
<p:graphicImage value="#{resource['images:ajax-loader.gif']}"/>
</p:blockUI>
<p:blockUI block="facilityAddForm" trigger="saveFacility" >
LOADING<br />
<p:graphicImage value="#{resource['images:ajax-loader.gif']}"/>
</p:blockUI>
</h:panelGroup>
</h:form>
<h:form id="dialogForm" prependId="false">
<p:dialog id="dialog" modal="true" width="80%" resizable="false" header="Edit Special Promotion" widgetVar="dlg" dynamic="true">
<p:ajax event="close" update=":content:facilityListForm" />
<h:panelGroup layout="block" id="dialogContent">
<ui:include src="facility-edit.xhtml"/>
</h:panelGroup>
</p:dialog>
</h:form>
</ui:define>
and this is view page is be included
<p:dataTable widgetVar="tableVar" id="facilityDataTable" scrollWidth="100%" value="#{facilityMB.facilityList}" var="facility" paginator="true" editable="true" emptyMessage="#{bundle.emptyData}" rows="5" filteredValue="#{facilityMB.facilityFilterList}" >
<p:column headerText="Image" width="100">
<p:lightBox height="100">
<h:outputLink value="#">
<img src="#{facility.imageURL}" width="100" height="100"/>
</h:outputLink>
<f:facet name="inline">
<img src="#{facility.imageURL}" width="500" height="500"/>
</f:facet>
</p:lightBox>
</p:column>
<p:column headerText="#{bundle.name}" sortBy="#{facility.facilityName}" filterBy="#{facility.facilityName}" rendered="#{facilityMB.facilityType != 'Special Promotion'}">
<p:cellEditor >
<f:facet name="output">
<h:outputText id="ink" value="#{facility.facilityName}" />
</f:facet>
<f:facet name="input">
<h:inputText value="#{facility.facilityName}" maxlength="40" required="true" requiredMessage="The name is not valid"/>
</f:facet>
</p:cellEditor>
</p:column>
<p:column width="5%" headerText="#{bundle.language}" sortBy="#{facility.languageID.languageName}" filterBy="#{facility.languageID.languageName}">
<h:outputText value="#{facility.languageID.languageName}"/>
</p:column>
<p:column headerText="#{bundle.description}" sortBy="#{facility.facilityDescription}" filterBy="#{facility.facilityDescription}" rendered="#{facilityMB.facilityType != 'Special Promotion'}">
<p:cellEditor >
<f:facet name="output">
<h:outputText value="#{facility.facilityDescription}" />
</f:facet>
<f:facet name="input">
<h:inputText value="#{facility.facilityDescription}" maxlength="100" required="true" requiredMessage="The description is not valid"/>
</f:facet>
</p:cellEditor>
</p:column>
<p:column width="2%">
<p:commandLink styleClass="ui-icon ui-icon-trash" immediate="true"
oncomplete="filter()" action="#{facilityMB.deleteFacility(facility)}" update=":content:facilityDataTable, :content:messagesForList">
</p:commandLink>
</p:column>
<p:column width="4%">
<p:commandButton id="basic" value="Edit" immediate="true" action="#{facilityMB.prepareEdit(facility)}" oncomplete="dlg.show();filter();" update=":dialogForm:dialogContent" >
<f:setPropertyActionListener target="#{facilityMB.selectedFacility}" value="#{facility}"/>
</p:commandButton>
</p:column>
</p:dataTable>
Do not keep p:dialog inside h:form, instead keep h:form inside p:dialog.
Then you can update the h:form or any h:panelGroup inside p:dialog.
If you want to do it from Javascript use loadContents() function on p:dialog's widgetWar object.
For Example:
<h:form id="form1">
<p:commandButton update=":form2" oncomplete="myDialogWidget.loadContents()"/>
</h:form>
<p:dialog widgetWar="myDialogWidget" appendToBody="true">
<h:form id="form2">
....
</h:form>
</p:dialog>
Use update=":dialogForm" on edit command button. So whenever you open dialogbox, previous data will get refreshed.
how're you?
Maybe a newbie question now. Now I have one input and a "submit" button inside a form. When I click in submit, this doesn't call any method, this just opens a <p:dialog>. When this dialog is opened, the variable in input wasn't setted, so another input I have in doesn't show anything.
See the images to understand:
After click in "submit" (Adicionar):
This second image must show exactly the same value of the first input, but as you can see this just shows a empty input.
Now let's go to my code.
Here's my JSF:
<h:form id="inserirDisciplina">
<h:inputText styleClass="form-control" id="disciplina" value="#{cursoMBean.nome}"
valueChangeListener="#{cursoMBean.atualizarListagemPesquisa}">
// atualizarListagemPesquisa just update the arraylist to be shown in dataTable
<f:ajax event="keyup" render=":meuForm:minhaTabela" />
</h:inputText>
<h:commandButton value="Adicionar" styleClass="btn btn-md btn-success">
<p:ajax event="click" update=":meuForm:display" render=":meuForm:dialog" oncomplete="PF('insert').show();" onerror="alert('erro');" />
</h:commandButton>
<p:dialog id="dialog" header="Inserir Curso" widgetVar="insert" resizable="false" modal="true" width="600" height="500" hideEffect="clip" closeOnEscape="true" focus="enviar">
<h:panelGrid id="display" styleClass="col-lg-10 center">
<label for="nome">Nome:</label>
<p:inputText styleClass="form-control adicionar" id="nome" value="#{cursoMBean.nome}" />
</h:panelGrid>
...
MBean:
private String nome;
public String getNome() {
return nome;
}
public void setNome(String nome) {
this.nome = nome;
}
Edit (new View):
<h:form id="inserirDisciplina">
<div class="form-group">
<div class="col-md-10">
<h:inputText styleClass="form-control" id="disciplina" value="#{cursoMBean.nome}" valueChangeListener="#{cursoMBean.atualizarListagemPesquisa}">
<f:ajax event="keyup" render=":meuForm:minhaTabela" />
</h:inputText>
</div>
<div class="col-md-2">
<h:commandButton value="Adicionar" styleClass="btn btn-md btn-success" process="disciplina" partialSubmit="true">
<p:ajax event="click" update=":meuForm:display" render=":meuForm:dialog" partialSubmit="true" process="disciplina" oncomplete="PF('insert').show();" onerror="alert('erro');" />
</h:commandButton>
</div>
</div>
</h:form>
<p:messages autoUpdate="true" />
<p:dialog id="dialog" header="Inserir Curso" widgetVar="insert"
resizable="false" modal="true" width="600" height="500"
hideEffect="clip" closeOnEscape="true">
<h:form>
<h:panelGrid id="display" styleClass="col-lg-10 center" style="margin-top: 10px; margin-bottom: 15px;">
<label for="nome">Nome:</label>
<p:inputText styleClass="form-control adicionar" id="nome" value="#{cursoMBean.nome}">
</p:inputText>
</h:panelGrid>
<h:panelGrid styleClass="col-lg-10 center">
<p:columnGroup>
<label for="disciplinas">Disciplinas do Curso:</label>
<h:selectManyCheckbox style="margin-bottom: 40px;" id="disciplinas" value="#{cursoMBean.listaDisciplinasDoCurso}" converter="omnifaces.SelectItemsConverter">
<f:selectItems value="#{cursoMBean.listaTodasDisciplinas}" var="disciplina" itemValue="#{disciplina}" itemLabel="#{disciplina.nome}" />
</h:selectManyCheckbox>
</p:columnGroup>
</h:panelGrid>
<h:panelGrid styleClass="col-lg-10 center">
<p:columnGroup>
<h:commandButton id="enviar" styleClass="btn btn-lg btn-success pull-right" value="Adicionar" action="#{cursoMBean.cadastrar}">
<f:ajax event="click" execute="#form" onevent="insert.hide()" render=":meuForm:minhaTabela" listener="#{cursoMBean.cadastrar}" />
</h:commandButton>
</p:columnGroup>
</h:panelGrid>
</h:form>
</p:dialog>
What I'm doing wrong?
Try the following code for the button:
<p:commandButton value="Adicionar" styleClass="btn btn-md btn-success"
process="disciplina" partialSubmit="true" update=":inserirDisciplina:display"
oncomplete="insert.show();" onerror="alert('erro');">
</p:commandButton>
I have a menutab on my template that i am using on every page. I would like to update a component from the template from another paged which is based on the template.
Its working like just any other emailpage, as soon as i read an email, it should update the number of the unread emails. The number is shown in the menutab in the template.xhtml and the emails are on my test.xhtml. As soon as I read an email it should update the number of the unread emails in the menutab in template.xhtml.
this is my template.xhtml
<ui:define name="navi">
<h:form id="navForm">
<div id="MMeineVersicherungen" class="hauptmenu">
<h:commandLink action="#{navigationController.switchView('1')}">#{messages['menu.1']}</h:commandLink>
</div>
<div id="MPolizzen" class="menuitem">
<h:commandLink action="#{navigationController.switchView('1.1')}"
styleClass="#{navigationController.isAktPageId('1.1') or navigationController.isAktPageId('1') ? 'activelink' : ''}">- #{messages['menu.1.1']}</h:commandLink>
</div>
<div id="MSchaeden" class="menuitem">
<h:commandLink action="#{navigationController.switchView('1.2')}"
styleClass="#{navigationController.isAktPageId('1.2') ? 'activelink' : ''}">- #{messages['menu.1.2']}</h:commandLink>
</div>
<div id="MTopKunden" class="menuitem">
<h:commandLink action="#{navigationController.switchView('1.3')}"
styleClass="#{navigationController.isAktPageId('1.3') ? 'activelink' : ''}">- #{messages['menu.1.3']}</h:commandLink>
</div>
<div id="MMeineDaten" class="hauptmenu">
<h:commandLink action="#{navigationController.switchView('2')}">#{messages['menu.2']}</h:commandLink>
</div>
<div id="MKundendaten" class="menuitem">
<h:commandLink action="#{navigationController.switchView('2.1')}"
styleClass="#{navigationController.isAktPageId('2.1') or navigationController.isAktPageId('2') ? 'activelink' : ''}">- #{messages['menu.2.1']}</h:commandLink>
</div>
<div id="MBenutzer" class="menuitem">
<h:commandLink action="#{navigationController.switchView('2.2')}"
styleClass="#{navigationController.isAktPageId('2.2') ? 'activelink' : ''}">- #{messages['menu.2.2']} </h:commandLink>
</div>
<div id="MPostfach" class="hauptmenu">
<h:commandLink action="#{navigationController.switchView('3')}"
styleClass="#{navigationController.isAktPageId('3') ? 'activelink' : ''}">(#{post.getAnzahlNeueNachrichten()}) #{messages['menu.3']} </h:commandLink>
</div>
<div id="MKommunikationsvereinb" class="hauptmenu">
<h:commandLink action="#{navigationController.switchView('4')}"
styleClass="#{navigationController.isAktPageId('4') ? 'activelink' : ''}">#{messages['menu.4']}</h:commandLink>
</div>
<div id="MAbmelden" class="hauptmenu" style="margin-top: 20px;">
<h:commandLink action="#{loginController.logout}"
value="#{messages['menu.5']}" />
</div>
</h:form>
</ui:define>
this is test.xhtml
<ui:define name="main">
<h:form id="postform">
<p:dialog id="msgdlg" dynamic="true" modal="true" widgetVar="msgdlg"
width="600" height="500">
<f:facet name="header">#{post.aktNachricht.subject}</f:facet>
<p:ajax event="close" listener="#{post.closeDlg}" />
<p:hotkey bind="esc" handler="msgdlg.hide(); " />
<ui:include src="#{post.view}" />
</p:dialog>
<p:tabView id="posttabview" activeIndex="0" cache="true">
<p:tab id="empftab" title="#{messages['post.empfangen']}"
titleStyleClass="thementab">
<p:dataTable value="#{post.empfangenList}" var="msg">
<p:column styleClass="coldatum">
<p:commandLink action="#{post.showNachricht(msg)}"
oncomplete="msgdlg.show();" update=":postform">
<h:outputText value="#{msg.datum}"
styleClass="#{msg.gelesen ? '' : 'unread'}">
<f:convertDateTime pattern="dd.MM.yyyy"
timeZone="Europe/Berlin" />
</h:outputText>
</p:commandLink>
</p:column>
<p:column>
<h:outputText value="#{msg.subject}"
styleClass="#{msg.gelesen ? '' : 'unread'}" />
</p:column>
</p:dataTable>
</p:tab>
<p:tab id="sendtab" title="#{messages['post.gesendet']}"
titleStyleClass="thementab">
</p:tab>
</p:tabView>
<br />
<p:commandButton value="#{messages['post.neu']}" action="#{post.neu}"
update="msgdlg" oncomplete="msgdlg.show();" />
</h:form>
</ui:define>