I got a <p:treeTable> that works perfectly as showcase, I open a dialog to see the detail of each node... the dialog have a <h:selectOneMenu> and it's not working. I don't know why, send me the error "Target Unreachable" but if I put the attribute into a <h:outputText> it's working (it means that it's not null). What is happening?
<p:row>
<p:column colspan="4" style="width:800px">
<p:dialog id="edit" widgetVar="edit" header="Edit" showEffect="clip"
hideEffect="explode" position="center,center" width="520" modal="true" closable="false"
closeOnEscape="true" resizable="false" dynamic="true">
<h:panelGrid width="100%">
<p:row>
<p:column >
Name
</p:column>
<p:column>
<p:inputText value="#{levelBean.selectedLevel.name}" />
</p:column>
</p:row>
<p:row>
<p:column >
Description
</p:column>
<p:column>
<p:inputText value="#{levelBean.selectedLevel.description}" />
</p:column>
</p:row>
<p:row>
<p:column >
Level
</p:column>
<p:column>
<!-- this its showing OK !! -->
<h:outputText value="#{levelBean.selectedLevel.id.idLevel}"/>
<!-- this mark target unreachable -->
<h:selectOneMenu id="cbo" style="width=200px"
value="#{levelBean.selectedLevel.id.idLevel}" >
<f:selectItems value="#{cboLevelBean.list}" var="levelEdit"
itemValue="#{levelEdit.id.idNivel}"
itemLabel="#{levelEdit.name}"
/>
</h:selectOneMenu>
</p:column>
</p:row>
</h:panelGrid>
</p:dialog>
<p:treeTable id="treeTableLevels" value="#{levelBean.root}" var="subLevel" style="width:800px">
<f:facet name="header">
Levels
</f:facet>
<p:column headerText="#{subLevel.object.levelName}">
<h:outputText value="#{subNivel.object.nameSubLevel}" />
</p:column>
<p:column style="width:24px">
<p:commandLink update=":levelsForm:edit" oncomplete="PF('edit').show()" title="Level Detail" styleClass="ui-icon ui-icon-search">
<f:setPropertyActionListener value="#{subLevel}" target="#{levelBean.selectedLevel}" />
</p:commandLink>
</p:column>
</p:treeTable>
</p:column>
</p:row>
Thanks for any help!!
I fond the reason... I just put the selectonemenu into another form and it works.. but I don't know why.. can somebody explain?
<h:form id="someform">
<p:selectOneMenu id="cbo" style="width: 200px"
value="#{levelBean.selectedLevel.id.idLevel}">
<f:selectItems value="#{cboLevelBean.list}" var="levelEdit"
itemValue="#{levelEdit.id.idNivel}"
itemLabel="#{levelEdit.name}"/>
</p:selectOneMenu>
</h:form>
Anyway hope this help to others!
Related
JSF, Primefaces Showcase 6.0
Please could you help me? I'm trying to refresh a table which is in a p:dialog, from other p:dialog from here
<p:dialog header="Editar Estado Ficha" widgetVar="dialogo3"
id="dialogo3" modal="true" height="275" width="400">
<h:form id="form9">
<p:panelGrid columns="2">
<h:outputText value="Fecha:" />
<h:outputText value="#{controllerFichaEstado.fecha}" />
<h:outputText value="Estado:" />
<h:outputText value="#{controllerFichaEstado.id_estadoS}" />
<h:outputText value="Observacion:" />
<p:inputTextarea value="#{controllerFichaEstado.observacion}"
cols="10" style="width:100%" required="true"
requiredMessage="Especifique la observacion" />
<p:commandButton value="Actualizar" update=":form7:tabla2"
icon="ui-icon-pencil"
actionListener="#{controllerFichaEstado.actionListenerActualizar()}"></p:commandButton>
</p:panelGrid>
</h:form>
</p:dialog>
to this datatable
<p:dialog header="Asignar estado de ficha" widgetVar="fe"
id="estadoficha" modal="true" height="300" width="75%">
<h:form id="form7">
<p:panel header="LISTA DE ESTADO DE FICHA">
<p:dataTable value="#{controllerFichaEstado.listadoxficha}" var="c"
id="tabla2">
<p:column headerText="FICHA">
<h:outputText value="#{c.ficha.idFicha}" />
</p:column>
<p:column headerText="NOMBRE">
<h:outputText value="#{c.ficha.estudiante.nombreE}" />
</p:column>
<p:column headerText="APELLIDO">
<h:outputText value="#{c.ficha.estudiante.apellidoE}" />
</p:column>
<p:column headerText="ESTADO FICHA">
<h:outputText value="#{c.estado.descripcion}" />
</p:column>
<p:column headerText="FECHA">
<h:outputText value="#{c.fechaEstado}" />
</p:column>
<p:column headerText="OBSERVACION" style="width:300px">
<h:outputText value="#{c.observacionEstado}" />
</p:column>
<p:column style="width:80px">
<p:commandButton icon="ui-icon-pencil" update="form9"
onclick="PF('dialogo3').show();"
actionListener="#{controllerFichaEstado.actionListenerCargar(c)}"></p:commandButton>
<p:commandButton icon="ui-icon-trash" update=":form7:tabla2"
actionListener="#{controllerFichaEstado.actionListenerEliminar(c.idFichaestado,c)}"></p:commandButton>
</p:column>
</p:dataTable>
</p:panel>
</h:form>
<p:commandButton icon="ui-icon-pencil" value="Asignar"
actionListener="#{controllerFichaEstado.limpiar()}"
onclick="PF('ingresoeficha').show();"></p:commandButton>
</p:dialog>
I supposed with this code it going to work but it doesn't
update=":form7:tabla2", actually it works with a full refresh page (F5), I'd like to work without an all refreshing page
I'm using primefaces and I want to populate two datatables with same list.
When I select any one of the books, two panels are shown. The first one shows the details of the book and the author(s). The authors being displayed in the first panel is an editable datatable. I also want to display the same datatable in the second panel. But as you can see it says "No records found". How do I achieve it?
My jsf page is as below:
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
template="/WEB-INF/templates/Layout.xhtml">
<ui:define name="content">
<f:view>
<h:form id="form">
<p:growl id="msgs" showDetail="true"/>
<p:dataTable value="#{webBooks.entries}" var="book" id="bookList"
styleClass="order-table"
rows="3" paginator="true" editMode="true" editable="true">
<div>
<f:facet name="header">
<p:outputLabel value="Books List"/>
</f:facet>
</div>
<p:columnGroup type="header">
<p:row>
<p:column style="width:10px"/>
<p:column headerText="Id" style="width:30px"/>
<p:column headerText="Book Title" style="width:200px"/>
<p:column headerText="Price" style="width:30px"/>
</p:row>
</p:columnGroup>
<p:column>
<p:commandButton update=":form:bookDetail"
onclick="PF('bookDialog').show(), PF('authorDialog').show()"
title="View Book Detail"
icon="fa fa-info-circle">
<f:setPropertyActionListener value="#{book}" target="#{webBooks.selectedBook}"/>
</p:commandButton>
</p:column>
<p:column>
<p:outputLabel value="#{book.id}"/>
</p:column>
<p:column>
<p:outputLabel value="#{book.title}"/>
</p:column>
<p:column>
<p:outputLabel value="#{book.price}"/>
</p:column>
</p:dataTable>
<p:panelGrid columns="2">
<p:panel id="bookDetail"
header="Book Info"
closable="true"
toggleable="true"
widgetVar="bookDialog" visible="false" style="width:420px;height:250px;">
<p:panelGrid columns="2"
rendered="#{not empty webBooks.selectedBook}">
<h:outputLabel value="Id" />
<p:outputLabel value="#{webBooks.selectedBook.id}"
rendered="#{webBooks.selectedBook.editable}"/>
<p:outputLabel value="#{webBooks.selectedBook.id}"
rendered="#{not webBooks.selectedBook.editable}"/>
<p:outputLabel value="Title"/>
<p:inputText value="#{webBooks.selectedBook.title}"
rendered="#{webBooks.selectedBook.editable}"/>
<p:outputLabel value="#{webBooks.selectedBook.title}"
rendered="#{not webBooks.selectedBook.editable}"/>
<p:outputLabel value="Price"/>
<p:inputText value="#{webBooks.selectedBook.price}"
rendered="#{webBooks.selectedBook.editable}"/>
<p:outputLabel value="#{webBooks.selectedBook.price}"
rendered="#{not webBooks.selectedBook.editable}"/>
<p:outputLabel value="Author(s)" />
<p:dataTable value="#{webBooks.selectedBook.authoredBy}"
var="authoredBy"
id="authorList"
scrollable="true"
scrollHeight="70"
scrollWidth="300"
editable="true">
<p:ajax event="rowEdit" listener="#{webBooks.onAuthorEdit}" update=":form:msgs" />
<p:ajax event="rowEditCancel" listener="#{webBooks.onAuthorEditCancel}" update=":form:msgs" />
<p:columnGroup type="header">
<p:row>
<p:column style="width:30px" headerText="Id"/>
<p:column style="width:100px" headerText="Author Name"/>
</p:row>
</p:columnGroup>
<p:column>
<p:outputLabel value="#{authoredBy.id}"/>
</p:column>
<p:column>
<p:cellEditor>
<f:facet name="output"><h:outputText value="#{authoredBy.name}"/></f:facet>
<f:facet name="input"><p:inputText value="#{authoredBy.name}" style="width:100%" label="Author Name"/></f:facet>
</p:cellEditor>
</p:column>
<p:column style="width:32px">
<p:rowEditor />
</p:column>
</p:dataTable>
</p:panelGrid>
<p:commandButton value="Edit"
action="#{webBooks.edit(webBooks.selectedBook)}"
rendered="#{not webBooks.selectedBook.editable}"
update=":form:bookDetail"/>
<p:commandButton value="Save"
actionListener="#{webBooks.save(webBooks.selectedBook)}"
rendered="#{webBooks.selectedBook.editable}"
update="bookList"
process="#form"
id="save"
oncomplete="PF('bookDialog').close()"/>
<p:commandButton value="Cancel"
actionListener="#{webBooks.cancel(webBooks.selectedBook)}"
rendered="#{webBooks.selectedBook.editable}"
update=":form:bookDetail"/>
<p:commandButton value="Delete"
actionListener="#{webBooks.remove(webBooks.selectedBook)}"
onclick="return confirm('Are you sure?')"
id="remove"
update="bookList"
process="#form"
oncomplete="PF('bookDialog').close()"/>
</p:panel>
<p:panel header="Author Info"
widgetVar="authorDialog"
closable="true"
toggleable="true"
visible="false" style="width:420px;height:250px;">
<p:panelGrid columns="2">
<p:dataTable value="#{webBooks.selectedBook.authoredBy}"
var="authoredBy"
id="authorsList"
scrollable="true"
scrollHeight="150"
scrollWidth="300"
editable="true">
<p:ajax event="rowEdit" listener="#{webBooks.onAuthorEdit}" update=":form:msgs" />
<p:ajax event="rowEditCancel" listener="#{webBooks.onAuthorEditCancel}" update=":form:msgs" />
<p:columnGroup type="header">
<p:row>
<p:column style="width:30px" headerText="Id"/>
<p:column style="width:100px" headerText="Author Name"/>
</p:row>
</p:columnGroup>
<p:column>
<p:outputLabel value="#{authoredBy.id}"/>
</p:column>
<p:column>
<p:cellEditor>
<f:facet name="output"><h:outputText value="#{authoredBy.name}"/></f:facet>
<f:facet name="input"><p:inputText value="#{authoredBy.name}" style="width:100%" label="Author Name"/></f:facet>
</p:cellEditor>
</p:column>
<p:column style="width:32px">
<p:rowEditor />
</p:column>
</p:dataTable>
</p:panelGrid>
</p:panel>
</p:panelGrid>
</h:form>
</f:view>
</ui:define>
You are only updating update=":form:bookDetail" in your "View Book Detail" button. Add an ID to the panel "Author Info" and update that as well:
<p:commandButton update=":form:bookDetail :form:authorDetail"
...>
...
</p:commandButton>
...
<p:panel id="authorDetail"
header="Author Info"
...>
...
</p:panel>
See also:
Can 'update' attribute update two components simultanously?
I need explanation for the below value binding in the outputText inside p:dialog .I dont clear with that and is there any other way.
In my sample :
I have tried ,if i select the single or many check box the value get binded but when I click root check box which used for selecting all the check boxes, its getting selected but the values not get stored in the back end.
<p:dataTable id="checkboxDT"
var="car"
value="#{dtSelectionView.cars6}"
selection="#{dtSelectionView.selectedCars}"
rowKey="#{car.id}"
style="margin-bottom:0">
<f:facet name="header">
Checkbox
</f:facet>
<p:column selectionMode="multiple"
style="width:16px;text-align:center"/>
<p:column headerText="Id">
<h:outputText value="#{car.id}" />
</p:column>
<p:column headerText="Year">
<h:outputText value="#{car.year}" />
</p:column>
<p:column headerText="Brand">
<h:outputText value="#{car.brand}" />
</p:column>
<p:column headerText="Color">
<h:outputText value="#{car.color}" />
</p:column>
<f:facet name="footer">
<p:commandButton process="checkboxDT"
update=":form:multiCarDetail"
icon="ui-icon-search"
value="View"
oncomplete="PF('multiCarDialog').show()" />
</f:facet>
</p:dataTable>
<p:dialog header="Selected Cars"
widgetVar="multiCarDialog"
modal="true"
showEffect="fade"
hideEffect="fade"
resizable="false"
width="200">
<p:outputPanel id="multiCarDetail" style="text-align:center;">
<ui:repeat value="#{dtSelectionView.selectedCars}"
var="car">
<h:outputText value="#{car.id} - #{car.brand}"
style="display:block"/>
</ui:repeat>
</p:outputPanel>
</p:dialog>
You should update checkboxDT because update is used to determines id’s of components to be updated (refreshed with updated values from server). If you do not update checkboxDT, the selectedCars do not update too.
<p:commandButton process="checkboxDT"
update="checkboxDT,:form:multiCarDetail"
icon="ui-icon-search"
value="View"
oncomplete="PF('multiCarDialog').show()" />
I want to show a row only if I have data for it. The code which i have is:
<p:dataTable id="comments" var="comment"
value="#{agencyBean.getCommentByAgency(agencyBean.tAgency)}"
paginator="true" >
<p:column>
#{comment.author.name}
</p:column>
<p:column>
<c:if test="${not empty comment.positiveComment}">
<p:row>
<p:column>
<p:graphicImage library="images" name="positive.png" />
</p:column>
<p:column> #{comment.positiveComment} </p:column>
</p:row>
<br />
</c:if>
</p:column>
</p:dataTable>
But nevertheless I have data, the row is not shown. How can i implement this logic? Thanks!
Try to place the condition expression in the <p:row>'s tag itself, by using its rendered attribute :
<p:column>
<p:row rendered="#{not empty comment.positiveComment}">
<p:column>
<p:graphicImage library="images" name="positive.png" />
</p:column>
<p:column> #{comment.positiveComment} </p:column>
</p:row>
<br />
</p:column>
I have a parent form as and this form contain 5 more form on my five tabs. The problem is when i submit my parent form the data on parent form is submitting but all child form is not going on server. As i think by submitting parent form all child form are ignored. if i am right then please suggest a solution for this problem. i be very thankfull to all of you guys.I am using jsf2.0 primefaces 3.4
I have some problems in my page after merging the parent and children forms into a single one. I cannot update the <h:textarea> on row selection event.suggest me where i am wrong on update event my code is below
<h:form id="mainForm">
<h:panelGrid>
<p:accordionPanel activeIndex="#{salesLetterProBean.activeIndex}">
<p:tab title="Product Introduction" id="productinfooTab">
<p:panel header="Please Fill In The Details" style="padding:5px;"
id="productInfoPanel">
<h:panelGrid cellpadding="1" cellspacing="0" columns="1"
columnClasses="a,b,c,d,e" rowClasses="plainRow,shadedRow">
<h:outputLabel value="Introductory HeadLine:" class="field-title"
id="proInfoPanelGrid"/>
<p:inputTextarea value="#{salesLetterProBean.productIntroductoryLineRow.description}"
id="proIntroductorySentence"
style="width:1060px;height:400px;" effectDuration="400" />
</h:panelGrid>
<p:dataTable var="productIntroSentenceList" first="1"
value="#{salesLetterProBean.productIntroductorySentenceList}"
paginator="true" rows="5" rowsPerPageTemplate="5,10,15,20,25"
rowIndexVar="rowIndex" rowKey="#{productIntroSentenceList.id}"
selection="#{salesLetterProBean.productIntroductoryLineRow}"
selectionMode="single" update="proIntroductorySentence">
<p:ajax event="rowSelect" listener="#{salesLetterProBean.onRowSelect}" />
<p:column headerText="#">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{rowIndex}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{rowIndex}" />
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Description">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{productIntroSentenceList.description}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{productIntroSentenceList.description}" />
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Select">
<p:commandLink process="#none">
<!-- -->
<span title="Select" class="ui-icon ui-icon-check"/>
</p:commandLink>
</p:column>
</p:dataTable>
<h:panelGrid cellpadding="1" cellspacing="0" columns="1"
columnClasses="a,b,c,d,e" rowClasses="plainRow,shadedRow">
<h:outputLabel value="Feature List:" class="field-title" />
<p:inputTextarea style="width:1060px;height:400px;"
effectDuration="400" id="featureList"
value="#{salesLetterProBean.featureList}"/>
<h:outputLabel value="How Your Product Solve The Problems :"
class="field-title" />
<p:inputTextarea style="width:1060px;height:400px;"
effectDuration="400" id="prbSolutions"
value="#{salesLetterProBean.problemSolutions}" />
</h:panelGrid>
<h:commandButton value="Previous"
actionListener="#{applicantManagedBean.changeActiveIndex}"
immediate="true" class="defaultButton" />
<h:commandButton value=" Next "
actionListener="#{applicantManagedBean.changeActiveIndex}"
immediate="true" class="defaultButton" />
</p:panel>
</p:tab>
</p:accordionPanel>
</h:panelGrid>
</h:form>
Regards.
nested forms are not allowed, but you can have a multiple forms as stack.