prime faces ajax not working - jsf-2

We have a JSF project with the following versions of JARs:
Prime Faces 5.1
JSF 2.0
Javaee-api 5
But the Project Facets(in eclipse) defines JSF 2.2, we never changed it.
JPA 2 ( javaee-api 5)
Ejb 3.0
Our ajax is not working.
<p:selectOneRadio id="enrolledInPlanFlag" value="#{phInfoBean.enrldPlanFlag}" label="Action" >
<f:selectItem itemLabel="Yes" itemValue="Yes" />
<f:selectItem itemLabel="No" itemValue="No" />
<p:ajax process="enrolledInPlanFlag" update="#form"/>
</p:selectOneRadio>
<p:dialog id="dialog" header="APTC Warning" widgetVar="dlg1" modal="true" height="200" width="500" resizable="false" rendered="#{phInfoBean.enrldPlanFlag eq 'Yes'}">
I am trying to display dialog based on the selectOneRadio. But the AJAX is not working and we have the wierd situation where sometimes it works and sometimes it not.
We have annotated managed bean with #ViewScoped.
Please help.

Make it work
You never show your dialog in your code. You could attach an oncomplete event to your p:ajax
<p:ajax process="enrolledInPlanFlag" update="#form" oncomplete="PF('dlg1') != null ? PF('dlg1').show() : ''" />
The condition PF('dlg1') != null is required as if you choose "No" your dialog is no longer rendered in your page, therefore PF('widgetVarOfDialog') is unreachable.
Additional notes
I would improve this code by:
Changing enrldPlanFlag to a boolean instead of a string (cleaner IMO)
Display the dialog programatically in an listener (called from your p:ajax) if the boolean is true
Why? To leave the logic in your bean instead of your .xhtml page

Related

JSF command button updating even there are validation errors

I'm new to JSF, my question may be silly for you.. It is very much valuable for me..
<h:form id="form1">
<p:messages autoUpdate="true" showDetails="true" />
<p:dataTable id='form1ID'>....</dataTable>
<p:inputText value="#{bean.name}" required="true"
requiredMessage="Please Enter Name!" label="Name ">
</p:inputText>
</h:form>
<h:form id="form2">
<p:messages autoUpdate="true" showDetails="true" />
<p:dataTable id='form2ID'>....</dataTable>
<p:inputText value="#{bean.name}" required="true"
requiredMessage="Please Enter Name!" label="Name ">
</p:inputText>
<p:commandButton value="Submit" update=":form1:form1ID"
actionListener="#{mgmtBean.doCreateType}" />
</h:form>
I have two forms. when I click on form2 command button with empty fields, it will show error messages perfectly since i have added <p:messages autoUpdate="true" showDetail="true"/>.
The bad thing or surprising thing here for me is, it is showing error messages on top of form1 also may be because of <p:messages autoUpdate="true" showDetail="true"/> added in form1 and i'm trying to update form1 on command button click in form2.
I don't want to show error messages on form1 when form2 is throwing validation error messages. How can i fix this ? I googled it out.. but couldn't find the solution.
Evironment i'm using is jsf-api-2.1.5 and primefaces 4.0 version and view technology is facelets(XHTML)
Hope it is clear..
Any idea is highly appreciated.
Try to disable rendering of messages on the form1:
<p:messages autoUpdate="true" showDetails="true" rendered="#{bean.renderedmessage}"/>
And in the bean, add the renderedmessage variable:
public Boolean getRenderedmessage() {
return renderedmessage;
}
/**
* #param renderedmessage the renderedmessage to set
*/
public void setRenderedmessage(Boolean renderedmessage) {
this.renderedmessage = renderedmessage;
}
And, for the doCreateType() method, add:
public void doCreateType(){
..............
setRenderedmessage(false);
.............
}
After the form1 is updated, you can choose some event or method, where you can setRenderedmessage(true);
What you're currently experiencing should indicate to you that you usually don't need two <p:messages/>s in the same JSF view; one is enough.
Regardless of the fact that you have two <h:form/>s on your page, there's still only one FacesContext associated with that view (The FacesContext object is a JSF construct that encapsulates all the information/data/components etc that's associated with a given JSF page request).
By default the <p:messages/> will display every FacesMessage that is queued within it's associated instance of FacesContext, regardless of the source of the message (well, almost: if you set globalOnly="true" on the <p:messages/>, you can change that behaviour).
That being said, you basically have two options:
Get rid of the extra <p:messages/> and rely on (and appropriately position) only one to display all errors/warnings for that view
Specify the for attribute, set to the desired component. Doing so, you'll guarantee that only one input component can trigger the display of its associated message component. For example
<h:form id="form1">
<p:messages for="inputName" autoUpdate="true" showDetails="true" />
<p:dataTable id='form1ID'>....</dataTable>
<p:inputText id="inputName" value="#{bean.name}" required="true"
requiredMessage="Please Enter Name!" label="Name ">
</p:inputText>
</h:form>
Note that I've set an id attribute on the <p:inputText/> component; this is necessary so you can use it in the for attribute for the messages component.
Further reading:
What is FacesContext used for?
I have fixed the issue by using the following code
<p:messages autoUpdate="true" showDetails="true" visibility="info"/>
so it is just displaying info messages and other pop up error messages will not be showun.

Primefaces commandButton inside dialog not firing backing bean's method

I've just started learning JSF and PrimeFaces, and as soon as I solve a problem (with your help), another one arises. I have a datatable showing some data about my application's users; in the last column, a commandButton invokes a dialog allowing the corresponding data to be edited. The dialog actually interacts with the backing bean, since the fields are correctly precompiled with the existing data, but the "Submit changes" commandButton doesn't fire the proper editUser() method!
I've searched everywhere for a solution to my problem, but none of the threads on the PrimeFaces forums nor any question here on Stack Overflow helped me: I tried all combinations of action, actionListener, inner <h:form>, outer <h:form>, even the dreaded nested <h:form>, but the underlying method is still not called.
Thank you all, people!
EDIT: I included some more xhtml. Just to be clear: in the datatable I'm implementing both single and multiple selection mechanisms. The single selection is performed by the editButton in the last column and triggers the editDialog that's giving me pain, while multiple selection is enabled by the checkboxes in the first column and is targeted by a commandButton at the bottom of the table that deletes all selected users; of course they store the selections in different fields in the backing bean (selectedUser and selectedUsers[], respectively).
xhtml file
<h:form id="tableForm">
<p:dataTable id="userList" var="user" value="#{userListBean.userList}"
selection="#{userListBean.selectedUsers}" rowKey="#{user.username}">
<!-- this is a checkbox column I use for multiple selection -->
<p:column selectionMode="multiple" style="width:2%"/>
<!-- other datatable columns -->
<!-- this is the button column that triggers the dialog -->
<p:column style="width:4%">
<p:commandButton id="editButton" update=":tableForm:editUserData"
oncomplete="PF('editDialog').show()" title="Edit" icon="ui-icon-pencil">
<f:setPropertyActionListener target="#{userListBean.selectedUser}"
value="#{user}" />
</p:commandButton>
</p:column>
</p:datatable>
<p:dialog id="editDlg" widgetVar="editDialog" header="Edit User"
showEffect="fade" hideEffect="fade" modal="true" dynamic="true">
<h:panelGrid columns="6" id="editUserData">
<p:outputLabel for="editUsername">Username:</p:outputLabel>
<p:inputText disabled="true" id="editUsername" value="#{userListBean.selectedUser.username}" />
<p:message for="editUsername" />
<!-- and other fields like that -->
</h:panelGrid>
<p:commandButton id="submitChanges" action="#{userListBean.editUser()}"
value="Submit changes" oncomplete="PF('editDialog').hide();" />
</p:dialog>
</h:form>
Backing bean
#ManagedBean(name="userListBean")
#ViewScoped
public class UserListBean {
private UserDTO selectedUser;
public UserListBean() {
}
//some methods...
public String editUser() {
System.out.println("------------------ EDIT TRIGGERED! -------------------");
System.out.println(selectedUser.getUsername());
//this stuff never gets printed, so the method is never called!
}
//getters and setters
}
Actually, the only thing didn't come to my mind turned out to be the one that worked.
I sorted out my issue by using THREE forms (as I mentioned in my question, I had already tried out all possible combinations of one and two forms, even nested ones), like this:
<h:form id="tableForm">
<!-- here lies the p:dataTable -->
</h:form>
<p:dialog>
<h:form id="dialogForm">
<!-- here lies the h:panelGrid with the editable fields -->
</h:form>
<h:form id="buttonForm">
<!-- and HERE goes the commandButton, alone -->
</h:form>
</p:dialog>
It looks like everyone solves this problem in ways that don't work for others :) .

how to reset form inputs after they are submitted in jsf

so i have this code(not in details)
<p:tabView id="tabviewId">
<p:tab>
<h:form id="mainHeadOfAccountsId_form">
// some input fields with validation
// using viewscoped
<p:commandButton value="Add" process="mainHeadOfAccountsId_form" update="mainHeadOfAccountsId_form :#{p:component('allMainHeadOfAccountsId_table')} :#{p:component('successfullySavedUpdatedId_growl')}" action="#{budgetHeadOfAccountsAction.addMainHeadOfAccountsOnAjax}" />
/// also using <p:datatable id= "allMainHeadOfAccountsId_table" >
</h:form
</p:tab>
<p:tab>
<h:form>
</h:form
</p:tab>
</p:tabView>
<p:growl id="successfullySavedUpdatedId_growl" for="successfullySavedUpdatedFor_growl" value="error" showDetail="false" />
my Question is that when i submit form mainHeadOfAccountsId_form successfully i need to update(reset) all fields which are in mainHeadOfAccountsId_form
but remember that i am also using <h:selectOneMenu> so i want to reset(option[0] selected) not empty, how can i do that ? currently its updating allMainHeadOfAccountsId_table and successfullySavedUpdatedId_growl except mainHeadOfAccountsId_form
i have tired tabviewId:mainHeadOfAccountsId_form but getting exception component not found,
as i am thinking this is just because of #viewScoped and i should reset value of those inputs in my action class (.java), m i right ?
see what primefaces offer for reset input or after submitting the form by the action in the bean reset the values by new or null and recreate the list held by
<h:selectOneMenu>

Parameters Process Failed when I select a

Hi I am doing something really simple but it is not working I am using jboss and jsf 2.0.
So I am trying to create a form that shows some fields according to a selection from the user of dropdown menu so I am using selectOneMenu
<h:panelGrid columns="2" id="formTaxon">
<h:outputLabel value="Nombre Científico Taxón" for="taxonInput" />
<p:inputText value="#{taxonDM.taxon.nombreCientificoTaxon}"
id="taxonInput" />
<h:outputLabel value="Nombre Común" for="nombreComunInput" />
<p:inputText value="#{taxonDM.taxon.nombreComunTaxon}"
id="nombreComunInput" />
<h:outputLabel value="Tipo" for="tipoTaxon" />
<p:selectOneMenu id="tipoTaxon" value="#{taxonDM.taxon.tipoTaxon}"
name="tipoTaxon">
<f:selectItem itemLabel="Seleccione uno" itemValue="" />
<f:selectItems value="#{tipoTaxonDM.tiposTaxones}" var="txn"
itemValue="#{txn.idTipoTaxon}" itemLabel="#{txn.nombreTipo}" />
<f:ajax process="#this"
listener="#{taxonController.tipoTaxonesXX}" render="formTaxon" />
</p:selectOneMenu>
<p:inputText id="test" val="" />
</h:panelGrid>
I also tried without the listener first
But nothing works, I dont get any errors on the server I get an error when I check the scripts with firebug
<?xml version='1.0' encoding='UTF-8'?>
<partial-response><error><error-name>class java.lang.IllegalStateException</error-name><error-message><![CDATA[Parameters processing failed.]]></error-message></error></partial-response>
I tested it on a jboss 7.0.2 and 7.1.1 with firefox. I read there was a bug between IE and jboss 7.1.1 related with this but I guess this is not the case.
I also tried with h:selectOneMenu instead of p:selectOneMenu. There was no change.
You are binding the value of your dropdown box as a taxon.tipoTaxon in <p:selectOneMenu id="tipoTaxon" value="#{taxonDM.taxon.tipoTaxon}">, when the item values are idTipoTaxon.
As far as we can get, the former is of type TipoTaxon and the latter is of type Integer, most probably. So when JSF tries to convert between those types it fails.
You need either to provide for a Converter so that JSF would know how to convert submitted strings to your model objects (you can find many examples here, on Stack Overflow), or bind dropdown value as an integer as well like value="#{taxonDM.taxon.idTipoTaxon}".

Why does my s:selectItems throws no such element exception?

I'm getting this error java.util.NoSuchElementException when i tried to check one of my checkbox under h:selectManycheckBox when i submit the form.
The many checkbox is dynamically populated from the bean. Here is my code.
<h:form id="eF">
<h:inputText id="i" value="#{aklat.suggest}">
<a4j:support event="onkeyup" action="#{aklat.complete}" reRender="m"></a4j:support>
</h:inputText>
<s:div>
<h:selectManyCheckbox value="#{aklat.selectedBooks}" layout="pageDirection" id="m">
<s:selectItems value="#{aklat.books}" var="_book" itemLabel="#{_book}" itemValue="#{_book}" label="#{_book.bookName}"/>
</h:selectManyCheckbox>
<a4j:commandButton value="Add Users" action="#{aklat.fire}"></a4j:commandButton>
</s:div>
</h:form>
The weird part is it renders some data output but when i checked the source code. there are no input type checkbox element.
Is something I am missing.
I assume your managed bean is request scope...
because you are making an ajax request, you have to enable "aklat.books" to persist its value longer than request but shorther than session scope.
If you have tomahawk between your app libraries you can use savestate like this (put it after the h:form tag) :
<t:saveState value="#{aklat.books}"/>
if no tomahawk, you can use a4j:keepAlive:
<a4j:keepAlive beanName = "#{aklat.books}"/>

Resources