I'm currently working with a PrimeFaces dataTable and am trying endlessly to append a new to the dataTable immediately after the user adds it. Server-side, everything is working -- data is saved to both the database and hard disk. I'd like to see a partial-page update following the successful request, and I just can't seem to get it to work. Here is my XHTML code:
<div class="content">
<div id="mainContent">
<div class="topNav">
<h:form id="navForm">
<p:commandButton value="Upload"/>
<p:commandButton value="New Folder" onclick="createDlg.show();" />
<p:commandButton value="Delete Folder" action="#" />
</h:form>
</div>
<div id="filePanel">
<h:form id="dataTable" prependId="false">
<p:dialog header="Create" widgetVar="createDlg" modal="true" height="200">
<p:panel header="New Folder">
<h:panelGrid columns="2">
<h:outputLabel value="Name:" for="txt_name"></h:outputLabel>
<p:inputText id="txt_name" value="#{directoryController.newDir.name}" required="true" />
<p:commandButton value="Create" actionListener="#{directoryController.createNew}" update="dGrid" oncomplete="createDlg.hide();"/>
<p:ajaxStatus style="width:16px; height:16px;">
<f:facet name="start">
<h:outputText value="Saving..." />
</f:facet>
<f:facet name="">
<h:outputText value="Complete." />
</f:facet>
</p:ajaxStatus>
</h:panelGrid>
</p:panel>
</p:dialog>
<p:dataTable id="dGrid" value="#{directoryController.itemsByOwner}" var="dir">
<p:column selectionMode="multiple"/>
<p:column sortBy="#{dir.name}">
<f:facet name="header">
File Name
</f:facet>
<h:outputText value="#{dir.name}" />
</p:column>
<p:column>
<f:facet name="header">
File Size
</f:facet>
</p:column>
</p:dataTable>
</h:form>
</div>
</div>
</div>
And finally, here is my backing bean.
public String createNew(){
newDir.setDateCreated(new Date());
newDir.setDateModified(new Date());
newDir.setId(BigDecimal.ZERO);
newDir.setLocation(ROOT_DIRECTORY + currentUser.getUsername() + "/");
newDir.setFilesCollection(f);
newDir.setDescription("");
newDir.setOwner(currentUser);
current = newDir;
create();
persistDirectoryFromObject(newDir);
newDir = new Directory();
RequestContext.getCurrentInstance().addPartialUpdateTarget("dGrid");
return null;
}
If you are using 3.0.M4 you could do:
...
...
<p:outputPanel autoUpdate="true">
<p:dataTable id="dGrid" value="#{directoryController.itemsByOwner}" var="dir">
<p:column selectionMode="multiple"/>
<p:column sortBy="#{dir.name}">
<f:facet name="header">
File Name
</f:facet>
<h:outputText value="#{dir.name}" />
</p:column>
<p:column>
<f:facet name="header">
File Size
</f:facet>
</p:column>
</p:dataTable>
</p:outputPanel>
or you could simply:
<p:commandButton value="Create" action="#{directoryController.createNew}" oncomplete="createDlg.hide();" ajax="false" />
Related
I have a primefaces datatable which displays a list of cars. One of the columns of the datatable has a command button which when clicked opens a dialog box which displays information about the selected car. Everything works as expected until I default filter the datatable and select the command button of a filtered row. The details of the car is null in this case. How can I get the value (car object) of the selected row after filtering?
<h:form id="carView">
<h:panelGrid id="carPanelGroup" style="width:100%" styleClass="tblNowrap100pct">
`<p:dataTable value="#{carBean.carList}" var="car" id="carTbl" stripedRows="true" rendered="#{not empty carBean.carList}" showGridlines="true" styleClass="tblNowrap100pct" filteredValue="#{carBean.filteredValues}" rowKey="#{car.carId}">
<p:column headerText="Car Name" sortBy="#{car.carName}" filterBy="#{car.carName}" filterMatchMode="contains" >
<f:facet name="header">
<h:outputText value="Car Name" />
</f:facet>
<h:outputText value="#{car.carName}" />
</p:column>
<p:column headerText="Make" sortBy="#{car.make}" filterBy="#{car.make}" filterMatchMode="contains">
<f:facet name="header">
<h:outputText value="Make" />
</f:facet>
<h:outputText value="#{car.make}" />
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Car Download" />
</f:facet>
<p:commandButton action="#{carBean.selectCar}" value="Download" styleClass="linkButton" process="#this" oncomplete="PF('carDownloadpanel').show();" update="#all">
<f:setPropertyActionListener value="#{car}" target="#{carBean.carDto}"/>
</p:commandButton>
</p:column>`
</p:dataTable>
</p:panelGrid>
</h:form>
<!-- ******** pop up -->
<p:outputPanel id = "downloadOutputPanel">
<p:dialog header="#{carBean.carDto.carName}" widgetVar="carDownloadpanel" width="500" height="400" id="dialogDetails" modal="true">
<f:facet name="header">
<h:panelGroup>
<h:outputText value="#{carBean.carDto.carName}" />
</h:panelGroup>
</f:facet>
<h:form id="carDetailView">
<p:panel>
<p:panelGrid id="carDetails" columns="2" styleClass="summaryTable"
columnClasses="colLabel, colNormalInputArea" rendered="#{not empty firmBean.firmDto}">
<h:outputText value="Car Name:" />
<h:outputText value="#{carBean.carDto.carName}" />
<h:outputText value="Firm Id:" />
<h:outputText value="#{carBean.carDto.carId}" />
</p:panelGrid>
</p:panel>
</h:form>
<h:form id="iwaInfo">
<h:panelGrid id="carReportInput" columns="2" styleClass="summaryTable" columnClasses="colLabel, colNormalInputArea">
<p:commandLink value="Download" id="downloadBtn"
action="#{carBean.downloadCar}" onclick="PF('carDownloadpanel').hide();">
</p:commandLink>
<p:commandLink value="Cancel" id="cancelBtn"
oncomplete="PF('carDownloadpanel').hide();" update=":carView:carPanelGroup" process="#parent"/>
</h:panelGrid>
</h:form>
</p:dialog>
</p:outputPanel>
Java method :
public String selectCar(){
if (this.carDto != null) {
carId = this.carDto.getCarId();
instanceId = this.carDto.getInstanceId();
if (carId!=null&&instanceId!=null){
CarDto dto = new CarDto();
List<CarDto> sLst = carService.searchCar(Long.parseLong(carId), Long.parseLong(instanceId));
if (sLst!=null&&sLst.size()>0){
dto= sLst.get(0);
}
setCarDto(dto);
}
}
return "";
}
I try to export some data loded from database.
With the code below, the exported file shows empty values in all columns althought my variable marchebean.selectedmarche.marchetraveau contains values.
Is there anything wrong in my code ?
I'm using Primefaces 4.0 and this is my xhtml page
<h:form id="form">
<p:tabView>
<p:tab title="Visualiser ">
<p:panel>
<h:commandLink >
<p:commandButton value="exporter" />
<p:dataExporter type="xls" target="crs" fileName="prixde" pageOnly="true" />
</h:commandLink>
<p:dataTable id="crs" var="marche" value="#{marchebean.selectedmarche.marchetraveau}" >
<f:facet name="header">
Tbaleau des travaux
</f:facet>
<f:facet name="footer">
<h3> Total HTVA = #{marchebean.calculdetotaltravhtva()}</h3>
<h3> Total TTC = #{marchebean.calculdetotaltravttc()} </h3>
</f:facet>
<p:column headerText="article" width="10%" >
<h:outputText value="#{marche.traveaux.article}"/>
</p:column>
<p:column headerText="Désignation des traveaux" width="40%" >
<h:outputText value="#{marche.traveaux.designation}"/>
<h:outputText value="#{marche.traveaux.paragraph}"/>
</p:column>
<p:column headerText="Unité">
<h:outputText value="#{marche.traveaux.unite}"/>
</p:column>
<p:column headerText="PUHTVA">
<h:outputText value="#{marche.prixunitaire}"/>
</p:column>
<p:column headerText="PUTTC">
<h:outputText value="#{marchebean.calcultva(marche.prixunitaire)}" />
</p:column>
<p:column headerText="Qtt">
<h:outputText value="#{marche.quantite}"/>
</p:column>
<p:column headerText="MHTVA">
<h:outputText value="#{marchebean.calculmonthtva(marche.prixunitaire ,marche.quantite)}" />
</p:column>
<p:column headerText="MTTC">
<h:outputText value="#{marchebean.calculmontttc(marche.prixunitaire ,marche.quantite)}" />
</p:column>
</p:dataTable>
</p:panel>
</p:tab>
</p:tabView>
</h:form>
we need to provide the
<f:facet name="header>
<h:outputText value="aricle"/>
</f:facet>
then exporter will add the headers to your exported document.
<p:column headerText="article" width="10%" >
<f:facet name="header">
<h:outputText value="article" />
</f:facet>
<h:outputText value="#{car.traveaux.article}"/>
</p:column>
This works for me. Maybe it needs validation and that's why it's empty at the end. Adding immediate="true" skips the validation.
<h:form id="confColaForm" .....>
<p:dataTable id="tablacolas" ... >
<f:facet name="header">
<h:commandLink id="exportar" update=":confColaForm:tablacolas" style="align:right;" immediate="true" >
<h:graphicImage library="images" name="iconexcel.png" style="width:30px;height:30px; "
title="Exportar" />
<p:dataExporter type="xls" target="tablacolas" fileName="ConfiguracionColas" />
</h:commandLink>
</f:facet>
...(columns here)
</p:dataTable/>
</h:form>
possible reason may be the "managedbean scope"...
1)change scope to "view"
2)serialize managedbean
this worked for me
I'm trying to include the paginator on my datatable but it's not working, i have the table and the paginator shows but it's not working, always int page 1 !!
this is my code :
![datatable paginator not working ][1]
<h:form id="form">
<p:outputPanel id="users">
<p:dataTable id="usersTable" value="#{personBean.allPersons}" paginator="true" rows="4" var="person" >
<p:column>
<f:facet name="header">
<h:outputText value="Name" />
</f:facet>
<p:commandLink action="#{personBean.editPerson}">
<h:outputText value="#{person.name}" />
<f:setPropertyActionListener target="#{personBean.person}"
value="#{person}" />
</p:commandLink>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Age" />
</f:facet>
<p:commandLink action="#{personBean.editPerson}">
<h:outputText value="#{person.age}" />
<f:setPropertyActionListener target="#{personBean.person}"
value="#{person}" />
</p:commandLink>
</p:column>
</p:dataTable>
</p:outputPanel>
<p:commandButton value="Create New User"
action="#{personBean.newPerson}" />
</h:form>
always i have the same table, i can't move to 2
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.
I am having trouble updating components in primefaces. Here is one example:
<h:form>
<p:panel style="width: 350px;" header="Partial Process">
<p:dataTable id="tablaPersonas" var="per" value="#{manejador.lista}">
<p:column style="text-align: center;">
<f:facet name="header">
<h:outputText value="Nombre" />
</f:facet>
<h:outputText value="#{per.nombre}" />
</p:column>
<p:column style="text-align: center;">
<f:facet name="header">
<h:outputText value="Apellido" />
</f:facet>
<h:outputText value="#{per.apellido}" />
</p:column>
<p:column headerText="Editar" style="text-align: center;">
<p:commandButton value="Editar"/>
</p:column>
</p:dataTable>
</p:panel>
<p:commandButton value="Abrir" onclick="widgetDlgAgregar.show();"/>
<p:dialog header="Agregar" widgetVar="widgetDlgAgregar" width="250" height="150" closable="true">
<h:panelGrid id="gridAdd" columns="2">
<h:outputLabel value="Nombre:"/>
<p:inputText value="#{manejador.auxiliarAgregar.nombre}"/>
<h:outputLabel value="Apellido:"/>
<p:inputText value="#{manejador.auxiliarAgregar.apellido}"/>
<p:commandButton oncomplete="widgetDlgAgregar.hide();" update="tablaPersonas,gridAdd" value="Agregar" actionListener="#{manejador.agregarPersona}"/>
</h:panelGrid>
</p:dialog>
</h:form>
As you see, I click on a CommandButton called "Abrir" and a Dialog opens with "Agregar" as title. I fill in the input boxes and when I click the CommandButton "Agregar", the DataTable isn't updated. Why is this happening?
Oh sorry i think you forgot this update
try this it should work
<h:form prependId="false">
<p:panel style="width: 350px;" header="Partial Process">
<p:dataTable id="tablaPersonas" var="per"
value="#{manejador.lista}">
<p:column style="text-align: center;">
<f:facet name="header">
<h:outputText value="Nombre" />
</f:facet>
<h:outputText value="#{per.nombre}" />
</p:column>
<p:column style="text-align: center;">
<f:facet name="header">
<h:outputText value="Apellido" />
</f:facet>
<h:outputText value="#{per.apellido}" />
</p:column>
<p:column headerText="Editar" style="text-align: center;">
<p:commandButton value="Editar" />
</p:column>
</p:dataTable>
</p:panel>
<p:commandButton value="Abrir" onclick="widgetDlgAgregar.show();" update="gridAdd" />
<p:dialog header="Agregar" widgetVar="widgetDlgAgregar" width="250"
height="150" closable="true">
<h:panelGrid id="gridAdd" columns="2">
<h:outputLabel value="Nombre:" />
<p:inputText value="#{manejador.auxiliarAgregar.nombre}" />
<h:outputLabel value="Apellido:" />
<p:inputText value="#{manejador.auxiliarAgregar.apellido}" />
<p:commandButton oncomplete="widgetDlgAgregar.hide();"
update="tablaPersonas,gridAdd" value="Agregar"
actionListener="#{manejador.agregarPersona}" />
</h:panelGrid>
</p:dialog>
</h:form>
try to put your
<p:dialog header="Agregar" widgetVar="widgetDlgAgregar" width="250" height="150" closable="true">
outside the form and add prependId="false" to your form <h:form prependId="false" >