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>
Related
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?
I am writing a composite component that is intended to wrap an input element, and augment it with an 'optional field' designation and h:message element below it.
Here is the component (in input.xhtml file):
<composite:interface/>
<composite:implementation>
<div>
#{component.children[1].setStyleClass(component.children[1].valid ? '' : 'inputError')}
<composite:insertChildren/>
</div>
<h:panelGroup styleClass="optional"
rendered="#{!component.parent.children[1].required}"
layout="block" >
#{msgs['common.optional.field']}
</h:panelGroup>
<h:message id="msgId"
for="#{component.parent.children[1].id}" errorClass="error"/>
</composite:implementation>
Again, the intended usage of the component is to wrap an h:input* element which is expected to be the first and immediate child of it in a using page.
In a using page I would then write:
<h:form id="f1">
<h:panelGrid border="0" columns="2" style="width: 80%">
<f:facet name="header">
<col width="40%" />
<col width="60%" />
</f:facet>
<h:outputLabel styleClass="sectionBody" for="i1"
value="Input 1"></h:outputLabel>
<my:input id="ii1">
<h:inputText id="i1" size="20" maxlength="20" tabindex="0"
required="true" label="Input 1">
</h:inputText>
</my:input>
<h:outputLabel styleClass="sectionBody" for="i2"
value="Input 2"></h:outputLabel>
<my:input id="ii2">
<h:inputText id="i2" size="20" maxlength="20" tabindex="0"
label="Input 2">
</h:inputText>
</my:input>
</h:panelGrid>
<br />
<h:commandButton value="Submit" tabindex="1">
<f:ajax listener="#{terminalImportBean.addTerminal}"
execute="#form" render="#form"/>
</h:commandButton>
</h:form>
This would work just fine using normal posts.
However if I add add f:ajax validation for "Input 1" (id="i1") and try to re-render the composite (ii1) using the following:
...
<h:outputLabel styleClass="sectionBody" for="i1"
value="Input 1"></h:outputLabel>
<my:input id="ii1">
<h:inputText id="i1" size="20" maxlength="20" tabindex="0"
required="true" label="Input 1">
<f:ajax listener="#{myBean.checkInput1}"
event="blur"
render="ii1"/>
</h:inputText>
</my:input>
...
I gen an error in the browser during ajax response processing:
malformedXML: During update: f1:ii1 not found
I tried using f1:ii1, :f1:ii1, but to no avail. When I use msgId or :f1:ii1:msgId it works. Does anybody know why?
I am using Mojarra 2.1.3
Thanks
That's because the composite component does by itself not render anything to the HTML. Only its children are been rendered to HTML. There does not exist any HTML element with ID f1:i11 in the generated HTML output. Open the page in browser, rightclick and View Source. Look in there yourself. There's no such element with that ID. JavaScript/Ajax is encountering exactly the same problem. It can't find the element in order to update it.
To solve this, you'd need to wrap the entire composite body in a HTML <div> or <span> and assign it an ID of #{cc.clientId} which basically prints UIComponent#getClientId().
<cc:implementation>
<div id="#{cc.clientId}">
...
</div>
</cc:implementation>
Then you can reference it as below:
<my:input id="foo" />
...
<f:ajax ... render="foo" />
You can even reference a specific composite component child.
<f:ajax ... render="foo:inputId" />
See also:
Is it possible to update non-JSF components (plain HTML) with JSF ajax?
How to find out client ID of component for ajax update/render? Cannot find component with expression "foo" referenced from "bar"
I have two p:ouputPanels which have the rendered attribute. They should be rendered when the value of the underlying getter/setter changes. However, the underlying values change in the right order. The first panel disappears, However the second panel does not show up. Even NOT in the HTML code!
My two panels:
<p:outputPanel id="PanelParent">
<h:form>
<p:outputPanel id="PanelForm" rendered="#{PageService.isVisibilityForm()}">
<h:commandButton value="Button"
action="#{PageService.persist}"
styleClass="btn btn-primary opal_btn submit_form_new" />
</h:form>
</p:outputPanel>
<p:outputPanel id="PanelMessage" rendered="#{PageService.isVisibilityMessage()}">
//Message
</p:outputPanel>
</p:outputPanel>
I appreciate your answer!!!
-UPDATE-
In the code, I reference to the persist method and in this method I change the getter and setter of the visibility for each section.
-UPDATE1-
OK here is in fact my code:
<p:outputPanel id="parentPanel">
<p:outputPanel id="PanelForm"
rendered="#{PageService.isVisibilityForm()}">
<div>
<div>
<h:form class="homepage_invitee_form" action="" method="POST">
<p:messages id="messages" showDetail="false" autoUpdate="true"
closable="true" />
<h:inputText required="true"
value="#{PageService.instance.name}"
name="name" placeholder="Last Name"
styleClass="lastname_new" id="lastname_new"
type="text placeholder" />
<h:commandButton value="Press"
action="#{PageService.persist()}"/>
<f:ajax render="" />
</h:commandButton>
</h:form>
</div>
</div>
</p:outputPanel>
<p:outputPanel id="PanelThank"
rendered="#{PageService.isVisibilityThank()}">
<div>
Message
</div>
</p:outputPanel>
</p:outputPanel>
I really do not see where it fails? ;(
It's like Xtreme Biker said <f:ajax> render attribute will render elements that are already present in the DOM. In your case, <p:outputPanel id="PanelThank"> render attribute was evaluating to false so it was not in the DOM. Therefore, <f:ajax> could not render it. You need to point to something that is always visible. Change
<f:ajax render="" />
to
<f:ajax render=":PanelThank" />
but more importantly change
<p:outputPanel id="PanelThank" rendered="#{PageService.isVisibilityThank()}">
<div>
Message
</div>
</p:outputPanel>
to
<p:outputPanel id="PanelThank">
<p:outputPanel rendered="#{PageService.isVisibilityThank()}">
<div>
Message
</div>
</p:outputPanel>
</p:outputPanel>
Consider refactoring your code also. For instance, action and method in <h:form> is not needed.
rendered attribute defines if JSF will render your component in the DOM tree. Your problem is you cannot update a component which is not in the tree because you simply don't have it:
<p:outputPanel id="PanelForm" rendered="#{PageService.isVisibilityForm()}">
//my Form
<p:outputPanel>
<!--Fails if not PageService.isVisibilityForm(), because you don't have the component itself in the tree! So can't find it-->
<p:ajax update="PanelForm"/>
Your best is to wrap your content in another container which is always rendered and update it instead of the other one:
<h:panelGroup id="updatablePanel">
<p:outputPanel rendered="#{PageService.isVisibilityForm()}">
//my Form
<p:outputPanel>
</h:panelGroup>
<p:ajax update="updatablePanel"/>
I am writing a composite component that is intended to wrap an input element, and augment it with an 'optional field' designation and h:message element below it.
Here is the component (in input.xhtml file):
<composite:interface/>
<composite:implementation>
<div>
#{component.children[1].setStyleClass(component.children[1].valid ? '' : 'inputError')}
<composite:insertChildren/>
</div>
<h:panelGroup styleClass="optional"
rendered="#{!component.parent.children[1].required}"
layout="block" >
#{msgs['common.optional.field']}
</h:panelGroup>
<h:message id="msgId"
for="#{component.parent.children[1].id}" errorClass="error"/>
</composite:implementation>
Again, the intended usage of the component is to wrap an h:input* element which is expected to be the first and immediate child of it in a using page.
In a using page I would then write:
<h:form id="f1">
<h:panelGrid border="0" columns="2" style="width: 80%">
<f:facet name="header">
<col width="40%" />
<col width="60%" />
</f:facet>
<h:outputLabel styleClass="sectionBody" for="i1"
value="Input 1"></h:outputLabel>
<my:input id="ii1">
<h:inputText id="i1" size="20" maxlength="20" tabindex="0"
required="true" label="Input 1">
</h:inputText>
</my:input>
<h:outputLabel styleClass="sectionBody" for="i2"
value="Input 2"></h:outputLabel>
<my:input id="ii2">
<h:inputText id="i2" size="20" maxlength="20" tabindex="0"
label="Input 2">
</h:inputText>
</my:input>
</h:panelGrid>
<br />
<h:commandButton value="Submit" tabindex="1">
<f:ajax listener="#{terminalImportBean.addTerminal}"
execute="#form" render="#form"/>
</h:commandButton>
</h:form>
This would work just fine using normal posts.
However if I add add f:ajax validation for "Input 1" (id="i1") and try to re-render the composite (ii1) using the following:
...
<h:outputLabel styleClass="sectionBody" for="i1"
value="Input 1"></h:outputLabel>
<my:input id="ii1">
<h:inputText id="i1" size="20" maxlength="20" tabindex="0"
required="true" label="Input 1">
<f:ajax listener="#{myBean.checkInput1}"
event="blur"
render="ii1"/>
</h:inputText>
</my:input>
...
I gen an error in the browser during ajax response processing:
malformedXML: During update: f1:ii1 not found
I tried using f1:ii1, :f1:ii1, but to no avail. When I use msgId or :f1:ii1:msgId it works. Does anybody know why?
I am using Mojarra 2.1.3
Thanks
That's because the composite component does by itself not render anything to the HTML. Only its children are been rendered to HTML. There does not exist any HTML element with ID f1:i11 in the generated HTML output. Open the page in browser, rightclick and View Source. Look in there yourself. There's no such element with that ID. JavaScript/Ajax is encountering exactly the same problem. It can't find the element in order to update it.
To solve this, you'd need to wrap the entire composite body in a HTML <div> or <span> and assign it an ID of #{cc.clientId} which basically prints UIComponent#getClientId().
<cc:implementation>
<div id="#{cc.clientId}">
...
</div>
</cc:implementation>
Then you can reference it as below:
<my:input id="foo" />
...
<f:ajax ... render="foo" />
You can even reference a specific composite component child.
<f:ajax ... render="foo:inputId" />
See also:
Is it possible to update non-JSF components (plain HTML) with JSF ajax?
How to find out client ID of component for ajax update/render? Cannot find component with expression "foo" referenced from "bar"
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