ui:include in richfaces 4 only gets updated on second click - ajax

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>

Related

ajax issue in jsf form: malformedXML: During update

Please I need your support to resolve this ajax issue.
I'm using Jsf 2.1, CDI Bean, Hibernate.
I have a problem when putting <f:ajax render="#form" /> in my form.
I have a select box, I want to Hide/Show form depending on selectOneMenu value change.
after selecting the value, this issue is displayed as mentioned in the image attached.In addition. how could I resolve it please.
attached images

Ajax listener not working with inputFile

First of all, I'm using JSF 2.2.7 and GlassFish 4 in NetBeans 8.0.
Second, sorry if I left any useful info out. This is my first question in here, so I may forget something. Also, english isn't my first language. Sorry for typos/grammar.
So, here's my problem: I'm uploading files with h:inputFile and I need an ajax listener for it.
After noticing that it wasn't working as I expected, I decided to do some testing with a listener that prints "Test", but it's never fired with h:inputFile. I've tried with h:commandButton and h:commandLink and they both work fine.
For further testing, I created a new project using the same test code and everything works, including the listener in h:inputFile.
What I want to know is why it doesn't work in my main project and why it works in the test project. What am I missing here? And how can I make it work in my main project?
Here are some (but not all, since I lost track) things that I've tried/checked so far, after looking for answers:
There are no nested forms. The said xhtml is in a ui:composition, but even taking that into account, there are no nested forms.
Its form has enctype="multipart/form-data"
I've tried changing the method to uploadTest(AjaxBehaviorEvent event) and the listener to listener="#{submitFormBean.uploadTest}" [without the ()]
I've played with the various event="..." and execute="..." (didn't think it would solve my problem, but, well, I had to try)
The code follows below:
xhtml
<h:form>
<h:commandButton id="btnTest">
<f:ajax listener="#{submitFormBean.uploadTest()}"/>` --> works in both projects`
</h:commandButton>
</h:form>
<h:form>
<h:commandLink id="lnkTest" value="Test">
<f:ajax listener="#{submitFormBean.uploadTest()}"/>` --> works in both projects`
</h:commandLink>
</h:form>
<h:form enctype="multipart/form-data">
<h:inputFile id="fileTest">
<f:ajax listener="#{submitFormBean.uploadTest()}"/>` --> works only in test project`
</h:inputFile>
</h:form>
bean
#ViewScoped
#ManagedBean(name = "submitFormBean")
public class SubmitFormBean{
public SubmitFormBean() {
}
public void uploadTest(){
System.out.println("Test");
}
}
Thanks in advance!
I was about to do what I needed in jQuery, but first I decided to try the following and it solved my problem:
right click project/properties/libraries
in the compile tab, I removed and readded the JSF 2.2.7 .jar
It was already there, but for some reason wasn't working. I still don't know what went wrong, but it's working now.
With multipart/form-data in JSF form, you have to do additional configuration to make it works.
You can refer to other questions:
commandButton/commandLink/ajax action/listener method not invoked or input value not updated
JSF 2.0 File upload
And
How to use PrimeFaces p:fileUpload? Listener method is never invoked or UploadedFile is null

<a4j:ajax oncomplete> is not triggered while <a4j:support oncomplete> did

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.

Can't populate the right side of RichFaces 4 pickList backed by Spring Webflow managed Beans

I am in the middle of a migration from Richfaces 3.3.3 to Richfaces 4.3.0, which called for a JSF upgrade from 1.2 to 2.1. We are also using Spring Webflow 2.3.2 (upgraded from 2.1.1) for conversation definition. All beans are managed by Spring (no JSF managed beans). Several Richfaces components had to be adjusted for the application to work properly again. The problem I have now concerns the rich:pickList component, which looks like this (I took the showcase example and edited it to depict the problem):
<rich:pickList id="ownPicklist" value="#{listSelectBean.selectedCapitals}"
sourceCaption="Available cities" targetCaption="Selected cities"
listWidth="165px" listHeight="100px">
<a4j:ajax event="change" execute="#this" render="#{mainBean.dynamicRerenderList}" />
<f:selectItems value="#{listSelectBean.capitals}" var="capital"
itemValue="#{capital}" itemLabel="#{capital.name}" />
<f:converter converterId="CapitalsConverter" />
</rich:pickList>
Now unlike the showcase example, our ListSelectBean is a Spring bean and is defined like this:
<bean id="listSelectBean" class="com.xyz.example.bean.ListSelectBean" scope="request" />
The custom converter is registered in the faces-config.xml:
<converter>
<converter-id>CapitalsConverter</converter-id>
<converter-class>com.xyz.converter.CapitalsConverter</converter-class>
</converter>
As you can see we have an ajax event handler attached to the pickList, which dynamically calculates a list of components to be rerendered depending on the selected value(s) from the list. This list also contains the pickList itself, which normally has to be rerendered with much less elements to select from. The ajax response I get contains the full source list, but the target list is empty.
Now to the problem:
When I select an element from the left side it jumps to the right side and immediately back again.
I debugged the issue and learned that all the getters and setters of the listSelectBean are invoked correctly as different JSF phases are run through. The same example with JSF managed, request scoped beans works fine (which is in the Richfaces showcase), also with the ajax rerender on the component itself. I suspect a problem with the bean handling in Spring (Webflow). But I can't pinpoint it. Any help will be highly appreciated.
After long hours of debugging I finally found the solution to the problem. As RichFaces uses a HashSet during the rendering process it is important to have the hashCode() and equals() Methods overridden for complex objects (which is a good idea in general) used in the PickList. Otherwise selected objects won't be marked as selected.

Intercept JSF-validations

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).

Resources