Please help me to find a example to update p:inputtext with data stored in a bean which is set(solved already) by selecting a row of a datatable of a p:dialog. I have succeeded updating outputtext in the same manner.
I am using (learning) netbeans 7.2 primefaces 3.2, glassfish 3.1
thansk for all your help
rs_ncs
Look at primefaces showcase and the user guide, you'll find everything you need; in detail search for rowSelect event for the datatable component. Good luck =)
If you would like to update a component on select of a row from a datatable, then you can use the update attribute of a <p:ajax> which is listening on rowselect event. Something like this:
<p:ajax event="rowSelect" update=":xx:xx" />
As Suggested by BalusC the code <p:ajax event="rowSelect" update=":xx:xx" /> should work....
Here is an example of updating both inputtext and outputtext .
<h:form>
<p:dataTable id="usertable" var="user" value="#{userManageBean.userList}"
rowKey="#{user.U_ID}" selection="#{userManageBean.selectedUser}"
selectionMode="single" paginator="true" rows="18" >
<p:ajax event="rowSelect" update=":useredit:edituser" />
<p:ajax event="rowSelect" update=":viewuser:displayuser" />
<p:column headerText="User Name">
<h:outputText value="#{user.username}" />
</p:column>
<p:column headerText="FName">
<h:outputText value="#{user.firstname}" />
</p:column>
<p:column headerText="LName">
<h:outputText value="#{user.lastname}" />
</p:column>
</p:dataTable>
</h:form>
<p:dialog id="userview" header="View User" widgetVar="dlg2" >
<h:form id="viewuser">
<h:panelGrid id="displayuser" columns="2" cellpadding="4">
<h:outputText value="User Name:" />
<h:outputText value="#{userManageBean.selectedUser.username}" />
<h:outputText value="First Name" />
<h:outputText value="#{userManageBean.selectedUser.firstname}" />
<h:outputText value="Last Name:" />
<h:outputText value="#{userManageBean.selectedUser.lastname}" />
</h:panelGrid>
</h:form>
</p:dialog>
<p:dialog id="user_edit" header="Edit User" widgetVar="dlgedit" >
<h:form id="useredit">
<h:panelGrid id="edituser" columns="2" cellpadding="4">
<h:outputText value="First Name" />
<h:inputText value="#{userManageBean.selectedUser.firstname}" />
<h:outputText value="Last Name" />
<h:inputText value="#{userManageBean.selectedUser.lastname}" />
<p:commandButton id="updateUser" value="Add" action="#{someaction}"
ajax="false" />
</h:panelGrid>
</h:form>
</p:dialog>
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 have a p:datascroller configured to display a list of entities and lazy loading them upon clicking the more button.
<h:form id="investigationOperationsForm">
<p:dataScroller
value="#{investigationManagerBackingBean.lazyLoadedInvestigationOperations}"
var="investigationOperation" chunkSize="9" lazy="true"
rowIndexVar="test">
<f:facet name="header">
Scroll down to load investigations
</f:facet>
<h:panelGrid columns="2" style="width:100%"
columnClasses="logo,detail">
<p:commandLink oncomplete="PF('investigationDialogW').show()"
update="investigationEditorForm" immediate="true">
<f:setPropertyActionListener value="#{investigationOperation}"
target="#{investigationManagerBackingBean.selection}" />
<p:graphicImage alt="Investigation Operation"
url="/images/common/investigation-operation.png" />
</p:commandLink>
<!-- h:outputText value="#{investigationOperation.name}" /-->
<p:outputPanel id="pnl">
<h:panelGrid columns="2" cellpadding="5">
<h:outputText value="Name:" />
<h:outputText value="#{investigationOperation.name}"
style="font-weight: bold" />
<h:outputText value="Description:" />
<h:outputText value="#{investigationOperation.shortDescription}"
style="font-weight: bold" />
</h:panelGrid>
<p:draggable for="pnl" />
</p:outputPanel>
</h:panelGrid>
<f:facet name="loader">
<p:outputPanel
visible="#{investigationManagerBackingBean.lazyLoadedInvestigationOperations.rowCount gt 10}"
rendered="#{investigationManagerBackingBean.lazyLoadedInvestigationOperations.rowCount gt 10}">
<p:commandLink value="More" />
</p:outputPanel>
</f:facet>
</p:dataScroller>
</h:form>
In addition, I have a dialog that pops up when the p:commandLink oncomplete method is executed where I can update the value of the current selection and persist the changes.
<p:dialog id="investigationDialog"
header="#{msg['inv-manager.invDialog.header.title']}"
widgetVar="investigationDialogW" minWidth="400" minHeight="400"
resizable="false" position="center center" modal="true">
<p:panel id="investigationEditorPanel">
<h:form id="investigationEditorForm">
<h:panelGrid columns="2" cellpadding="5">
<h:outputLabel for="name"
value="#{msg['inv-manager.invDialog.nameFieldLabel']}" />
<p:inplace id="nameInplaceEditor" editor="true">
<p:inputText
value="#{investigationManagerBackingBean.selection.name}"
id="name" required="true" immediate="true"
label="#{msg['inv-manager.invDialog.nameFieldInputLabel']}" />
</p:inplace>
<h:outputLabel for="shortDescription"
value="#{msg['inv-manager.invDialog.shortDescriptionFieldLabel']}" />
<p:inplace id="shortDescriptionInplaceEditor" editor="true">
<p:inputText
value="#{investigationManagerBackingBean.selection.shortDescription}"
id="shortDescription" required="true" immediate="true"
label="#{msg['inv-manager.invDialog.shortDescriptionFieldInputLabel']}" />
</p:inplace>
<h:outputLabel for="description"
value="#{msg['inv-manager.invDialog.descriptionFieldLabel']}" />
<p:inputTextarea id="description" required="false"
label="#{msg['inv-manager.invDialog.descriptionFieldInputLabel']}"
immediate="true"
value="#{investigationManagerBackingBean.selection.description}" />
<p:commandButton id="okButton"
value="#{msg['inv-manager.invDialog.okButton']}" type="submit"
partialSubmit="true" process="investigationEditorForm"
action="#{investigationManagerBackingBean.createOrUpdate()}"
onclick="dlg.hide();" />
</h:panelGrid>
</h:form>
</p:panel>
</p:dialog>
The backing bean is configured to be #ViewScoped and everything works as defined. However, upon update the values of the p:datascroller are reset and the load method of the lazy loading model is executed and the datascroller is repopulated with new values from the database.
I have no reference to the datascroller or its containing form in the p:dialog and am wondering why the datascroller is being updated automagically? What am I missing in the equation. Have I overlooked something or something specific to the p:datascroller model that I need to consider when following this approach?
Look forward to the expertise of the community in resolving this issue.
Many thanks in advance :)
I'm nesting a datable in tabview. On the first page its all working correctly and i can edit the table, but after i switch the tabs, the datatable isnt editable anymore.
Is there something i'm doing wrong?
Using Primefaces 5.3
<h:form id="form">
<p:tabView id="tabs" value="#{studentsTableView.exams}" activeIndex="#{studentsTableView.activTab}" dynamic="true" var="exam" binding="#{tabView}" cache="false" >
<p:ajax event="tabChange" update="form:tabs" />
<p:tab id="tab" title="#{exam.name}">
<p:dataTable id="students" rowIndexVar="rowIndex" var="student" editable="true" widgetVar="gradetable" editMode="cell" tableStyle="width:auto" styleClass="myTable" value="#{studentsTableView.students}">
<p:ajax event="cellEdit" update="students" />
<p:column headerText="Nr">
<h:outputText value="#{rowIndex+1}" />
</p:column>
<p:column headerText="Vorname">
<h:outputText value="#{student.vorname}" />
</p:column>
<p:column headerText="Nachname">
<h:outputText value="#{student.nachname}" />
</p:column>
<p:column headerText="Matrikelnummer">
<h:outputText value="#{student.matrikelnummer}" />
</p:column>
<p:columns value="#{exam.allExams}" var="subexam" columnIndexVar="colIndex">
<f:facet name="header">
<h:outputText value="#{subexam.examName}" />
</f:facet>
<p:cellEditor>
<f:facet name="output"><h:outputText id="modeloutput" value="#{studentsTableView.getGrade(subexam, student)}" /></f:facet>
<f:facet name="input"><p:inputText id="modelInput" value="#{studentsTableView.currentGrade}" valueChangeListener="#{studentsTableView.insertGrade(subexam, student)}" style="width:90%">
<p:ajax event="change" update="modelInput" />
<p:ajax event="change" update="modeloutput" />
<p:ajax event="change" update="modeloutput" />
<p:ajax event="change" update=":form:tabs:0:students" />
</p:inputText></f:facet>
</p:cellEditor>
</p:columns>
<p:column id="endgrades" headerText="Endnote">
<h:outputText id="endgrade" value="#{studentsTableView.getEndGrade(exam, student)}" />
</p:column>
<p:column headerText="Formel">
<p:selectBooleanButton id="value1" value="true" onLabel="Yes" offLabel="No" style="width:60px" />
</p:column>
<p:column headerText="Kommentar">
<p:commandButton id="public" icon="ui-icon-comment" type="button" >
<p:ajax event="click" listener="#{studentsTableView.setPublicCommentInfos(exam, student)}" update="publicarea" />
</p:commandButton>
<p:overlayPanel id="imagePanel" for="public" hideEffect="fade">
<h:inputTextarea id="publicarea" value="#{studentsTableView.publicComment}" >
<p:ajax event="change" update="publicarea" />
</h:inputTextarea>
</p:overlayPanel>
<p:commandButton id="private" icon="ui-icon-locked" type="button" >
<p:ajax event="click" listener="#{studentsTableView.setPrivateCommentInfos(exam, student)}" update="privatearea" />
</p:commandButton>
<p:overlayPanel id="privatepanel" for="private" hideEffect="fade">
<h:inputTextarea id="privatearea" value="#{studentsTableView.privateComment}" >
<p:ajax event="change" update="privatearea" />
</h:inputTextarea>
</p:overlayPanel>
</p:column>
</p:dataTable>
</p:tab>
</p:tabView>
</h:form>
Your problem could be because you're still referencing the datatable id from the first tab, even though you switched to another. You could try to create a different id for each datatable from each tab and then working with those ids and updating them.
I am trying to use datatable selection in dialog widget. But I cannot get selected value in my bean. Datatable selection is working, if I delete dialog widget tag. I am using PrimeFaces 4.0. How can I fix this?
passengerform.xhtml
<p:hotkey bind="esc" handler="dialogWidget.hide();" />
<p:dialog id="dialog" widgetVar="dialogWidget"
header="Coupon List" modal="true" width="400" showEffect="fade"
hideEffect="fade" appendTo="#(body)">
<h:form id="formDialog">
<h:outputLabel value="Lütfen E-ticket Kuponunu Seçiniz." />
<p:dataTable id="singleDT" var="coupon"
value="#{passengerFormService.couponList}"
rowKey="#{coupon.id}" rowIndexVar="rowIndex"
selection="#{passengerFormService.selectedCoupon}"
selectionMode="single">
<p:ajax event="rowSelect"
listener="#{passengerFormService.selectCoupon}"
update=":tab1:tab1_1:eticketform:formDialog">
<f:setPropertyActionListener value="#{coupon}"
target="#{passengerFormService.coupon}" />
</p:ajax>
<f:facet name="header"></f:facet>
<h:inputHidden name="hidden1"
value="#{passengerFormService.passengerForm.id}" />
<p:column style="width:20px" width="20">
<f:facet name="header">
<h:outputText value="#" />
</f:facet>
<h:outputText value="#{rowIndex+1}" />
</p:column>
<p:column headerText="Id">
<h:outputText value="#{coupon.id}" />
</p:column>
<p:column headerText="Departure Location">
<h:outputText value="#{coupon.departureLocation}" />
</p:column>
<f:facet name="footer"></f:facet>
</p:dataTable>
<p:separator />
<h:panelGrid columns="2" cellspacing="5"
columnClasses="alignLeft,alignRight" style="width:100%">
<p:commandButton id="selectButton1" update=""
icon="ui-icon-close" value="İptal"
oncomplete="PF('dialogWidget').hide()" />
<p:commandButton id="cancelSelectedButton1"
update=":tab1:tab1_1:passengerInsertform"
icon="ui-icon-check"
value="Onayla" oncomplete="PF('dialogWidget').hide()" />
</h:panelGrid>
</h:form>
</p:dialog>
PassengerFormService.java
public void selectCoupon(SelectEvent event) {
Log.getLogger().debug("New2 coupon selected...");
Log.getLogger().debug("selected: " +getSelectedCoupon());
}
I'm developing my website and I use PrimeFaces component.
But when I validation Calendar I can't make the calendar highlight.
Here is my Code. Could anybody help me.
Thanks in advance :)
<h:form id="addEditNewsForm">
<pe:remoteCommand name="#{cc.attrs.reloadFuncName}"
actionListener="#{logic.startAddEditNews}" process="#this"
update="#form" oncomplete="#{cc.attrs.refreshCallback}">
<pe:methodSignature parameters="java.lang.String,java.lang.String" />
<pe:methodParam name="idNews" />
<pe:methodParam name="action" />
</pe:remoteCommand>
<p:messages severity="error" id="newsMessages" showDetail="false"
autoUpdate="true" />
<p:panelGrid styleClass="newsDocumentPanel">
<p:row>
<p:column styleClass="width30">
<h:outputText
value="#{ivy.cms.co('/ch/soreco/standard/xportal/Web/Components/News/Label/dateOfPublic')}" />
</p:column>
<p:column>
<p:calendar id="publicDate" pattern="#{swissDateFormat}"
value="#{data.news.publicationDate}" effect="slideDown"
navigator="true">
<p:ajax event="dateSelect" update="newsMessages"
listener="#{logic.dateSelect}" />
</p:calendar>
</p:column>
</p:row>
</p:panelGrid>
<p:commandButton value="Save" actionListener="#{logic.save}"></p:commandButton>
</h:form>