After at all, I´m sorry for my english.
I have a problem showing a modalPanel.
I would like show a modalPanel if the validation of the form was correct and doesn´t show it if the validation fail.
<h:form>
<rich:calendar id="date" datePattern="dd-MM-yyyy"
value="#{Bean.startDate}" required="true"/>
<a4j:commandButton value="Accept" action="#{Bean.Action}"
onclick="if(#{empty facesContext.maximumSeverity}) #{rich:component('popUp')}.show();" />
</form>
The maximumSeverity doesn´t work here because when the page load at first time, maximumSeverity is empty.
Is possible call the validation of the lifecycle of JSF to know if the form is correct or not?
Thanks!
The onclick runs before the action is invoked. You need oncomplete instead.
If you're using JSF 2.0, it's by the way better to use FacesContext#isValidationFailed() instead as normal INFO messages also count in the severity.
<a4j:commandButton value="Accept" action="#{Bean.Action}"
oncomplete="if(#{not facesContext.validationFailed}) #{rich:component('popUp')}.show();" />
Related
In BootStrap calling a backend bean via AJAX does not seem to work for the DateTimePicker component.
If I am wrong with my code, could anybody please help?
To my surprise also the DateTimePicker reference page of BootStrap does not work with AJAX. On the reference page (https://showcase.bootsfaces.net/forms/DateTimePicker.jsf)
the reference code
<b:form>
<b:dateTimePicker value="#{test.dataToPick}" ondtchange="ajax:test.updateTestField()" process="#this" update="#next" label="Select date:" iconAwesome="bolt" />
<b:inputText value="#{test.testField}" label="Result: " readonly="true" />
</b:form>
is also not working.
Here is my code that is not working:
<b:form>
<b:dateTimePicker value="#{listBean.editMonth}"
readonly="false"
allow-input-toggle="false"
icon-position="right"
mode="popup"
format="MMM YYYY"
side-by-side="false"
show-date="true"
show-time="false"
show-icon="true"
required="true"
viewMode="months"
locale="en"
iconSize="xs"
styleClass="datePicker"
id="monthpicker"
process="#this"
ondtchange="ajax:listTradesBean.updateMonth()"
onblur="ajax:listTradesBean.updateMonth()"/>
</b:form>
Normally I would expect that the backend code "updateMonth()" would be called. The java code snippet for the backend bean simply is:
public void updateMonth() {
System.out.println("WORKING!");
}
Other methods within this backend bean are called without problems using AJAX.
You are right, the example in the Bootsfaces showcase page does not work.
Strangely enough, I managed to build a working example that solves your problem by using the traditional JSF AJAX (legacy) syntax:
<b:dateTimePicker id="datePicker"
format="DD/MM/YYYY HH:mm"
value="#{testBB.selectedDate}"
required="true"
renderLabel="false"
ajax="true"
process="#this"
update="#this"
ondtchange="#{testBB.doSomething()}">
</b:dateTimePicker>
As far as I know, this will work the same way as "ajax:testBB.doSomething()".
Render works fine during initial load of the page, but once the form has been submitted and some component failed a validation re-render does not trigger, the panel does not show and hide anymore and page must be refreshed again. I'm still new with jsf.
Sample Code
<p:selectOneRadio id="accommodationOptions" value="#{travelRequestMBean.accommodationOptions}">
<f:selectItem itemLabel="#{field['accord3Radio2']}" itemValue="2" />
<f:selectItem itemLabel="#{field['accord3Radio1']}" itemValue="1" />
<f:ajax render="panelMoreAccommodation2"/>
</p:selectOneRadio>
<p:panel id="panelMoreAccommodation2" widgetVar="panelMoreAccommodation2"
visible="#{travelRequestMBean.accommodationOptions == 1}" closable="true" toggleable="true">
<p:graphicImage url="/images/hotel-noun_project_4398.svg" alt="#{field['accord3Label2']}" height="24px" />
<h:outputText value="#{field['accord3Label2']}" />
</p:panel>
Also I have tried the other variant of this using a boolean attribute in the backing bean with an ajax event on the selectoneradio, result was still the same and panel does not do anything.
I can't see where you validate your inputs. But take a look at http://www.primefaces.org/showcase/ui/csv/basic.xhtml with the combination of
update=":panelMoreAccommodation2"
And instead of visible use render.
Finally having some tweaks, the problem was this attribute on the target panel
closable="true"
After removing this attribute the ajax update worked again even after a submit with a failed validation.
So I have 2 forms and a command button with f:ajax attached on it. I want to execute the second form on click on button but it seems that it ignores when I'm passing the form's id on execute attribute. But when I replace it with 'execute=":form1"' it runs correctly(the information from the form is sent to server). Can someone tell me why won't work with the id of second form, or how can I achieve this: with one button to execute any form i want from the page.( as it is now no information is sent to server, only the listener is called).
Code bellow:
<h:form id="form1">
<h:panelGrid id="inputSection" >
<h:inputText id="input1" value="#{counterMB.number1}" />
<h:inputText id="input2" value="#{counterMB.number2}" />
</h:panelGrid>
<h:outputLabel id="sumResponse2" value="#{counterMB.sum}" />
</h:form>
<h:form id="form2">
<h:panelGrid id="inputSection" >
<h:inputText id="input1" value="#{counterMB.number1}" />
<h:inputText id="input2" value="#{counterMB.number2}" />
</h:panelGrid>
<h:outputLabel id="sumResponse2" value="#{counterMB.sum}" />
</h:form>
<h:commandButton value="Sum numbers">
<f:ajax event="click" execute=":form2" listener="#{counterMB.sum}" render=":form2 :form1"/>
</h:commandButton>
Update:
so to be more explicit: from what I have read I can use ajax to update/refresh etc some parts of a page instead of refreshing the whole page. What i have tried to do is group some components in different forms and execute a form at a time to see how it behaves. It works perfectly if I use the id of first group(form) but doesn't work at all if I use the id of the second form(it calls the action but doesn't submit any data from any form). I don't understand why. (PS for those who claim i lack some knowledge : this is the reason of asking questions isn't it? I'm trying to learn some new stuff)
It seems that you are lacking basic knowledge of how jsf works. A command button must be inside a form. And it's not possible to submit 2 forms with one single button.
The attribute execute of f:ajax tells which components to process, for example if you have 2 input texts, you can process only one and ignore the other using this attribute. but it's not possible to do what you are trying to do.
It doesn't really make sense to submit 2 forms and execute a single action method once.. there's no point in having 2 forms. why don't you put everything inside a single form?
In your current solution, you use a h:commandButton outside of any h:form - this is a little bit against HTML and JSF, so don't count on it. What I would suggest is
if you use Richfaces, put a a4f:jsFunction in every form and trigger the resulting Javascript from anywhere
if you use Primefaces, put a p:remoteCommand in every form and trigger the resulting javascript from anywhere
if you neither use any of them, put a <h:commandButton /> in every form, set the style hidden and use javascript to submit the form.
Hope it helps...
I am stuck with a problem that doesnt make any sense to me. I have a listbox which fires selectionChange-Events with simple Ajax. The idea is that the edit-button isnt enabled until a item in the list is selected. So I created the following code.
<h:form>
<h:selectManyListbox value="#{bean.selectedIds}">
<f:selectItems value="#{bean.listOfItems}" />
<f:ajax render="edit"
listener="#{bean.selectionChanged}" />
</h:selectManyListbox>
<br />
<h:commandButton id="add" value="#{msgs.add}"
action="#{bean.addNew}" />
<h:commandButton id="edit" value="#{msgs.edit}"
disabled="#{bean.editButtonDisabled}"
action="#{bean.edit}" />
</h:form>
The button is enabled and disabled as I wish but as it turns out, the edit-button isnt triggering any action (I added some sysout to the add- and edit-method in the bean and the edit-method is never called)...instead the html changes. The above code is nested in a simple div. When I click edit, the whole form is outside of that div.
When I add this ajax-behavior to the add-button, the same happens there and vice versa, when I remove the disabled-attribute from the edit-button everything works???
I already had a look at BalusC answer here but I couldnt find any mistake related to that list. No nested forms and so on...its just a simple page with a template.
I am using Mojarra 2.1.2 on JBoss 7.1.Final.
Any help is appreciated. Thanks
This issue is covered by point 5 of the answer which you've linked.
The rendered attribute of the component and all of the parent components should not evaluate to false during the apply request values phase of the form submit request. JSF will namely recheck it then as part of safeguard against tampered/hacked requests. Putting the bean in the view scope and/or making sure that you're preinitializing the condition in (post)constructor of the bean should fix it. The same applies to the disabled attribute of the component, which should not evaluate to true during processing the form submit.
I suggest to change #RequestScoped on BikeManagementPanelBean to #ViewScoped.
try something like this
<h:commandButton id="edit" value="#{msgs.edit}"
disabled="#{bikeManagementPanelBean.editButtonDisabled eq false}"
action="#{bean.edit}" />
try to wrap it again with the <h:panelGroup> and render the instead of the button...
I'm using jQuery's .load function to load one JSF page into another.
This works really well until the loaded JSF page uses some AJAX functionality. When this happens, the parent JSF page's AJAX stops working. In fact, after the two pages are combined whichever page has its AJAX called next is the one that continues to work. The other page stops working. If I use the parent page first, the child breaks. If I use the child first, the parent breaks.
Am I doing something wrong? I'm guessing JSF isn't designed for this sort of behaviour and that's fine but then how do I go about doing what I want?
Basically, we have a report page. When the user clicks the link to a report we would like the report to load dynamically into the existing page. That way, the user doesn't experience a page refresh. It's a pretty slick behaviour BUT obviously isn't ideal due to the pages breaking.
I suppose I could do this with a page that contains every report in an outputpanel and then determine which one is rendered based on a value in the backing bean but I can see lots of occasions where I'd like to be able to "inject" one page into another (for dynamic dialogs for instance) and it would suck to have to keep everything in one giant template.
Has anyone else come across this sort of problem? How did you solve it?
Do not use jQuery.load(). It does not take JSF view state into account at all, so all forms will fail to work. Rather make use of <f:ajax> and rendered attribute instead. Here's a basic example:
<h:form id="list">
<h:dataTable value="#{bean.reports}" var="report">
<h:column>#{report.name}</h:column>
<h:column>
<h:commandLink value="Edit" action="#{bean.edit(report)}">
<f:ajax render=":edit" />
</h:commandLink>
</h:column>
</h:dataTable>
</h:form>
<h:form id="edit">
<h:panelGrid columns="3" rendered="#{not empty bean.report}">
<h:outputLabel for="name" value="Name" />
<h:inputText id="name" value="#{bean.report.name}" required="true" />
<h:message for="name" />
...
<h:panelGroup />
<h:commandButton value="save" action="#{bean.save}" />
<h:messages globalOnly="true" layout="table" />
</h:panelGrid>
</h:form>
You can if necessary split off the content into an <ui:include>.