I have h:form in PrimeFaces p:dialog. All other components works fine, even the p:selectOneMenu, but value of p:inputText is not bound to bean and gives null.
<p:dialog header="Delivery Schedule" id="deleditdlg" widgetVar="deleddlg1" showEffect="clip"
hideEffect="clip" styleClass="dialogwidth"
modal="true" appendTo="#(body)" closable="true" width="500">
<h:form id="saveform">
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<h:outputLabel style="font-weight: bold;"
value="Timing: "></h:outputLabel>
<br/>
<p:inputText value="#{deliveryScheduleBean.deliverySchedule.vehTiming}"></p:inputText>
</div>
<div class="col-md-3">
<h:outputLabel style="font-weight: bold;"
value="Status: "></h:outputLabel>
<br/>
<p:selectOneMenu value="#{deliveryScheduleBean.deliverySchedule.vehStatus}">
<f:selectItem itemLabel="Active" itemValue="0"></f:selectItem>
<f:selectItem itemLabel="Inactive" itemValue="1"></f:selectItem>
</p:selectOneMenu>
</div>
</div>
<br />
<div class="row">
<div class="col-md-4 ml-auto">
<p:commandButton class="btn btn-success" process="saveform"
action="#{deliveryScheduleBean.updateSchedule}" value="Save"></p:commandButton>
</div>
</div>
</div>
</h:form>
</p:dialog>
Related
I have two fields I want to fill using data scanned from a barcode however it seems like when I use two codescanners, the event gets called twice and both fields fill up with the same scanned data which is not what I want.
Here is my code:
</h:form>
<p:growl id="growl" showDetail="true" showSummary="true" globalOnly="false">
<p:autoUpdate/>
</p:growl>
<h:form id="form">
<div class="ui-fluid mb-4">
<div class="card border-none">
<p:tooltip/>
<h:form>
<p:messages id="messages" showDetail="true" closable="true" escape="false">
<p:autoUpdate/>
</p:messages>
</h:form>
</div>
<div class="card mb-4">
<p:dataTable id="dt-scannedPo" var="po" value="#{registerView.delivery.deliveryPurchaseOrders}">
<p:column headerText="PO Number">
<h:outputText value="#{po.purchaseOrder.poNumber}"/>
</p:column>
<p:column headerText="Invoice Number">
<h:outputText value="#{po.invoiceNumber}"/>
</p:column>
</p:dataTable>
<p:commandButton value="Submit Deliveries" oncomplete="PF('submitDeliveriesDialog').show()"
process="#this"/>
</div>
<p:confirmDialog widgetVar="submitDeliveriesDialog" showEffect="fade" width="300"
message="Submit #{registerView.delivery.deliveryPurchaseOrders.size()} deliveries?"
header="Confirm"
severity="warn">
<p:commandButton value="Yes" icon="pi pi-check" actionListener="#{registerView.addDeliveries}"
process="#this" oncomplete="PF('submitDeliveriesDialog').hide()"/>
<p:commandButton value="No" type="button" styleClass="ui-button-secondary" icon="pi pi-times"
onclick="PF('submitDeliveriesDialog').hide()"/>
</p:confirmDialog>
<div class="card border-none">
<div class="p-field p-grid">
<label for="name" class="p-col-12 p-2 p-md-2 p-mb-md-0 pl-0">Name</label>
<div class="p-col-12 p-md-10">
<p:inputText id="name" type="text" value="#{registerView.driverName}"/>
</div>
</div>
<div class="p-field p-grid">
<label for="contactNo" class="p-col-12 p-2 p-md-2 p-mb-md-0 pl-0">Contact Number (SG only)</label>
<div class="p-col-12 p-md-10">
<p:inputText id="contactNo" type="number" value="#{registerView.driverNumber}"
required="true" requiredMessage="Contact Number is required"/>
</div>
</div>
<div class="p-field p-grid">
<label for="vehicleNo" class="p-col-12 p-2 p-md-2 p-mb-md-0 pl-0">Vehicle Number</label>
<div class="p-col-12 p-md-10">
<p:inputText id="vehicleNo" type="text" value="#{registerView.driverLicensePlate}"
required="true" requiredMessage="License plate is required"/>
</div>
</div>
<div class="p-field p-grid">
<label for="poNumber" class="p-col-12 p-2 p-md-2 p-mb-md-0 pl-0">PO Number</label>
<div class="p-col-12 p-md-10">
<div class="ui-inputgroup">
<p:inputText id="poNumber" type="text" value="#{registerView.poNumber}" required="true"
requiredMessage="PO number is required"/>
<p:commandButton icon="fa fa-camera" styleClass="ui-button-success" pt:data-tooltip="Upload Image for OCR" action="#{ocr.detect()}"/>
<p:commandButton id="poBtn" icon="fa fa-qrcode" styleClass="ui-button-danger"
pt:data-tooltip="Scan QR Code/Barcode"
onclick="PF('poBarcodeDialog').show()"
immediate="true"/>
</div>
</div>
</div>
<div class="p-field p-grid mb-4">
<label for="invoiceNumber" class="p-col-12 p-2 p-md-2 p-mb-md-0 pl-0">Invoice Number</label>
<div class="p-col-12 p-md-10">
<div class="ui-inputgroup">
<p:inputText id="invoiceNumber" type="text" value="#{registerView.invoiceNumber}"/>
<p:commandButton icon="fa fa-camera" styleClass="ui-button-success" pt:data-tooltip="Upload Image for OCR" action="#{ocr.detect()}"/>
<p:commandButton id="invBtn" icon="fa fa-qrcode" styleClass="ui-button-danger"
pt:data-tooltip="Scan QR Code/Barcode"
onclick="PF('invBarcodeDialog').show()"
immediate="true"/>
</div>
</div>
</div>
<p:commandButton update="#form" value="Add to delivery list"
action="#{registerView.addPurchaseOrderToDelivery}"/>
</div>
</div>
</h:form>
<!--Barcode Dialog for PO-->
<p:dialog header="Scan Barcode/QR Code" widgetVar="poBarcodeDialog" showEffect="fade" modal="true">
<div class="p-grid">
<pe:codeScanner for="form:poNumber" id="poScanner">
<p:ajax event="codeScanned" listener="#{registerView.onPOCodeScanned}"/>
</pe:codeScanner>
</div>
</p:dialog>
<!--Barcode Dialog for Invoice-->
<p:dialog header="Scan Barcode/QR Code" widgetVar="invBarcodeDialog" showEffect="fade" modal="true">
<div class="p-grid">
<pe:codeScanner for="form:invoiceNumber" id="invScanner">
<p:ajax event="codeScanned" listener="#{registerView.onInvCodeScanned}"/>
</pe:codeScanner>
</div>
</p:dialog>
public void onPOCodeScanned(final SelectEvent<Code> event) {
final Code code = event.getObject();
logger.info("Code scanned: " + code.getValue());
logger.info("Prev Code scanned: " + poNumber);
poNumber = code.getValue();
FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "Code scanned: ", code.getValue()));
PrimeFaces.current().ajax().update("form:growl");
}
public void onInvCodeScanned(final SelectEvent<Code> event) {
final Code code = event.getObject();
logger.info("Code scanned: " + code.getValue());
logger.info("Prev Code scanned: " + invoiceNumber);
invoiceNumber = code.getValue();
FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "Code scanned: ", code.getValue()));
PrimeFaces.current().ajax().update("form:growl");
}
If anyone has any idea on how to fix this please let me know thanks in advance.
I don't think your approach with multiple instances is going to work. At least not when you use the same video device on both instances. Different devices might work, but is awkward in my opinion. Since you are now using the same video device on both instances, it is expected that listeners are being called twice.
What you should do is use a single dialog (so a single scanner) and set a property. This way your dialog and scanner will know for which input it should scan, and you should use that in your listener.
This is my Table
Lets say i have 10 user in the table and i click user id 2 to edit, the bootsfaces modal display the last user in the table into modal; which is user id 10.
<div class="tab-pane fade" id="add9">
<h:form class="form-horizontal" >
<h3 class="title-section title-bar-high mb-40">System User Report</h3>
<div class="orders-info">
<div class="table-responsive">
<b:dataTable class="table table-bordered table-responsive" var="user" value="#{userBean.findsAll()}" onorder="console.log('order');" onselect="ajax:userBean.editUser(user)" onpage="console.log('page');" >
<h:column>
<f:facet name="header">Sr. No.</f:facet>
<h:outputText value="#{user.id}" />
</h:column>
<h:column>
<f:facet name="header">Name</f:facet>
<h:outputText value="#{user.userName}" />
</h:column>
<h:column>
<f:facet name="header">Status</f:facet>
<h:outputText value="#{user.userLevel}" />
</h:column>
<h:column>
<f:facet name="header">Mobile</f:facet>
<h:outputText value="#{user.userPhone}" />
</h:column>
<h:column>
<f:facet name="header">Email</f:facet>
<h:outputText value="#{user.userEmail}" />
</h:column>
<h:column>
<f:facet name="header">Date</f:facet>
<h:outputText value="#{user.userDate}" />
</h:column>
<h:column>
<f:facet name="header">Action</f:facet>
<b:commandButton iconAwesome="pencil" look="link" action="#{userBean.editUser(user)}" onclick="$('.modalPseudoClass').modal();return false;">
<f:ajax execute="#{userBean.editUser(user)}" render="#none" />
</b:commandButton>
<b:commandButton action="#{userBean.deleteUser(user)}" onclick="return confirm('You Are About You Delete This User!')" iconAwesome="trash" look="link">
</b:commandButton>
</h:column>
</b:dataTable>
</div>
</div>
</h:form>
</div>
This is my beans controller
public class UserBean implements Serializable {
#EJB
private UserFacade userFacade;
private User user;
public UserBean() {
user = new User();
}
public UserFacade getUserFacade() {
return userFacade;
}
public void setUserFacade(UserFacade userFacade) {
this.userFacade = userFacade;
}
public User getUser() {
return user;
}
public void setUser(User user) {
this.user = user;
}
public void deleteUser(User user){
userFacade.remove(user);
}
public void editUser(User user){
this.user = user;
}
public void editUser(){
userFacade.edit(this.getUser());
user = new User();
}
}
This is my bootsfaces modal
<f:view>
<h:form class="form-horizontal">
<b:modal id="amodal" title="Basic info and Contact No. #{userBean.user.id}" styleClass="modalPseudoClass">
<div class="profile-details tab-content">
<div class="personal-info">
<div class="form-group">
<h:outputLabel class="col-sm-3 control-label" for="userName">User Name:</h:outputLabel>
<div class="col-sm-9">
<h:inputText class="form-control" id="userName" value="#{userBean.user.userName}" title="UserName" requiredMessage="" />
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<h:outputLabel class="col-sm-3 control-label" for="firstName">First Name:</h:outputLabel>
<div class="col-sm-9">
<h:inputText class="form-control" id="firstName" value="#{userBean.user.firstName}" title="FirstName" requiredMessage="" />
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<h:outputLabel class="col-sm-3 control-label" for="lastName">last-name:</h:outputLabel>
<div class="col-sm-9">
<h:inputText class="form-control" id="lastName" value="#{userBean.user.lastName}" title="LastName" requiredMessage="" />
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<h:outputLabel class="col-sm-3 control-label" for="userEmail">E-mail Address:</h:outputLabel>
<div class="col-sm-9">
<h:inputText class="form-control" id="userEmail" value="#{userBean.user.userEmail}" title="UserEmail" requiredMessage="" />
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<h:outputLabel class="col-sm-3 control-label" for="userPostal">Zip Code:</h:outputLabel>
<div class="col-sm-9">
<h:inputText class="form-control" id="userPostal" value="#{userBean.user.userPostal}" title="UserPostal" requiredMessage="" />
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<h:outputLabel class="col-sm-3 control-label" for="userPhone">Phone:</h:outputLabel>
<div class="col-sm-9">
<h:inputText class="form-control" id="userPhone" value="#{userBean.user.userPhone}" title="UserPhone" requiredMessage="" />
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<h:outputLabel class="col-sm-3 control-label" for="userCountry">Country:</h:outputLabel>
<div class="col-sm-9">
<div class="custom-select">
<h:selectOneMenu id="userCountry" value="#{userBean.user.userCountry}" title="UserCountry" class="select2">
<f:selectItem itemValue = "o" itemLabel = "Please Select" />
<f:selectItem itemValue = "Bangladesh" itemLabel = "Bangladesh" />
<f:selectItem itemValue = "Spain" itemLabel = "Spain" />
<f:selectItem itemValue = "Belgium" itemLabel = "Belgium" />
<f:selectItem itemValue = "Ecuador" itemLabel = "Ecuador" />
<f:selectItem itemValue = "Ghana" itemLabel = "Ghana" />
<f:selectItem itemValue = "South Africa" itemLabel = "South Africa" />
<f:selectItem itemValue = "India" itemLabel = "India" />
<f:selectItem itemValue = "Pakistan" itemLabel = "Pakistan" />
<f:selectItem itemValue = "Thailand" itemLabel = "Thailand" />
<f:selectItem itemValue = "Malaysia" itemLabel = "Malaysia" />
<f:selectItem itemValue = "Italy" itemLabel = "Italy" />
<f:selectItem itemValue = "Japan" itemLabel = "Japan" />
</h:selectOneMenu>
</div>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<h:outputLabel class="col-sm-3 control-label" for="userLevel">User Level:</h:outputLabel>
<div class="col-sm-9">
<div class="custom-select">
<h:selectOneMenu class="select2" id="userLevel" value="#{userBean.user.userLevel}" title="UserLevel">
<f:selectItem itemLabel="Choose item" noSelectionOption="true" />
<f:selectItems value="#{userBean.findAllUserRole()}" var="user" itemLabel="#{user.name}" itemValue="#{user.name}" />
<f:ajax render="#{user.name}" />
</h:selectOneMenu>
</div>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<h:outputLabel class="col-sm-3 control-label" value="Town / City:" for="userTown" />
<div class="col-sm-9">
<h:inputText class="form-control" id="userTown" value="#{userBean.user.userTown}" title="UserTown" requiredMessage="" />
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<h:outputLabel class="col-sm-3 control-label" for="userAbout">About Me:</h:outputLabel>
<div class="col-sm-9">
<h:inputTextarea class="form-control" id="userAbout" value="#{userBean.user.userAbout}" title="UserAbout" requiredMessage="" style="height: 150px;" rows="8" />
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<f:facet name="footer">
<div class="form-group mb-none">
<div class="col-sm-3">
<b:commandButton value="Save" look="success" style="width:80px" action="#{userBean.editUser()}" a:dismiss="modal" />
</div>
<div class="col-sm-3">
<b:button value="Close" look="warning" style="width:80px" dismiss="modal" />
</div>
</div>
</f:facet>
</div>
</b:modal>
</h:form>
</f:view>
You need to update the content of the modal when the user selects a row. You know, the datatable and the modal are part of the same XHTML file, so they are rendered at the same time. Of course, that's too early, so the modal shows the wrong user if it isn't updated.
BTW, I believe it's a good idea to rename user to selectedUser, initialize it with null, and to render the content of the modal only if the selectedUser is not null. That way, you notice when something's wrong. Plus, less HTML code is sent to the client.
Not directly related to your question: your code snippet calls editUser() multiple times. You may want to do some housekeeping.
I want to reset values when I submit a form.
<h:form id="form">
<div class="success_wrapper">
<div class="success-message">Contact form submitted</div>
</div>
<div class="string">
<label class="name">
<h:inputText id="name" value="#{mailhandler.name}" pt:placeholder="Name*:"/>
</label>
<label class="email">
<h:inputText id="email" value="#{mailhandler.senderEmail}" pt:placeholder="E-mail*:"/>
</label>
<label class="phone">
<h:inputText id="telephone" value="#{mailhandler.telephone}" pt:placeholder="Telephone*:"/>
</label>
</div>
<label class="message">
<h:inputTextarea value="#{mailhandler.comment}" pt:placeholder="Comment*:"/>
</label>
<div class="clear"></div>
<div class="btns">
<h:commandLink id="submitlink" class="link" value="submit" action="#{mailhandler.sendEmail}" >
<f:ajax render="#form" execute="#form" onevent="handleDisableButton" resetValues="true"/>
</h:commandLink>
</div>
<br/>
<h:outputText id="output" value="#{mailhandler.result}" />
</h:form>
I tested this code example but for some reason the old values are still kept after the AJAX call.
I added resetValues="true" but the result is the same. Can you help me to find the issue?
The code which is working earlier stops working when I started using #ViewScoped along with f:metadata, f:viewParam for editing an item in a datatable.
I am using JSF-2.2 with Prettyfaces-2.0.12.Final
Below are similar questions but there are no answers:
java.lang.NullPointerException at com.sun.faces.application.view.FaceletViewHandlingStrategy$MethodRetargetHandlerManager
com.sun.faces.application.view.FaceletViewHandlingStrategy handleRenderException
Find the below complete stack trace:
com.sun.faces.application.view.FaceletViewHandlingStrategy handleRenderException
SEVERE: Error Rendering View[/restricted/professional_details.xhtml]
java.lang.NullPointerException
at java.net.URLEncoder.encode(URLEncoder.java:205)
at com.sun.faces.context.UrlBuilder.addValuesToParameter(UrlBuilder.java:318)
at com.sun.faces.context.UrlBuilder.addParameters(UrlBuilder.java:127)
at com.sun.faces.context.ExternalContextImpl.encodeBookmarkableURL(ExternalContextImpl.java:1055)
at com.sun.faces.application.view.MultiViewHandler.getBookmarkableURL(MultiViewHandler.java:407)
at org.ocpsoft.rewrite.faces.RewriteViewHandler.getBookmarkableURL(RewriteViewHandler.java:164)
at com.sun.faces.renderkit.html_basic.OutcomeTargetRenderer.getEncodedTargetURL(OutcomeTargetRenderer.java:194)
at com.sun.faces.renderkit.html_basic.OutcomeTargetLinkRenderer.renderAsActive(OutcomeTargetLinkRenderer.java:158)
at com.sun.faces.renderkit.html_basic.OutcomeTargetLinkRenderer.encodeBegin(OutcomeTargetLinkRenderer.java:96)
at javax.faces.component.UIComponentBase.encodeBegin(UIComponentBase.java:864)
at javax.faces.component.UIComponent.encodeAll(UIComponent.java:1854)
at javax.faces.render.Renderer.encodeChildren(Renderer.java:176)
at javax.faces.component.UIComponentBase.encodeChildren(UIComponentBase.java:889)
at javax.faces.component.UIComponent.encodeAll(UIComponent.java:1856)
at javax.faces.component.UIComponent.encodeAll(UIComponent.java:1859)
at javax.faces.component.UIComponent.encodeAll(UIComponent.java:1859)
at com.sun.faces.application.view.FaceletViewHandlingStrategy.renderView(FaceletViewHandlingStrategy.java:456)
at com.sun.faces.application.view.MultiViewHandler.renderView(MultiViewHandler.java:133)
at org.ocpsoft.rewrite.faces.RewriteViewHandler.renderView(RewriteViewHandler.java:186)
at com.sun.faces.lifecycle.RenderResponsePhase.execute(RenderResponsePhase.java:120)
at com.sun.faces.lifecycle.Phase.doPhase(Phase.java:101)
at com.sun.faces.lifecycle.LifecycleImpl.render(LifecycleImpl.java:219)
at javax.faces.webapp.FacesServlet.service(FacesServlet.java:647)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:305)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:210)
at org.apache.tomcat.websocket.server.WsFilter.doFilter(WsFilter.java:51)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:243)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:210)
at org.ocpsoft.rewrite.servlet.RewriteFilter.doFilter(RewriteFilter.java:205)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:243)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:210)
at org.apache.catalina.core.ApplicationDispatcher.invoke(ApplicationDispatcher.java:749)
at org.apache.catalina.core.ApplicationDispatcher.processRequest(ApplicationDispatcher.java:487)
at org.apache.catalina.core.ApplicationDispatcher.doForward(ApplicationDispatcher.java:412)
at org.apache.catalina.core.ApplicationDispatcher.forward(ApplicationDispatcher.java:339)
at org.ocpsoft.rewrite.servlet.impl.HttpRewriteResultHandler.handleResult(HttpRewriteResultHandler.java:41)
at org.ocpsoft.rewrite.servlet.RewriteFilter.rewrite(RewriteFilter.java:268)
at org.ocpsoft.rewrite.servlet.RewriteFilter.doFilter(RewriteFilter.java:188)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:243)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:210)
at com.pe.application.PEFilter.doFilter(PEFilter.java:64)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:243)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:210)
at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:222)
at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:1
23)
at org.apache.catalina.authenticator.AuthenticatorBase.invoke(AuthenticatorBase.java:502)
at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:171)
at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:100)
at org.apache.catalina.valves.AccessLogValve.invoke(AccessLogValve.java:953)
at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:118)
at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:408)
at org.apache.coyote.http11.AbstractHttp11Processor.process(AbstractHttp11Processor.java:1041)
at org.apache.coyote.AbstractProtocol$AbstractConnectionHandler.process(AbstractProtocol.java:603)
at org.apache.tomcat.util.net.JIoEndpoint$SocketProcessor.run(JIoEndpoint.java:310)
at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1145)
at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:615)
at java.lang.Thread.run(Thread.java:744)
professional_details.xhtml:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://xmlns.jcp.org/jsf/passthrough"
xmlns:pf="http://primefaces.org/ui">
<h:head>
</h:head>
<h:body>
<h:outputStylesheet library="css" name="admin.css" />
<h:outputStylesheet library="css" name="font.css" />
<h:outputStylesheet library="css" name="font-awesome.css" />
<h:outputStylesheet library="css" name="jquery-ui.css" />
<h:outputScript library="js" name="jquery.min.js" target="head" />
<h:outputScript library="js" name="jquery-ui.min.js" target="head" />
<h:outputScript library="js" name="bootstrap.js" target="head" />
<h:outputScript library="js" name="bootstrap-modal.js" target="head" />
<h:outputScript library="js" name="script.js" target="head" />
<h:outputScript library="js" name="signup.js" target="head" />
<script type="text/javascript">
//For calendar
$(function() {
$(".datepicker").datepicker({
showOtherMonths : true,
selectOtherMonths : true,
showButtonPanel : true,
changeMonth : true,
changeYear : true,
yearRange : '1980:2014',
dateFormat : 'mm/dd/yy',
showWeek : true
});
});
</script>
<ui:include src="../includes/header.xhtml" />
<div class="container-fluid">
<f:metadata>
<f:viewParam name="id"
value="#{professionalDetailsManagedBean.professionalBean}"
converter="#{professionalConverter}"
converterMessage="Unknown professional please use a link from within the system."
required="true"
requiredMessage="Bad request, please use a link from within the system." />
</f:metadata>
<h:messages />
<!-- <h:form enctype="multipart/form-data"> -->
<h:form id="include">
<ui:include src="../includes/adminSideMenu.xhtml" />
</h:form>
<section class="row-fluid">
<div role="main" class="span10">
<div class="row-fluid">
<section role="main" class="span12"> <!-- <div class="span10"> -->
<h1>
#{professionalDetailsManagedBean.professionalBean.professionalName}</h1>
<br></br>
<h:form id="profTabs">
<ul class="nav nav-tabs" style="font-size: 15px;">
<li class="active"><h:link
outcome="pretty:professionalDetails" value="Profile">
<f:param name="professionalName"
value="#{professionalDetailsManagedBean.professionalBean.professionalName}" />
<f:param name="id"
value="#{professionalDetailsManagedBean.professionalBean.professionalId}" />
</h:link></li>
<li><h:link outcome="pretty:professionalInvestments"
value="Investments">
<f:param name="professionalName"
value="#{professionalDetailsManagedBean.professionalBean.professionalName}" />
<f:param name="professionalInvestements"
value="#{professionalDetailsManagedBean.professionalBean.professionalId}" />
</h:link></li>
<li><h:link outcome="pretty:professionalInvestedFunds"
value="Invested Funds">
<f:param name="professionalName"
value="#{professionalDetailsManagedBean.professionalBean.professionalName}" />
<f:param name="professionalInvestedFunds"
value="#{professionalDetailsManagedBean.professionalBean.professionalId}" />
</h:link></li>
</ul>
</h:form> <h:form id="profData" enctype="multipart/form-data">
<div class="row-fluid">
<div class="span10"></div>
<div class="span2 pull-right">
<h:graphicImage
value="/image?id=#{professionalDetailsManagedBean.professionalBean.professionalId}%26type=Professional" />
</div>
</div>
<div class="row-fluid">
<div class="span9">
<div class="span6">
<div class="control-group">
<h6>Name</h6>
<div class="controls">
<h:messages showDetail="false" showSummary="true" />
<h:inputText id="inputName"
value="#{professionalDetailsManagedBean.professionalBean.professionalName}"
required="true">
<f:ajax listener="#{professionalManagedBean.duplicateCheck}"
render="error" />
<f:passThroughAttribute name="placeholder"
value="Please provide Name..." />
<f:passThroughAttribute name="required" value="true" />
</h:inputText>
<h:outputText id="error"
value="#{professionalManagedBean.result}"
style="margin-left: 0px; color: red;" />
<div class="error" style="margin-left: 0px; color: red;"
id="inputNameError" />
</div>
</div>
<div class="control-group">
<h6>Designation</h6>
<div class="controls">
<h:inputText id="designation"
value="#{professionalDetailsManagedBean.professionalBean.designation}">
</h:inputText>
<div class="error" style="margin-left: 0px; color: red;"
id="designationError" />
</div>
</div>
<div class="control-group">
<h6>Firm Name</h6>
<div class="controls">
<pf:autoComplete
value="#{autoCompleteManagedBean.testFieldBean}"
p:placeholder="Firm Name"
completeMethod="#{autoCompleteManagedBean.firmsCompaniesAutoComplete}"
var="p" itemLabel="#{p.name}" minQueryLength="3"
style="position: inherit;" id="suggestionBoxFirmName">
</pf:autoComplete>
</div>
</div>
<div class="control-group">
<h6>Email ID</h6>
<div class="controls">
<h:inputText id="emailId"
value="#{professionalDetailsManagedBean.professionalBean.emailId}">
</h:inputText>
<div class="error" style="margin-left: 0px; color: red;"
id="emailError"></div>
</div>
</div>
<div class="control-group">
<h6>Phone Number</h6>
<div class="controls">
<h:inputText type="text" id="phoneNumber"
p:placeholder="+001 5689996544" name="email"
value="#{professionalDetailsManagedBean.professionalBean.phone}">
</h:inputText>
<div class="error" style="margin-left: 0px; color: red;"
id="phoneError"></div>
</div>
</div>
</div>
<div class="span6">
<div class="control-group">
<h6>Join Date</h6>
<div class="controls">
<h:inputText type="text" styleClass="datepicker"
value="#{professionalDetailsManagedBean.professionalBean.joinDate}"
id="inputJoined" readonly="#{facesContext.renderResponse}">
</h:inputText>
<div class="error" style="margin-left: 0px; color: red;"
id="inputJoinedError"></div>
</div>
</div>
<div class="control-group">
<h6>Exit Date</h6>
<div class="controls">
<h:inputText type="text" styleClass="datepicker"
value="#{professionalDetailsManagedBean.professionalBean.exitDate}"
id="inputLeaved" readonly="#{facesContext.renderResponse}">
</h:inputText>
<div class="error" style="margin-left: 0px; color: red;"
id="inputLeavedError"></div>
</div>
</div>
<div class="control-group">
<h6>Rank</h6>
<div class="controls">
<h:selectOneMenu
value="#{professionalDetailsManagedBean.professionalBean.rank}">
<f:selectItem itemLabel="0" itemValue="0" />
<f:selectItem itemLabel="1" itemValue="1" />
<f:selectItem itemLabel="2" itemValue="2" />
<f:selectItem itemLabel="3" itemValue="3" />
</h:selectOneMenu>
</div>
</div>
<div class="control-group">
<h6>Office</h6>
<div class="controls">
<h:selectOneMenu
value="#{professionalDetailsManagedBean.professionalBean.office}">
<f:selectItem itemLabel="0" itemValue="0" />
<f:selectItem itemLabel="1" itemValue="1" />
<f:selectItem itemLabel="2" itemValue="2" />
<f:selectItem itemLabel="3" itemValue="3" />
</h:selectOneMenu>
</div>
</div>
<div class="control-group">
<h6>Function</h6>
<div class="controls">
<h:selectOneMenu
value="#{professionalDetailsManagedBean.professionalBean.function}">
<f:selectItem itemLabel="Please Select"
noSelectionOption="true" />
<f:selectItem itemLabel="Investment" itemValue="Investment" />
<f:selectItem itemLabel="Administrative"
itemValue="Administrative" />
<f:selectItem itemLabel="Operations" itemValue="Operations" />
</h:selectOneMenu>
</div>
</div>
</div>
</div>
<div class="span3" style="margin-top: 187px;">
<div>
<div class="control-group">
<div class="center">
<!-- <h:graphicImage
value="/image?id=#{professionalDetailsManagedBean.professionalBean.professionalId}%26type=Professional" /> -->
</div>
<div class="controls">
<h:inputFile id="file" name="file"
value="#{professionalDetailsManagedBean.professionalBean.part}"
required="true" requiredMessage="File not selected"
label="file" />
<h:commandButton value="Upload"
action="#{professionalDetailsManagedBean.uploadProfessionalImage(professionalManagedBean.professionalBean.professionalId)}" />
</div>
</div>
</div>
<div class="well" style="text-align: center">
<h:commandButton styleClass="btn btn-primary btn-large"
value="Save Changes"
action="#{professionalDetailsManagedBean.updateProfessionalDetails(professionalManagedBean.professionalBean)}"></h:commandButton>
<h:outputText value=" "></h:outputText>
Cancel
</div>
<h6>Is LP (Limited Partner)?</h6>
<label class="checkbox"> <h:selectBooleanCheckbox
name="is_active"
value="#{professionalDetailsManagedBean.professionalBean.isLp}" />
Yes
</label>
</div>
</div>
<div class="row-fluid">
<div class="span9" style="margin-left: 0px">
<div class="control-group">
<h6>Bio</h6>
<div class="controls">
<h:inputTextarea class="span13" name="biography" rows="6"
id="bio">
</h:inputTextarea>
<div class="error" style="margin-left: 0px; color: red;"
id="bioError"></div>
</div>
</div>
<div class="row-fluid">
<div class="span4">
<h3 class="heading">Working Experience</h3>
<h4>Current :</h4>
<ul>
<ui:repeat var="experience"
value="#{professionalDetailsManagedBean.professionalBean.professionalWorkExpMap.entrySet().toArray()}">
<h:panelGroup rendered="#{experience.value.workStatus}">
<li><h:commandLink styleClass="topopup3">#{experience.value.firmOrPortfolioName}
<!-- <f:ajax
listener="#{professionalManagedBean.editProfessionalWorkExperience(experience.value.experienceId, experience.value.professionalId)}" /> -->
</h:commandLink> <h:commandLink styleClass="btn btn-mini btn-primary">
<span class="icon-pencil"></span>
</h:commandLink> <h:commandLink styleClass="btn btn-mini btn-warning">
<span class="icon-close"></span>
</h:commandLink></li>
<br></br>
</h:panelGroup>
</ui:repeat>
</ul>
<h4>Past :</h4>
<ul>
<ui:repeat var="experience"
value="#{professionalDetailsManagedBean.professionalBean.professionalWorkExpMap.entrySet().toArray()}">
<h:panelGroup rendered="#{!experience.value.workStatus}">
<li><h:commandLink styleClass="topopup3">#{experience.value.firmOrPortfolioName}
<!-- <f:ajax
listener="#{professionalManagedBean.editProfessionalWorkExperience(experience.value.experienceId, experience.value.professionalId)}" /> -->
</h:commandLink> <h:commandLink styleClass="btn btn-mini btn-primary">
<span class="icon-pencil"></span>
</h:commandLink> <h:commandLink styleClass="btn btn-mini btn-warning">
<span class="icon-close"></span>
</h:commandLink></li>
</h:panelGroup>
</ui:repeat>
</ul>
<div>
<a href="#" id="addworkexp"
class="btn btn-success pull-left topopup"><i
class="icon-plus"></i> Add Work Experience</a>
</div>
</div>
<div class="span4">
<h3 class="heading">Sectorall Focusus</h3>
<h:selectManyListbox
value="#{professionalDetailsManagedBean.professionalBean.sectorallFocusus}"
size="8" styleClass="defaultText">
<f:selectItems
value="#{newFieldsManagedBean.newFieldsBean.sectorMap.entrySet()}"
var="entry" itemValue="#{entry.value}"
itemLabel="#{entry.value}" />
</h:selectManyListbox>
</div>
<div class="span4">
<h3 class="heading">Qualifications</h3>
<ol>
<ui:repeat var="qualification"
value="#{professionalDetailsManagedBean.professionalBean.professionalQualificationMap.entrySet().toArray()}">
<li><h:commandLink styleClass="topopup_mini"
value="#{qualification.value.universityName}, #{qualification.value.degree}, #{qualification.value.stream}">
</h:commandLink> <h:commandLink styleClass="btn btn-mini btn-primary">
<span class="icon-pencil"></span>
</h:commandLink> <h:commandLink styleClass="btn btn-mini btn-warning">
<span class="icon-close"></span>
</h:commandLink></li>
</ui:repeat>
</ol>
<div>
<a href="#" id="addEduQuals"
class="btn btn-success pull-left topopup1"><i
class="icon-plus"></i> Add Education Qualification</a>
</div>
</div>
</div>
</div>
<div class="span3">
<h3 class="heading">Board Seats</h3>
<h4>Current :</h4>
<ul>
<ui:repeat var="board"
value="#{professionalDetailsManagedBean.professionalBean.boardSeatsMap.entrySet().toArray()}">
<h:panelGroup rendered="#{board.value.status}">
<li><h:commandLink styleClass="topopup4">#{board.value.firmOrPortfolioName}
</h:commandLink> <h:commandLink styleClass="btn btn-mini btn-primary">
<span class="icon-pencil"></span>
</h:commandLink> <h:commandLink styleClass="btn btn-mini btn-warning">
<span class="icon-close"></span>
</h:commandLink></li>
</h:panelGroup>
</ui:repeat>
</ul>
<h4>Past :</h4>
<ul>
<ui:repeat var="board"
value="#{professionalDetailsManagedBean.professionalBean.boardSeatsMap.entrySet().toArray()}">
<h:panelGroup rendered="#{!board.value.status}">
<li><h:commandLink styleClass="topopup4">#{board.value.firmOrPortfolioName}
</h:commandLink> <h:commandLink styleClass="btn btn-mini btn-primary">
<span class="icon-pencil"></span>
</h:commandLink> <h:commandLink styleClass="btn btn-mini btn-warning">
<span class="icon-close"></span>
</h:commandLink></li>
</h:panelGroup>
</ui:repeat>
</ul>
<div>
<a href="#" id="addbordseats"
class="btn btn-success pull-left topopup2"><i
class="icon-plus"></i> Add Board Seats</a>
</div>
</div>
</div>
</h:form>
</section>
</div>
</div>
</section>
<!-- </h:form> -->
</div>
</h:body>
</html>
ProfessionalDetailsManagedBean.Java:
import java.io.Serializable;
import java.util.HashMap;
import java.util.Map;
import java.util.Map.Entry;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
import org.apache.log4j.Logger;
#ManagedBean
#ViewScoped
public class ProfessionalDetailsManagedBean extends PaginationManagedBean
implements Serializable {
private static final long serialVersionUID = 1L;
private static Logger logger = Logger
.getLogger(ProfessionalDetailsManagedBean.class);
private static final int DEFAULT_PAGE_INDEX = 1;
public ProfessionalBean professionalBean;
public ProfessionalDetailsManagedBean() {
super(DEFAULT_RECORDS_NUMBER, DEFAULT_PAGE_INDEX);
}
/**
* #return the professionalBean
*/
public ProfessionalBean getProfessionalBean() {
return professionalBean;
}
/**
* #param professionalBean
* the professionalBean to set
*/
public void setProfessionalBean(ProfessionalBean professionalBean) {
this.professionalBean = professionalBean;
}
public String updateProfessionalDetails() throws Exception {
if (logger.isDebugEnabled()) {
logger.debug("Updating professional details: joinDate"
+ this.professionalBean.getJoinDate() + ", exitDate: "
+ this.professionalBean.getExitDate());
}
// Now updating the professional details in the db
IProfessionalOperations professionalOperations = new ProfessionalOperationsImpl();
professionalOperations
.updatePortfolioProfessional(this.professionalBean);
return null;
}
}
Code is working after removing the enctype in h:form. Also, removed the tags responsible for file upload. Moved all the file upload tags to a different h:form.
It is just a workaround, need to see how we can make it work with mime content.
I want to use a ui:repeat or any other iterative tag to display a number of components once
for each item in an Array list.
<!-- print multiple mandates -->
<ui:repeat id="mandates" var="mandate" value="#{taxheadDirectDebit.mandates}">
<a4j:region id="remittanceDetailsSection"
rendered="#{(taxheadDirectDebit.accountFinancialInfo.registration.type != 'PREM') or (taxheadDirectDebit.accountFinancialInfo.registration.type != 'VAT')}">
<!-- Remittance Details -->
<fieldset><legend class="sub"> <h:outputText
value="#{msg['remittanceDetails.title']}" /> </legend>
<!-- Estimated Liability -->
<div class="field">
<div class="label"><label for="allocatedAmount"><h:outputText
for="estimatedLiability"
value="#{msg['remittanceDetails.estimatedLiability']}" /> </label><span
class="requiredFlag">*</span></div>
<div class="error">
<rich:message styleClass="errorText" for="estimatedLiability" />
</div>
<div class="input">
<h:inputText id="estimatedLiability" size="30"
maxlength="11" label="#{msg['registerContractPage1.subTaxNumber']}"
value="#{taxheadDirectDebit.estimatedLiability}">
<a4j:ajax event="change" render="remittanceFrequency" />
</h:inputText>
</div>
<br class="clear" />
</div>
<!-- Is Seasonal -->
<div class="field">
<div class="label"><label for="isSeasonal"> <h:outputText
for="isSeasonal"
value="#{msg['remittanceDetails.isTheNatureSeasonal']}" /> </label><span
class="requiredFlag">*</span></div>
<div class="error"><rich:message styleClass="errorText"
for="isSeasonal" /></div>
<div class="input"><h:selectOneRadio id="isSeasonal"
label="#{msg['remittanceDetails.isTheNatureSeasonal']}"
value="#{taxheadDirectDebit.isSeasonal}"
styleClass="radioLabelTop">
<ddo:twoOptionSelection />
<a4j:ajax event="click" render="remittanceFrequency" />
</h:selectOneRadio></div>
<br class="clear" />
</div>
</fieldset>
</a4j:region>
<!-- Remittance Frequency -->
<a4j:outputPanel id="remittanceFrequency">
<div class="field">
<div class="label"><label for="allocatedAmount"><h:outputText
for="estimatedLiability"
value="#{msg['remittanceDetails.estimatedLiability']}" /> </label><span
class="requiredFlag">*</span></div>
<div class="error">
<rich:message styleClass="errorText" for="estimatedLiability" />
</div>
<div class="input">
<h:inputText id="estimatedLiability" size="30"
maxlength="11" label="#{msg['registerContractPage1.subTaxNumber']}"
value="#{taxheadDirectDebit.estimatedLiability}">
<a4j:ajax event="change" render=":remittanceDetails:mandates:remittanceFrequency" />
</h:inputText>
</div>
<br class="clear" />
</div>
<fieldset><legend class="sub"> <h:outputText
value="#{msg['remittanceDetails.frequency']}" /> </legend>
<!-- Amount to be Debited -->
<div class="field">
<div class="label"><label for="amountEachMonth"><h:outputText
for="amountEachMonth"
value="#{msg['remittanceDetails.amountToBeDebited']}" /> </label></div>
<div class="error"><rich:message styleClass="errorText"
for="amountEachMonth" /></div>
<div class="input"><h:inputText id="amountEachMonth" size="30" readOnly="true"
maxlength="8" label="#{msg['remittanceDetails.amountToBeDebited']}"
value="#{mandate.remittanceDetails.amountEachMonth}">
<a4j:ajax event="change" render="remittanceFrequencyNoDebitedEachMonth"/>
</h:inputText></div>
<br class="clear" />
</div>
<a4j:outputPanel id="remittanceFrequencyNoDebitedEachMonth">
<!-- Months -->
<div class="field">
<div class="grid1"><h:outputText
value=" " />
</div>
<rich:panel styleClass="ddo-panel" rendered="#{taxheadDirectDebit.isSeasonal == 1}">
<div class="grid2"><div align="center">
<h:outputText value="#{msg['reviewDetails.reduce']}"/><div align="center"></div>
</div></div>
</rich:panel>
<rich:panel styleClass="ddo-panel" rendered="#{taxheadDirectDebit.action == 'AMEND'}">
<div class="grid3">
<div align="center">
<h:outputText value="#{msg['reviewDetails.suspend']}"/><div align="center"></div>
</div>
</div>
</rich:panel>
<rich:panel styleClass="ddo-panel" rendered="#{taxheadDirectDebit.isSeasonal == 1}">
<div class="grid2">
<div align="center">
<h:outputText value="#{msg['reviewDetails.exclude']}"/><div align="center"></div>
</div>
</div>
</rich:panel>
<br class="clear" />
<div class="floatleft">
<div class="row3">
<div class="row1">
<!-- January -->
<!-- Months Column -->
<div class="grid1">
<label>
<h:outputText readOnly="true" disabled="true" size="4" value="#{msg['calendar.month.0']}" />
</label>
</div>
<!-- Reduce check box -->
<rich:panel styleClass="ddo-panel" rendered="#{taxheadDirectDebit.isSeasonal == 1}">
<div class="grid2">
<div align="center">
<h:selectBooleanCheckbox
id="reduce12"
value="#{mandate.remittanceDetails.remittanceFrequencys[0].reduce}"
disabled="#{mandate.remittanceDetails.remittanceFrequencys[0].exclude}">
<a4j:ajax event="click" render="remittanceFrequency" />
</h:selectBooleanCheckbox>
</div>
</div>
</rich:panel>
<!-- Suspend check box -->
<rich:panel styleClass="ddo-panel" rendered="#{taxheadDirectDebit.isSeasonal != 1}">
<div class="grid2hidden">
<h:outputText value=" " />
</div>
</rich:panel>
<rich:panel styleClass="ddo-panel" rendered="#{taxheadDirectDebit.action == 'AMEND'}">
<div class="grid3">
<div align="center">
<h:selectBooleanCheckbox
id="suspend0"
value="#{mandate.remittanceDetails.remittanceFrequencys[0].suspend}">
<a4j:ajax event="change" />
</h:selectBooleanCheckbox>
</div>
</div>
</rich:panel>
<!-- Exclude check box -->
<rich:panel styleClass="ddo-panel" rendered="#{taxheadDirectDebit.isSeasonal == 1}">
<div class="grid2">
<div align="center">
<h:selectBooleanCheckbox
id="exclude0"
value="#{mandate.remittanceDetails.remittanceFrequencys[0].exclude}"
disabled="#{mandate.remittanceDetails.remittanceFrequencys[0].reduce}">
<a4j:ajax event="change" render="remittanceFrequency" />
</h:selectBooleanCheckbox>
</div>
</div>
</rich:panel>
<rich:panel styleClass="ddo-panel" rendered="#{taxheadDirectDebit.isSeasonal != 1}">
<div class="grid2hidden">
<h:outputText value=" " />
</div>
</rich:panel>
<div class="errorRemittance">
<rich:message styleClass="errorText" for="remittanceAmount0"/>
</div>
<!-- Monthly Amount field -->
<div class="grid5">
<h:inputText
id="remittanceAmount0" size="30" maxlength="8" readOnly="true"
value="#{mandate.remittanceDetails.remittanceFrequencys[0].amount}"
disabled="#{!mandate.remittanceDetails.remittanceFrequencys[0].reduce}"
label="#{msg['remittanceDetails.amountToBeDebited']}">
<a4j:ajax event="change" render="remittanceFrequency" />
</h:inputText>
</div>
</div>
</div>
<div class="errorText" font="bold">
<rich:message styleClass="errorTextNoPadding" for="continue"/>
</div>
</div>
</div>
</a4j:outputPanel>
</fieldset>
</a4j:outputPanel>
<rich:message>
<rich:message for="remittanceFrequency" ajaxRendered="true" />
</rich:message>
</ui:repeat>
I've taken out a lot of my code here so there may be un macthed divs etc but the idea is there.
I have two problems:
You can see that some components have change events that render other components based on id. These don't work inside the repeat
I'm using webflow and adding messages to the message context so that the message tags can display validation messages but these don't work in the iteration either.
I have tried tr:iterator, c:forEach, a4j:repeat, tr:forEach. I'm pretty sure what I'm trying to do isn't possible the way I'm trying to do it so if anyone has experience trying to achieve similar I'd appreciate some help. I can't change the MVC frameowork I'm using but could use perhaps jQuery.
I solved this by moving the ajax region outside the repeat and just calling render on the whole region. Not beautiful I know but the quickest solution I could find.
On the message front I simply add the index of the item in the list being iterated over into the message.
"remittanceDetails:mandates:"+taxhead.getMandates().indexOF(mandate)+":remittanceAmount" + frequency.getMonth().getCode()
JSF looks after the rest.