I want to create JSF form with attached file. But also to give a option form the users to submit the for without attach file. I don't want this to be mandatory.
<h:form id="form" enctype="multipart/form-data">
<div class="string">
<label class="name">
<h:inputText id="name" value="#{contacts.name}" pt:placeholder="Name*:"/>
</label>
</div>
<label class="message">
<h:inputTextarea value="#{contacts.comment}" pt:placeholder="Comment*:"/>
</label>
<h:inputFile id="fileToUpload" value="#{contacts.file}" required="true" requiredMessage="No file selected ..."/>
<h:commandButton value="Upload" action="#{contacts.upload()}">
<f:ajax execute="fileToUpload" />
</h:commandButton>
<h:message showDetail="false" showSummary="true" for="fileToUpload" style="color:red"/>
<div class="btns">
<h:commandLink id="submitlink" class="link" value="submit" action="#{contacts.sendEmail}" >
<f:ajax render="#form" execute="#form" onevent="handleDisableButton" resetValues="true"/>
</h:commandLink>
</div>
<h:outputText id="output" value="#{contacts.result}" />
</h:form>
Is there a way to implement this because now if I try to submit the form I always get message No file selected ...?
Also when I attach a file using the button upload button no message appears for successful file upload.
You have your inputFile as required. That is why you have to upload first always.
Also, if you are not seeing any message it's because you are not rendering again your h:message. Try using this in your managed bean:
FacesContext.getCurrentInstance().getPartialViewContext().getRenderIds()
.add("idMessage");
change
<h:inputFile id="fileToUpload" value="#{contacts.file}" required="true" requiredMessage="No file selected ..."/>
to
<h:inputFile id="fileToUpload" value="#{contacts.file}" />
Related
I have such code as follow in my input.xhtml file which takes input from user. But this BootsFaces code is not working, Please Someone help me to solve this problem if any one faced it Before.
<b:form id="studentForm" styleClass="form-horizontal">
<h:panelGrid columns="1" cellpadding="5">
<b:inputText label="E-mail:" labelStyle="width:80px;">
<f:facet name="prepend">
<h:inputText value="#{studentBean.firstName}" styleClass="form-control" />
</f:facet>
</b:inputText>
</h:panelGrid>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<b:commandButton value="Create" action="#{studentBean.createStudentForm}" styleClass="btn btn-default" />
</div>
</div>
</b:form>
You are using the b:inputText incorrectly. You should not wrap a h:inputText in it. You can bind the value using the b:inputText tag:
<b:inputText label="First name:"
labelStyle="width:80px;"
value="#{studentBean.firstName}"/>
See also:
https://showcase.bootsfaces.net/forms/inputText.jsf (documentation).
https://github.com/TheCoder4eu/BootsFacesWeb (if you want to download the showcase and its examples).
I have a weird problem with jsf components (h:inputFile & h:selectBooleanCheckbox).
Both components receive focus, even when my mouse is somewhere else on the page. Here is the code:
<h:form id="logoUpload" enctype="multipart/form-data">
<div>
<h:outputLabel rendered="true">
<h:inputFile id="companyLogo" label="file" value="#{fileHandlerBean.part}" >
<f:validator validatorId="FileUploadValidator" />
</h:inputFile>
</h:outputLabel>
</div>
<div class="clear" />
<h:outputLabel rendered="true">
<div>
<div style="width: 5%">
<h:selectBooleanCheckbox id="acceptToULogo" value="#{companyEditController.confirmToU}">
<p:ajax event="change" update="buttonLogo" />
</h:selectBooleanCheckbox>
</div>
<div style="width: 95%">
<h:outputText value="Some Text " />
</div>
<br />
<h:commandButton id="buttonLogo" styleClass="formbutton" value="Upload"
action="#{companyEditController.companyLogoUpload()}"
actionListener="#{fileHandlerBean.uploadCompanyLogo()}"
disabled="#{!companyEditController.confirmToU}"/>
</div>
</h:outputLabel>
</h:form>
If I move the mouse over the h:outputText the checkbox receives focus.
I had the same problem with the h:inputFile tag. I solved it by surrounding it with a h:outputLabel tag, but unfortunately it doesn´t workd with the selectBooleanCheckbox.
Did somebody have the same problem in the past and knows a solution?
This is because everything is wrapped in the h:outputLabel tag. This outputLable is rendered as a plain label html element.
You can see form the W3C specification that anything inside the label will toggle the control
The element does not render as anything special for the user. However, it provides a usability improvement for mouse users, because if the user clicks on the text within the element, it toggles the control
To fix this, you need to replace the h:output label tag using a h:panelGroup layout="block" which renders a <div>:
<h:panelGroup layout="block" rendered="true">
<div>
<div style="width: 5%">
<h:selectBooleanCheckbox id="acceptToULogo" >
<p:ajax event="change" update="buttonLogo" />
</h:selectBooleanCheckbox>
</div>
<div style="width: 95%">
<h:outputText value="Some Text " />
</div>
<br />
<h:commandButton id="buttonLogo" styleClass="formbutton" value="Upload"/>
</div>
</h:panelGroup>
I would like to implement form with file upload. I tried this.
<f:websocket channel="uploadProgress" scope="view" onmessage="updateProgressBar" />
<h:form id="form" enctype="multipart/form-data">
<h:panelGrid columns="2" styleClass="new_table">
..................
</h:panelGrid>
<div class="row">
<h:messages id="uploadMsgId" globalOnly="true" showDetail="false" showSummary="true"/>
<h:inputFile id="fileToUpload" required="true" requiredMessage="No file selected ..." value="#{newProcedure.file}"/>
<h:message showDetail="false" showSummary="true" for="fileToUpload"/>
<h:commandButton value="Upload" action="#{newProcedure.upload()}">
<f:ajax execute="#form" onevent="progressBar" render="#form"/>
</h:commandButton>
<div>
<div id="progressBarId" width="250px;" height="23"/>
</div>
</div>
<h:commandButton styleClass="button" value="Create Procedure" action="#{newProcedure.addNewProcedure(1)}">
<f:ajax render="#form" execute="#form"></f:ajax>
</h:commandButton>
</h:form>
I can upload file when I press the internal h:commandButton but when I press the second button to submit the form with the attached file nothing happens.
Any idea why it;s not working? Also if there is no selected file how I can submit the form without the attached file? I need to implement some check?
hi as per my requirement there is one h:inputtext to find user. If user is found it populated first name, last name and email in corresponding h:inputtext which is disabled. but if not found that inputtext should become enabled and new details can be filled.
<h:inputText value="#{countryBean.usersDetailsDTO.eid}" id="eid" required="true" requiredMessage="Enter EID">
<f:ajax></f:ajax>
</h:inputText><h:message styleClass="msgStyle4" id="msgEid" for="eid"/>
</div>
<h:commandButton styleClass="search_btn" immediate="true">
<f:ajax listener="#{countryBean.getUserDetail}" render="empFName empLName empEmail" event="click" execute="#this" />
</h:commandButton>
<div class="clear"> </div>
<div class="form-field" style="margin-left:222px;">
first Name <h:inputText value="#{countryBean.usersDetailsDTO.firstName}" id="empFName" required="true" requiredMessage="Enter First Name">
<f:validator validatorId="nameValidation" />
</h:inputText><h:message styleClass="msgStyle4" id="msgfn" for="empFName"/>
</div>
<div class="clear"></div>
<div class="form-field" style="margin-left:10px;">
last name <h:inputText value="#{countryBean.usersDetailsDTO.lastName}" id="empLName" required="true" requiredMessage="Enter Last Name">
<f:validator validatorId="nameValidation" />
</h:inputText><h:message styleClass="msgStyle4" id="msgln" for="empLName"/>
</div><div class="clear"></div>
<div class="form-field" style="margin-left:10px;">
email<h:inputText value="#{countryBean.usersDetailsDTO.email}" id="empEmail" required="true" requiredMessage="Enter Email Address">
<f:validator validatorId="emailValidation" />
</h:inputText><h:message styleClass="msgStyle4" id="msgEmail" for="empEmail"/>
</div>
You can use disabled attribute on any time along with JSF EL to pass the Boolean value to disabled attribute.
For example in your case If you want to disable any h:inputText if first name is pre-populated then:
<h:inputText value="#{countryBean.usersDetailsDTO.email}" id="empEmail"
required="true" requiredMessage="Enter Email Address"
disabled="#{not(empty countryBean.usersDetailsDTO.firstName)}">
The above code will disable the Email input text disabled if firstname is pre-populated.
You can handle this on 2 ways:
1) You set the disable-tag of the inputText to a BackingBean-method like this:
<h:inputText ... disabled="#{countryBean.found}" ... />
2) Adding a valueChangeListener on the first inputText, so if it has a text, the others should be disabled.
In JSF 1.1, is it possible to use value of inputText as f:parm of an outputLink?
For example:
<h:inputText value="enter Input Value" />
<h:outputLink value="someLink.jsp" styleClass="searchButton">
<f:param name="userName" value="whatever the input value is" />
</h:outputLink>
Not with standard JSF. You'd need to bring in some JavaScript code.
E.g.
<h:form id="formId">
<h:inputText id="inputId" />
<h:outputLink value="someLink.jsp?userName=" onclick="href+=encodeURIComponent(document.getElementById('formId:inputId').value)" />
</h:form>
An alternative is to just use a plain vanilla HTML.
<f:verbatim>
<form action="someLink.jsp">
<input type="text" name="userName" />
<input type="submit" />
</form>
</f:verbatim>
You could if necessary add some CSS to make the button to look like a link.