I am trying to add records to datatable by submitting a form built using JSF and primefaces which gets popped up from the page containing datatable.On submit of the form the data gets updated to database but i need to refresh/update the datatable with the submitted data.Is there any way using which i can refer the main page on submit from the form so that i can refresh/update the datatable.
JSF code snippet containing datatable
<h:form id="lpcForm">
<!-- <p:growl id="messages" showDetail="true" /> -->
<div id="content">
<h:commandLink ajax="true" id="cmdLinkAdd" value="Add" action="#{lpcBean.addRecord}"
target="_blank" update="#form" process="#this" />
<p:dataTable var="lpcData" id="lpcDataTable" widgetVar="lpcTable"
value="#{lpcBean.lpcIdList}" selection="#{lpcBean.selectedRows}"
editable="true" scrollable="true" scrollWidth="1110"
scrollHeight="330" styleClass="datatable">
<!--Contents of the table-->
</p:dataTable>
</div>
On clicking the command link i get the web page popup through which i can submit the data,the snippet of which is as below
<h:form id="addLpc">
<p:focus context="addLpc" />
<div align="center">
<h:panelGrid id="addLpcForm" columns="3" >
contents of the form
</h:panelGrid>
</div>
<div align="center">
<p:commandButton id="submitButton" value="Submit" ajax="true"
action="#{lpcRecordAddition.formSubmit}" />
<h:outputText />
</div>
</h:form>
on submit of this form i need the datatable in other page to get updated.
Use the following for the commandButton:
<p:commandButton id="submitButton" value="Submit" ajax="true"
action="#{lpcRecordAddition.formSubmit}" update=":lpcForm:lpcDataTable" />
Related
My main form is the following:
<h:form id="frmSearch" styleClass="m-bottom">
<div class="form-group">
<label>Funcionário</label>
<h:inputText id="funcionario" value="#{escalaTrabalhoBean.entityToSearch.funcionario.pessoa.nome}" readonly="true" styleClass="form-control" />
<h:commandButton id="btnFuncionario" styleClass="btn btn-default" value="Buscar funcionário" onclick="$('#modBuscaFuncionario').modal('show')" type="button" />
</div>
</h:form>
And I want to update the value of field "funcionario" after I call a function with ajax, which is inside a modal window:
<h:form id="frmSearchBuscaFuncionario">
<h:commandLink id="btnSelecionar" title="Selecionar" actionListener="#{escalaTrabalhoBean.selectFuncionario(obj)}">
<i class="fa fa-pencil-square-o"></i>
<p:ajax oncomplete="$('#modBuscaFuncionario').modal('hide');" update="frmSearch:funcionario" />
</h:commandLink>
</h:form>
This code: update="frmSearch:funcionario" is not working, and I got this error: javax.faces.FacesException: Cannot find component with identifier "frmSearch:funcionario".
Any suggestions?
When you access the components outside of your current h:form use : at the beginning of the Id of the component.
In your example:
update=":frmSearch:funcionario"
I have a page in which through AJAX I include other pages conditionally. On one included page I would like to do another ajax call.
My initial page:
<ui:composition template="../../templates/template.xhtml">
<ui:define name="title">
Pay
</ui:define>
<ui:define name="content">
<h:form>
<div id="loginDiv">
<div class="homeDiv" style="text-align: left;">
<h:form>
<h:outputText value="#{strings.paymentMainSpeech} " />
<ul id="grileList">
<li>#{strings.payThroughSMS}</li>
<li>#{strings.payThroughCard}</li>
<li>#{strings.payThroughPayPal}</li>
</ul>
<h:outputText value="#{strings.bellowYouHavePaymentOptions}" />
</h:form>
</div>
<h:selectOneRadio value="#{payment.option}" immediate="true">
<f:selectItem itemValue="#{strings.payThroughSMS}"
itemLabel="#{strings.payThroughSMS}" />
<f:selectItem itemValue="#{strings.payThroughCard}"
itemLabel="#{strings.payThroughCard}" />
<f:selectItem itemValue="#{strings.payThroughPayPal}"
itemLabel="#{strings.payThroughPayPal}" />
<f:ajax event="change" listener="#{payment.changeListener()}"
render="payment" />
</h:selectOneRadio>
</div>
<h:panelGroup id="payment">
<!-- PayPal -->
<h:panelGroup rendered="#{payment.option == 'PayPal'}">
<ui:include src="../payments/paypal/paypal.xhtml" />
</h:panelGroup>
<!-- CARD -->
<h:panelGroup rendered="#{payment.option == 'Card'}">
<ui:include src="../payments/card/mobilPay.xhtml" />
</h:panelGroup>
</h:panelGroup>
</h:form>
</ui:define>
I select from the radio buttons the pages which I want to include through an ajax listener. That works well.
On one included page (on mobilPay.xhtml)
<ui:composition>
<ui:define name="title">
Pay Card Mobil Pay
</ui:define>
<div id="loginDiv">
<h:panelGroup id="next">
<h:panelGroup rendered="#{not mobilPayInitBean.forward}">
<h:outputText value="#{strings.paymentSpeech} " />
<h:outputText value="#{strings.paymentSpeech} " />
<h:outputText value=" #{strings.paymentSpeech2}" />
<br />
<br />
<h:form>
<h:selectOneMenu value="#{mobilPayInitBean.options}">
<f:selectItem itemValue="five" itemLabel="#{strings.fiveEuro}" />
<f:selectItem itemValue="seven" itemLabel="#{strings.sevenEuro}" />
<f:selectItem itemValue="ten" itemLabel="#{strings.tenEuro}" />
</h:selectOneMenu>
<br />
<br />
<f:ajax render="next">
<h:commandButton value="#{strings.nextStep}"
action="#{mobilPayInitBean.nextStep()}"
rendered="#{not mobilPayInitBean.forward}" />
</f:ajax>
</h:form>
</h:panelGroup>
<h:panelGroup rendered="#{mobilPayInitBean.forward}">
<div id="loginDiv">
<form name="frmPaymentRedirect" method="post"
action="#{mobilPayInitBean.paymentURL}">
<input type="hidden" name="env_key"
value="#{mobilPayInitBean.paymentURL}" /> <input type="hidden"
name="data" value="#{mobilPayInitBean.paymentURL}" />
<p>
If not reditect in 5 seconds <input type="image"
src="images/12792_mobilpay-96x30.gif" />
</p>
</form>
</div>
<script type="text/javascript" language="javascript">
window.setTimeout(document.frmPaymentRedirect.submit(), 3000);
</script>
</h:panelGroup>
</h:panelGroup>
</div>
I want to select from the select one menu an item and click on the command button and I want the whole selectonemenu and the command button to disaper and the last form (name="frmPaymentRedirect")to appear.
Now the problem:
I include the mobilPay.xhtml page and the whole page with the radiobuttons and the mobilPay.xhtml page appears, BUT when I click on the command button the hole mobilPay.xhtml disappears and so does the selection in the radio button.
Thank you for your time.
It was the nested forms!!!
I used a master template -> child template -> included page.
In the child template a had a form and inside the form I inserted the pages and in the one inserted page I had another set of form.
Thank you for pointing that obvious thing out!!!
I am running a JSF2 web application with PrimeFaces 3.5 on GlassFish 3.1.2. I want to implement CSV import functionality, so that the read values are filled in to the components without page reload.
Technically, after a file upload with <p:fileUpload>, I want to update a component which creates the input fields iteratively with <ui:repeat>. Here is the simplified code of my view:
<ui:define name="content">
<h:form id="form" prependId="false" enctype="multipart/form-data">
<p:growl id="growl" showDetail="true" life="5000" />
<p:panel header="Values">
<h:panelGroup id="grid" layout="block">
<p:commandButton actionListener="#{table.handlePost}"
id="postTop" value="Save" update="growl" />
<p:commandButton id="dlTop" value="Export CSV" ajax="false"
onclick="PrimeFaces.monitorDownload(start, stop)"
icon="ui-icon-arrowthichk-s">
<p:fileDownload value="#{table.csv}" />
</p:commandButton>
<p:fileUpload fileUploadListener="#{table.handleFileUpload}"
mode="advanced" update="tableView, growl" sizeLimit="10000"
allowTypes="/(\.|\/)(csv)$/" label="Import CSV"
showButtons="false" />
<h:panelGroup id="tableView" layout="block">
<table>
<tr>
<th>Day</th>
<th>Value</th>
</tr>
<ui:repeat value="#{table.values}" varStatus="val" id="table">
<tr>
<td><h:outputText
value="#{table.date}-#{val.index+1}" /></td>
<td><h:inputText id="value"
value="#{table.values[val.index]}"
converter="javax.faces.Double" /></td>
</tr>
</ui:repeat>
</table>
</h:panelGroup>
<p:commandButton actionListener="#{table.handlePost}"
id="postBottom" value="Save" update="growl" />
<p:commandButton id="dlBottom" value="Export CSV" ajax="false"
onclick="PrimeFaces.monitorDownload(start, stop)"
icon="ui-icon-arrowthic hk-s">
<p:fileDownload value="#{table.csv}" />
</p:commandButton>
</h:panelGroup>
</p:panel>
</h:form>
</ui:define>
table bean:
#ViewScoped
#ManagedBean(name="table")
public class TableView { }
Values are read correctly, I can update any component to output table.values, except with <p:fileUpload>, contents of the <ui:repeat> are never updated. If I update tableView from any other component other than <p:fileUpload>, the contents of <ui:repeat> are updated correctly. What could be the problem?
I don't think the file upload component supports the ajax update tag, so you may have to do a full page refresh...you could do this in javascript by using: oncomplete="javascript:window.location.reload(true)"
In my JSF page I have form when I click submit button in the same page I need to show an static content. But When I click <p:commandbutton> nothing appears in the page. When I put ajax="false" then only action taken place but the Static content display in new page.
In my Backing bean I have used Session scoped. I am using JSF 2.0 and Primefaces 3.2.
My JSF Page.
<h:form>
<h:panelGroup rendered="#{not license.showForm}">
<p:panel header="License Key Request" >
<h:panelGrid columns="2" >
..
<h:outputText value="Bla bla"/>
..
<h:outputText value="Bla Bla" />
</h:panelGrid>
<TABLE>
..
<h:outputLabel for="name" value="Requestor Name : *" />
..
<p:inputText id="name" value="#{license.name}" required="true" requiredMessage="Name is required."/>
..
<h:outputLabel for="company" value="Company : * " />
..
<p:inputText id="company" value="#{license.company}" required="true" requiredMessage="Company is required."/>
..
</table>
<p:commandButton value="Form" id="btnAdd" process="#form"
action="#{license.add}" />
..
</table>
</p:panel>
</h:panelGroup>
<h:panelGroup rendered="#{license.showForm}" >
<h:outputText value="Bla Bla"/>
</h:panelGroup>
</h:form>
Your source code is somewhat confusing (e.g. you have two closing table tags). But I assume that you want to show the panelGroup at the bottom if the button is clicked.
The easiest way would be to add an update ="#form" to your commandButton:
<p:commandButton value="Form" id="btnAdd"
process="#form" update="#form"
action="#{license.add}" />
You don't need to update the whole form but only the specific component. Then you need to give the panelGroup an id attribute and use this attribute instead of #form. However, since it is not clear for me how your naming containers are organized, it could be puzzling to find the correct relative id.
I have got a problem with my JSF application.
On a page there's a form where the user can dynamically add components to that very same form. When I use the ajax listener to add the component, it is updated in the view and also in the model. But when I try to remove the dynamiccaly added component by pressing an h:actionLink its ajax listener is never triggered.
This is my code:
<h:form rendered="#{schrijvenController.verslagenController.documentSelected}">
<p>
<span class="noLabel">
#{bundle.JongereJongere}:
</span>
<h:selectOneMenu id="jongereSelect" valueChangeListener="#{schrijvenController.selecteerJongere}" immediate="true"
value="#{schrijvenController.currentJongere.jongereID}"
title="--#{bundle.JongereSelect}--">
<f:selectItems value="#{jongereController.jongerenAsSelectItems}"/>
</h:selectOneMenu>
</p>
<h:panelGroup id="personen">
<ui:repeat value="#{schrijvenController.verslagenController.persoonItems}" var="persoon">
<div class="div_add_persoon">
<div class="div_add_persoon_left">
<span class="noLabel"> #{persoon.aanwezigheid}:</span>
<h:inputText value="#{persoon.searchTerm}"
onkeypress="if (event.keyCode == 13) { onchange(); return false; }">
<f:ajax event="keypress" render="persoonLijst" listener="#{persoon.getPersonenWhereNameLikeSelectItems}" />
</h:inputText>
<h:selectOneMenu id="persoonLijst" styleClass="fixedWitdhDropDown"
value="#{persoon.currentPersoon.persoon_id}"
title="--#{bundle.PersoonSelect}--">
<f:selectItems value="#{persoon.personenWhereNameLikeSelectItems}"/>
<f:ajax event="change" render="#form" listener="#{persoon.add}" />
</h:selectOneMenu>
</div>
<h:panelGroup layout="block" styleClass="div_add_persoon_right">
<ui:repeat value="#{persoon.personen}" var="persoonPersoon">
<h:panelGroup layout="block" styleClass="div_schrijvenPersoon">
<h:outputText value=" #{persoonPersoon.naam} #{persoonPersoon.voornaam} " />
<h:commandLink value="X" id="linkske">
<f:ajax event="click" render="#form" listener="#{persoon.delete}" />
</h:commandLink>
</h:panelGroup>
</ui:repeat>
</h:panelGroup>
</div>
</ui:repeat>
<div class="clear" />
This is a Prt Sc of my view:
http://i206.photobucket.com/albums/bb69/bartloterman/pscreen.jpg?t=1302028364
If one clicks on an element from the list, it's added to the right inside a div together with a commandLink with the text "x". But when I click the "x" link nothing happens (no function is being executed). It is as if the view can't find the component. I'm using Datamodels.
I've been looking all day for a solution on the web but I couldn't find one. Any help would be greatly appreciated.
I managed to solve the problem by using the following code in my view
<h:commandLink value="X">
<f:ajax render="#form" execute="#form" listener="#{persoon.delete}" />
</h:commandLink>
Seems I needed render="#form" and execute="#form"