I am starting to get to know JSF and I have been able to add some standard validators that show up in messages that I have defined, but they only validate when I click the button to submit the form where the components that need to be validated are in. I would like those components to be validated already on the moment that I click outside them (for example with onblur), but I don't know which method I have to call in the onblur-property to execute the validator of that element? The code I have at this moment is:
<h:form>
<h:outputText value="#{msgs.name}"/><br/>
<h:inputText id="name" value="#{user.name}" label="#{msgs.name}" required="true" requiredMessage="#{msgs.name_required}"/>
<h:message for="name" styleClass="error_single_message"/>
<br/><br/>
<h:outputText value="#{msgs.password}"/><br/>
<h:inputText id="password" value="#{user.password}" label="#{msgs.password}" required="true" requiredMessage="#{msgs.password_required}"/>
<h:message for="password" styleClass="error_single_message"/>
<br/><br/>
<div class="error_overview_messages">Overview errors
<h:messages showDetail="#{true}" showSummary="#{false}"/>
</div><br/>
<h:commandButton value="Log_on" action="logged_in"/>
</h:form>
JSF validations happens server side, so you will essentially need to have a submit triggered to have server side code activated.
If you are not interested in that, you need to activate some specific Java script.
If you are using JSF2, you can accomplish what you are looking for by adding Richfaces to your build and using Richfaces client side validation:
Richfaces Client Side Validation
It is a great new feature in their v4 release that compiles standard jsf validators and JSR-303 bean validation to javascript that can be executed client side. You can trigger the validations on any standard javascript event (blur, click, keyup).
Related
I want to send back (add some parameter) some value with JSF ajax response as native JSF ajax and jQuery ajax. How to do it? I'm using JSF 2.2, if that's relevant.
You can use <f:param> inside buttons.
<h:commandButton value="Send">
<f:param name="c" value="#{bean.value}"/>
<f:ajax execute="#this" listener="#{bean.listener}"/>
</h:commandButton>
I've the below form which uploads a file via <h:inputFile> and <f:ajax>.
<h:form enctype="multipart/form-data">
<h:inputFile id="file" value="#{bean.file}" />
<h:commandButton value="Upload" action="#{bean.upload}">
<f:ajax execute="file" render="file" />
</h:commandButton>
</h:form>
When I submit it, I get a JavaScript alert with the below error information:
serverError: class javax.servlet.ServletException the request doesn't contain a multipart/form-data or multipart/mixed stream, content type header is application/x-www-form-urlencoded;charset=UTF-8
Is there any solution for this problem? I'm using Mojarra 2.2.11.
I reproduced it. It is a bug in Mojarra, introduced in 2.2.9 as side effect of the fix for issue 3129. Your problem is already reported as issue 3765. Basically: uploading files with ajax is broken since Mojarra 2.2.9 and there are no workarounds (at least not without hacking in the code).
For now, you need to downgrade to Mojarra 2.2.8 until they release the version with the fix.
I'm trying to trigger a javascript function using the a4j:ajax method. We are migrating from version 3 to version 4, and have also been upgrading spring and JSF. Previously, this worked fine:
<a4j:support event="change" oncomplete="callJavascriptMethod()">
With version 4 of RichFaces, I'm trying to do the same, calling a javascript function everytime a dropdown list is beeing changed, but I have changed to use:
<a4j:ajax event="change" oncomplete="callJavascriptMethod()">
I have also tried something like this just to see if the event's are triggered:
<h:commandButton id="test" value="Test me!">
<a4j:ajax event="click" oncomplete="console.log('something');" />
</h:commandButton>
So far without luck. Any ideas?
The commandButton example above is working in our migration. We had a lot of issues with a4j:ajax in 4.3.2 but upgrading to 4.3.4 seemed to fix most of the issues, so if that is an option and hasn't been done I would recommend getting the latest version for RichFaces 4.
I have created a custom jsf 2.0 component for a special userinput widget.
<cc:interface>
<cc:attribute name="value"></cc:attribute>
<cc:attribute name="editmode" default="true" type="java.lang.Boolean"></cc:attribute>
</cc:interface>
<cc:implementation>
....
</cc:implementation>
The component contains some standard input components and makes use of jsf 2.0 ajax behavior.
Everything in my component works fine, and I use it multiple times in my application.
Now I run into a strange problem when I am using the component with a f:ajax region.
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:marty="http://java.sun.com/jsf/composite/marty"
xmlns:h="http://java.sun.com/jsf/html">
<!-- Ajax region -->
<f:ajax>
<h:panelGroup id="timesheet_panel" binding="#{timesheetListComponent}">
.....
<!-- my custom component ->
<marty:userInput value="#{workitem.item['nammanager']}" editmode="true" />
....
<h:commandButton value="#{message.search}"
action="/pages/workitems/workitem"
actionListener="#{timesheetController.reset}">
<f:ajax render="timesheet_panel" onevent="updateTimesheetPanel" />
</h:commandButton>
....
</f:ajax>
</ui:composition>
The stange thing now is that when the command button was clicked and the ajax request was fired my custom component appears 3 times in my form.
Can anybody explain Why this happens?
I found the reason for the strange behavior. It was a JavaScript problem.
My component contains jquery scripts to hide some parts of the component. After the ajax call was completed the jquery scripts was not triggered so the layout of the component was corrupted. So it was a javaScript problem and not a problem with my jsf component as I thought first. Sorry for the wrong question.
I am new to Richfaces4 and JSF2 and having lots of issues. Same code start to work suddenly and then it breaks. Currently I have a ui:include tag that update the page when the a4j:commandLink is clicked. Using debugging feature of eclipse I can see that the methods are being called and correct value is stored in the bean but page never gets updated until I click on it the second time. It seems the page is updated before the values are set in the backing bean. Following is my code. The same thing was working in MyFaces 2.0.2 before I updated to MyFaces 2.1.3.
<a4j:outputPanel id="pagePanel" layout="block">
<ui:include src="#{panelMenu.currentPage}"></ui:include>
</a4j:outputPanel>
<h:panelGrid>
<p><a4j:commandLink value="View Member" render="pagePanel" execute="pagePanel">
<a4j:param value="/pages/group_member.xhtml" assignTo="#{panelMenu.currentPage}"/>
</a4j:commandLink></p>
<p><a4j:commandLink value="View/Edit Groups" render="pagePanel" execute="pagePanel">
<a4j:param value="/pages/group_detail.xhtml" assignTo="#{panelMenu.currentPage}"/>
</a4j:commandLink></p>
</h:panelGrid>