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?
Related
I use globalOnly="true" in h:messages to show messages as success or errors during bean methods......
<div class="row">
<div class="col">
<h:messages id="mensagens" warnClass="alert alert-danger" infoClass="alert alert-success" errorClass="alert alert-danger" globalOnly="true" />
</div>
</div>
and h:message for="" to validate field by field with bean validation
<h:inputText id="nome" styleClass="form-control" value="#{lojaMB.filial.nome}" />
<h:message for="nome" class="text-danger" />
It's works well......
But when I click on the "+" green button the modal opens
This modal use other managed bean and other form with ajax...
<h:commandButton value="Salvar" styleClass="btn btn-secondary" action="#{supermercadoMB.salvar}">
<f:ajax execute="#form" render=":mensagens :frmNovaFilial:supermercado #form" onevent="hideModal" />
</h:commandButton>
THE PROBLEM
when I click "Salvar" button the function "hideModal" executes, modal closes and bean validation send a error message by the blank field to parent page h:messages (no h:message ...) ....... but this message doesn't show........ Just shows when I remove globalOnly="true" .....but If I remove globalOnly="true" validations of field by field are show too on h:messages and h:message ......
how resolve this?
Create a parent element to your message component and after process the button update it
In the commandButton process only the nome inputText and the button itself
<h:panelGrid id="grid" columns="1">
<h:inputText id="nome" styleClass="form-control" value="#{lojaMB.filial.nome}" />
<h:message for="nome" class="text-danger" />
</h:panelGrid>
<h:commandButton value="Salvar" action="#{supermercadoMB.salvar}">
<f:ajax execute="#this :nome" render=":grid" onevent="hideModal" />
</h:commandButton>
Here is my view
<h:body>
<div id="header"></div>
<div id="upload">
<h:form id="frmMain" enctype="multipart/form-data">
<p:inputTextarea id="text" style="width: 99%" value="#{uploadfile.content}" placeholder="What are you thinking?"></p:inputTextarea>
<p:fileUpload auto="true" oncomplete="input()" id="fileIdPhoto" previewWidth="200" style="width: 100%" messageTemplate="{name}" fileUploadListener="#{uploadfile.upload}" mode="advanced" dragDropSupport="true"
multiple="true" update="messages" allowTypes="/(\.|\/)(gif|jpe?g|png)$/" />
<p:messages id="messages" autoUpdate="true" closable="true" />
<p:menubar autoDisplay="false">
<p:menuitem />
<f:facet name="options">
<p:commandButton value="Publish" update="fileIdPhoto" icon="ui-icon-extlink" actionListener="#{uploadfile.uploadPhoto}">
</p:commandButton>
</f:facet>
</p:menubar>
</h:form>
</div>
<div id="body">
<div id="post_container">
<ul>
<ui:repeat value="#{image.allpost}" var="value">
<h:form id="form">
<li>
<div id="post">
<p:commandButton rendered="false" id="dynaButton" process="#this,form" value="Show" type="button" icon="ui-icon-extlink"/> cant not trigger it so I set render false
<p:menu overlay="true" trigger="dynaButton" my="left top" at="left bottom">
<p:submenu label="Ajax">
<p:menuitem value="Delete" icon="ui-icon-disk"/>
<p:menuitem value="Update" icon="ui-icon-arrowrefresh-1-w"/>
</p:submenu>
</p:menu>
<b>#{value.content}</b> <br/>
#{value.createtime} <br/>
<br />
<p:galleria value="#{image.getImgByID(value.id)}" rendered="#{not empty image.getImgByID(value.id)}" var="a" panelWidth="720" panelHeight="400" showCaption="true">
<h:graphicImage value="data:image/jpeg;base64,#{a.imgUrl}" style="width:100%;height:100% " alt="Image Description for #{a.imgName}" title="#{a.imgName}"/>
</p:galleria>
<p:rating value="#{value.rating}" stars="10" cancel="false"/>cant change those stars by clicking on it
</div>
<div id="post_ceperator"/>
</li>
</h:form>
</ui:repeat>
</ul>
</div>
</div>
</h:body>
What I am trying to do is change the value of p:rating tag and p:menu to trigger but its seem like my page is only submitting the first form. Also how can I submit a post and div that contains my post will automatically update?
In my opinion the problem is that your components inside of the ui:repeat have all the time the same id's for each iteration.
The way i used to define ids in loops like that was to add some sort of unique prefix or suffix to them based on some field of the data over which i am iterating:
<ui:repeat value="#{image.allpost}" var="value">
<h:form id="form_#{value.id}">
<li>
<div id="post_#{value.id}">
Now each of your components, including the form, which is highly likely to be the cause of your problem, will have its unique id for each of the loop repetition.
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}" />
I am new to JSF, and I tried Googling this and going over BalusC's example, but failed. I have a datatable right now, which works, but what I want to acheive is that when you click on a row, I want to store some information in a bean of course, and then open a new page where I can display some more detail about the row that was clicked. Here is my code:
<h:panelGrid columns="2" style="margin-bottom:10px" cellpadding="5">
Degree:
<div class="degreeProgram">
<h:selectOneMenu onchange="submit()" valueChangeListener="#{course.degreeProgramChanged}">
<f:selectItems value="#{course.programs}" />
</h:selectOneMenu>
</div>
Major:
<div class="major">
<h:selectOneMenu onchange ="submit()" valueChangeListener="#{course.majorChanged}">
<f:selectItems value="#{course.majors}" />
</h:selectOneMenu>
</div>
Identifier:
<h:inputText value="#{course.identifier}"></h:inputText>
Course coordinator:
<div class="major">
<h:selectOneMenu onchange ="submit()" valueChangeListener="#{course.coordinatorChanged}">
<f:selectItems value="#{course.coordinators}" />
</h:selectOneMenu>
</div>
</h:panelGrid>
</h:form>
<b>Course Offering:</b>
<br></br>
<h:form>
<h:panelGrid columns="2" style="margin-bottom:10px" cellpadding="5">
Section:
<div class="degreeProgram">
<h:inputText value="#{course.section}"></h:inputText>
</div>
Semester
<div class="major">
<h:inputText value="#{course.semester}"></h:inputText>
</div>
Instructors:
<div class="major">
<h:selectOneMenu onchange ="submit()" valueChangeListener="#{course.coordinatorChanged}">
<f:selectItems value="#{course.instructors}" />
</h:selectOneMenu>
</div>
<h:commandButton value="submit" action="#{course.executeSearch()}"></h:commandButton>
</h:panelGrid>
</h:form>
I have the following Facelet page:
<ui:define name="content">
<h:form id="selectReport">
<div>
<h:selectOneMenu value="#{reportsController.selectedReport}">
<f:selectItems value="#{reportsController.reportsList}"/>
</h:selectOneMenu>
</div>
<div>
<h:commandButton value="Ir al reporte"
action="#{reportsController.goToReport}"/>
</div>
</h:form>
<h:form id="dateRangeSetupForm"
rendered="#{reportsController.showDateRangeSetupForm}">
<div>
<h:outputLabel value="Desde:"/>
<h:inputText id="fromDate"
value="#{reportsController.fromDate}"/>
</div>
<div>
<h:outputLabel value="Hasta:"/>
<h:inputText id="toDate"
value="#{reportsController.toDate}"/>
</div>
</h:form>
<h:form id="billOfLadingSetupForm"
rendered="#{reportsController.showBillOfLadingSetupForm}">
<div>
<h:outputLabel value="# Factura:"/>
<h:inputText id="invoiceNumber"
value="#{reportsController.invoiceNumber}"/>
</div>
</h:form>
<h:form id="submitForm">
<h:commandButton id="processReport" value="Generar Reporte"
action="#{reportsController.processReport}"/>
<h:commandButton id="goBack" value="Regresar"
action="mainMenu"/>
</h:form>
</ui:define>
In which I let the user select a report, and render a form to setup parameters depending on the report. The problem is that when I render for example the billOfLadingSetupForm and fill the inputText, then click on the processReport button the invoiceNumber property of my bean is not updated, it is set to null.
I have noticed that if I type Return after filling the inputText and then click the processReport button the property does get updated. This is strange I haven't face this problem before. Do you have any idea why this happens?
Whenever a form get submitted, then only the data inside that form will be sent. The data of the other forms won't be sent. That's by HTML specification. You need to put all inputs and buttons which belongs to each other inside the same <h:form>. Replace all your splitted dateRangeSetupForm, billOfLadingSetupForm and submitForm forms by <h:panelGroup> and put them all inside one and same <h:form>.
Something like this:
<ui:define name="content">
<h:form>
<div>
<h:selectOneMenu value="#{reportsController.selectedReport}">
<f:selectItems value="#{reportsController.reportsList}"/>
</h:selectOneMenu>
</div>
<div>
<h:commandButton value="Ir al reporte" action="#{reportsController.goToReport}"/>
</div>
</h:form>
<h:form>
<h:panelGroup id="dateRangeSetupForm" rendered="#{reportsController.showDateRangeSetupForm}">
<div>
<h:outputLabel value="Desde:"/>
<h:inputText id="fromDate" value="#{reportsController.fromDate}"/>
</div>
<div>
<h:outputLabel value="Hasta:"/>
<h:inputText id="toDate" value="#{reportsController.toDate}"/>
</div>
</h:panelGroup>
<h:panelGroup id="billOfLadingSetupForm" rendered="#{reportsController.showBillOfLadingSetupForm}">
<div>
<h:outputLabel value="# Factura:"/>
<h:inputText id="invoiceNumber" value="#{reportsController.invoiceNumber}"/>
</div>
</h:panelGroup>
<h:commandButton id="processReport" value="Generar Reporte" action="#{reportsController.processReport}"/>
<h:commandButton id="goBack" value="Regresar" action="mainMenu"/>
</h:form>
</ui:define>
Make sure that the bean is put in the view scope. Otherwise the conditions for the rendered attribute won't be preserved. See also commandButton/commandLink/ajax action/listener method not invoked or input value not updated