I’m trying to use ajax in jsf.
So, I have inputtextarea and datatable:
<h:form>
<h:inputTextarea id="mailstextarea" style="width:100%" value="#{newMembersBean.newMembersStr}">
<f:ajax event="keyup" render="newmembertable" execute="mailstextarea" />
</h:inputTextarea>
<h:dataTable id="newmembertable" styleClass="tableWidth" value="#{newMembersBean.newMembers}" var="member">
<h:column>
<f:facet name="header">#{msgs.name}</f:facet>
#{member.name}
</h:column>
<h:column>
<f:facet name="header">#{msgs.surename}</f:facet>
#{member.sureName}
</h:column>
<h:column>
<f:facet name="header">#{msgs.email}</f:facet>
#{member.email}
</h:column>
<h:column>
<f:facet name="header">#{msgs.phone}</f:facet>
#{member.phone}
</h:column>
</h:dataTable>
<h:commandButton type="submit" value="#{msgs.add}"/>
</h:form>
I want to change newMembersBean.newMembers List (and datatable newmembertable) on every value change in textarea…
In my bean I’m trying to do somethink like this (now only for testing, I want to show all users, if user have typed more then 3 characters):
#Named
#ConversationScoped
public class NewMembersBean implements Serializable {
private List<UsersEntity> newMembers = new ArrayList<UsersEntity>();
private String newMembersStr = "";
......
public List<UsersEntity> getNewMembers() {
UsersDao ud = new UsersDao();
if(newMembersStr.length() > 3)
{
newMembers = ud.getAllUsers();
}
return newMembers;
}
.....
}
But when I’m typing text in textare nothing happens.
Please help.
Thanks.
Related
I have an ajax request which outputs me a dataTable and form each row i also want to execute a button.Sadly no event gets invoked and i think it is because the second button is on a different level than the first search button.
JSF looks something like that:
<h:from>
<h:inputText id="search"
value="#{profileController.searchName}"/>
<h:commandButton value="Search by name"
action="#{profileController.searchProfileWithName(profileController.searchName)}">
<f:ajax execute="search"
render="output">
</f:ajax>
</h:commandButton>
<h:dataTable id="output"
value="#{profileController.searchResultList}"
var="p">
<h:column>
<f:facet name="header">Name</f:facet>
<h:outputText value="#{p.name}"/>
</h:column>
<h:column>
<f:facet name="header">Action</f:facet>
<h:commandButton value="Invite"
action="#{trainingController.inviteProfile(p)}">
<f:ajax/>
</h:commandButton>
</h:column>
</h:dataTable
</h:form>
JSF Managed Bean (requestScoped):
public String searchProfileWithName(String name) {
searchResultList = profileBean.findProfilesWithName(name);
return null;
}
ProfileBean (stateless):
public List<Profile> findProfilesWithName(String name) {
Query query = em.createNamedQuery("findProfilesWithName");
query.setParameter("name", "%" + name.replace(" ", "%") + "%");
return query.getResultList();
}
Anyone ideas in this?
The answer to this problem is the datasource. this is the link to the problem:
h:commandButton not working inside h:dataTable
I have a datatable, and have links that allow the user to insert a row directly below the current row. This should then update the numbering.
It works perfectly once, creating a new row, populating the number and adding one to the numbering for all rows below.
If I click anything else though, it seems as though the ajax request completes but nothing happens.
You will see that I am using the #{table} variable to get the row index of the UIData element. I have tried using process="#form" and process="#this" in the commandLink, but to no avail sadly. Likewise, my method was returning void so I set it to return a null String, but the same result occurred.
XHTML
<h:form id="feForm">
<p:dataTable value="#{fichaExpandidaBean.feFlujoNormalList}" binding="#{table}" var="fn">
<p:column headerText="Paso:">
<h:outputText value="#{fn.orden}-"/>
</p:column>
<p:column headerText="Descripcion:">
<h:inputText value="#{fn.descripcion}" style="width:98%;"/>
</p:column>
<p:column headerText="Acciones">
<p:commandLink style="margin: 5px;" action="#{fichaExpandidaBean.agregarFilaFlujoNormal(table.rowIndex)}" update="#form">
<h:graphicImage title="Agregar fila abajo." value="/resources/imagenes/agregarFila.png" alt="AgregarFila"/>
</p:commandLink>
</p:column>
</p:dataTable>
</h:form>
Bean:
#Named(value = "fichaExpandidaBean")
#ConversationScoped
public class FichaExpandidaBean implements Serializable {
#Inject
private Conversation conversation;
...etc...
public String agregarFilaFlujoNormal(int row){
FeFlujonormal fn = new FeFlujonormal();
fn.setOrden(row + 2);
feFlujoNormalList.add(row + 1, fn);
for(int i = row + 2; i < feFlujoNormalList.size(); i++){
FeFlujonormal feTemp = feFlujoNormalList.get(i);
feTemp.setOrden(feTemp.getOrden()+1);
}
return null;
}
EDIT: I don't think it's a Primefaces issue, I get the same result with the following code:
<h:dataTable value="#{fichaExpandidaBean.feFlujoNormalList}" binding="#{table}" var="fn">
<h:column>
<f:facet name="header">Paso</f:facet>
<h:outputText value="#{fn.orden}-"/>
</h:column>
<h:column>
<f:facet name="header">Descripcion</f:facet>
<h:inputText value="#{fn.descripcion}" style="width:98%;"/>
</h:column>
<h:column>
<f:facet name="header">Acciones</f:facet>
<h:commandLink style="margin: 5px;" action="#{fichaExpandidaBean.agregarFilaFlujoNormal(table.rowIndex)}">
<f:ajax render="#form"/>
<h:graphicImage title="Agregar fila abajo." value="/resources/imagenes/agregarFila.png" alt="AgregarFila"/>
</h:commandLink>
</h:column>
</h:dataTable>
On complex data input forms it may happen that one needs to edit a form in a form. As this is not possible in JSF2, I wonder what better solution could be found for this problem. Here's an example of what I need:
given: two beans: OuterBean and HobbyBean; a list of HobbyBeans is used in OuterBean
OuterBean is a ManagedBean (in SessionScope)
HobbyBean contains two fields hobby and like
I want to add HobbyBeans on the form of adding a user's name in OuterBean without submitting OuterBean but submitting new values to fill the list. Here's the code example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html">
<h:head>
</h:head>
<h:body>
<h:form>
<h:panelGrid columns="2">
<h:outputText value="Name" />
<h:inputText value="#{outerBean.name}" required="true" />
<h:outputText value="Hobbies" />
<h:dataTable id="ht" value="#{outerBean.hobbies}" var="h">
<h:column>
<h:outputText value="#{h.hobby}" />
<f:facet name="footer">
<h:inputText value="#{outerBean.hobby}" required="true" />
</f:facet>
</h:column>
<h:column>
<h:outputText value="#{h.like}" />
<f:facet name="footer">
<h:inputText value="#{outerBean.like}" required="true" />
<h:commandButton action="#{outerBean.addHobby}" value="+" immediate="true">
<f:ajax render="ht" />
</h:commandButton>
</f:facet>
</h:column>
</h:dataTable>
</h:panelGrid>
</h:form>
</h:body>
</html>
Yes, there is no command button for the outer form, but that's not the question here. The commandButton is for the inner form and therefore set attribute immediate = true. Doing this, all fields are NOT checked to be not empty (required-Tag is ignored). But also is the content of this fields ignored and not set into the ajax request. How do I avoid this and send the field values of h.hobby and h.like within the ajax request to the OuterBean?
Here the beans:
#ManagedBean
#SessionScoped
public class OuterBean
{
private List<HobbyBean> hobbies;
private String name;
private String hobby;
private Integer like;
public OuterBean()
{
hobbies = new ArrayList<HobbyBean>();
}
public String addHobby()
{
hobbies.add(new HobbyBean(hobby, like));
System.out.println("hobbies: " + hobbies.toString());
return "";
}
public String submit()
{
System.out.println("name is " + name);
return "";
}
// + getter & setter
}
/* ------------------------------------------------------------------------ */
public class HobbyBean
{
private String hobby;
private Integer like;
public HobbyBean(String hobby, Integer like)
{
this.hobby = hobby;
this.like = like;
}
public String toString()
{
return hobby == null ? "" : hobby.concat(",").concat(like == null ? "" : like.toString());
}
// + getter & setter
}
Now what happens when I add a hobby to the bean is that there is no hobby added because the bean fields hobby and like are not set (the list is empty, log is: "hobbies: []"). How can I make it work?
Well your hobbies is empty because you don't tell the f:ajax what to submit. IF you want to do a partial submit (i guess that's what you want) You can try the following:
<h:form>
<h:panelGrid columns="2">
<h:outputText value="Name" />
<h:inputText value="#{outerBean.name}" required="true" />
<h:outputText value="Hobbies" />
<h:dataTable id="ht" value="#{outerBean.hobbies}" var="h">
<h:column>
<h:outputText value="#{h.hobby}" />
<f:facet name="footer">
<h:inputText id="hobby" value="#{outerBean.hobby}" required="true" />
</f:facet>
</h:column>
<h:column>
<h:outputText value="#{h.like}" />
<f:facet name="footer">
<h:inputText id="like" value="#{outerBean.like}" required="true" />
<h:commandButton action="#{outerBean.addHobby()}" value="+" >
<f:ajax execute="hobby like" render="ht" />
</h:commandButton>
</f:facet>
</h:column>
</h:dataTable>
</h:panelGrid>
</h:form>
As you can see in the code you tell f:ajax wich part of the form needs to be submitted when you push the button. If you check your bean now you will see that only the hobby and like are added to the bean. The name part will not be submitted. You say all fields are not checked. This is because you use immediate=true this skips validation. I would suggest not to use it. Look here for more information about immediate= true http://balusc.blogspot.nl/2006/09/debug-jsf-lifecycle.html#WhenShouldIUseTheImmediateAttribute Hopes this help you.
I have a primefaces datatable where number of records are displaying.
I want navigate to another page on the rowSelect event (to edit the selected entity for example).
The closest sample/demo I could find was use the p:ajax tag to bind the rowSelect event to a listener method
http://www.primefaces.org/showcase-labs/ui/datatableRowSelectionInstant.jsf
I also got one article for the same http://forum.primefaces.org/viewtopic.php?f=3&t=14664
, I tried to implement in same as they did.But it also didn't worked.
I am trying in this way and guide me If I missed anything.
<p:dataTable var="product" value="#{addPatientBB.patientAddList}" paginator="true" rows="10"
selection="#{addPatientBB.pat}" selectionMode="single">
<p:ajax event="rowSelect" listener="#{addPatientBB.onRowSelect}" />
<p:column>
<f:facet name="header">
<h:outputText value="FirstName" />
</f:facet>
<h:outputText value="#{product.firstName}" />
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Email" />
</f:facet>
<h:outputText value="#{product.email}" />
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Gender" />
</f:facet>
<h:outputText value="#{product.gender}" />
</p:column>
</p:dataTable>
And Backing bean is :
#ManagedBean
#ViewScoped
public class AddPatientBB implements Serializable
{
private Patient pat;
public Patient getPat()
{
System.out.println("tried to get pat");
return pat;
}
public void setPat(Patient pat)
{
this.pat = pat;
System.out.println("tried to set pat");
}
public void onRowSelect()
{
System.out.println("inside onRow select Method");
ConfigurableNavigationHandler configurableNavigationHandler = (ConfigurableNavigationHandler) FacesContext.getCurrentInstance().getApplication().getNavigationHandler();
System.out.println("navigation objt created");
configurableNavigationHandler.performNavigation("Page?faces-redirect=true");
// Page is my navigation page where I wish to navigate named as
// "Page.xhtml"
System.out.println("Navigation executed");
}
}
So how can I navigate to another page on rowselect event? and how can display its values after navigationg the form.
I am able to go inside onRowSelect() method , actually problem is he is not able to get or understood that path :
configurableNavigationHandler.performNavigation("Page?faces-redirect=true");
so he is not able to print any logs after this line.
why is it so? is it because of I am using Liferay?
Pla guide me.
Well i think the onRowSelect is never executed because you defined it wrong.
Try this:
public void onRowSelect(SelectEvent event)
{
FacesContext.getCurrentInstance().getExternalContext().redirect("page.xhtml?id=" +pat.getId());
}
If u are using FacesServlet then use.jsf instead of .xhtml
public void onRowSelect(SelectEvent event)
{
FacesContext.getCurrentInstance().getExternalContext().redirect("page.jsf?id="+pat.getId());
}
I have PrimeFaces dataTable that is been filled by a Ajax call.
When I click on a column title, to order its values, the values disappear.
<p:commandButton value="Pesquisar" actionListener="#{requestController.listRequests}" update="dataTable" />
Here is my view:
<p:dataTable id="dataTable" var="order" value="#{requestController.backing.requestsList}"
paginator="true" rows="10"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}">
<p:column sortBy="#{order.companyRequest}">
<f:facet name="header">
<h:outputText value="Pedido" />
</f:facet>
<h:outputText value="#{order.companyRequest}" />
</p:column>
<p:column sortBy="#{order.company.companyName}">
<f:facet name="header">
<h:outputText value="Cliente" />
</f:facet>
<h:outputText value="#{order.company.companyName}" />
</p:column>
<p:column sortBy="#{order.emissionDate}">
<f:facet name="header">
<h:outputText value="Data" />
</f:facet>
<h:outputText value="#{order.emissionDate}">
<f:convertDateTime pattern="dd/MM/yyyy"/>
</h:outputText>
</p:column>
<p:column sortBy="#{order.requestSituation.description}">
<f:facet name="header">
<h:outputText value="Status" />
</f:facet>
<h:outputText value="#{order.requestSituation.description}" />
</p:column>
<p:column>
<f:facet name="header">
</f:facet>
<h:form>
<h:commandLink value="Detalhes"/>
</h:form>
</p:column>
</p:dataTable>
EDIT
RequestController
#ManagedBean
#RequestScoped
public class RequestController implements Serializable
{
private RequestBacking backing;
public RequestController()
{
backing = new RequestBacking();
}
public void changeEventListener(ValueChangeEvent e)
{
backing.requestSearchType = e.getNewValue().toString();
}
public void change()
{
switch (backing.requestSearchType)
{
case "data":
backing.mask = "99/99/9999";
backing.maskSize = "10";
break;
case "cnpj":
backing.mask = " 99.999.999/9999-99";
backing.maskSize = "20";
break;
default:
backing.mask = "";
backing.maskSize = "50";
}
}
public void listRequests() throws ParseException
{
CompanyVO companyVO = new CompanyVO();
switch (backing.requestSearchType)
{
case "cnpj":
companyVO.setCnpj(backing.requestSearchValue);
break;
case "cliente":
companyVO.setCompanyName(backing.requestSearchValue);
break;
case "pedido":
backing.requestVO.setCompanyRequest(Integer.parseInt(backing.requestSearchType));
break;
}
SupplierVO supplierVO = new Support().getUserSession().getSupplier();
backing.requestVO.setEmissionDate(new Support().convertDate(backing.requestSearchValue));
backing.requestVO.setSupplier(supplierVO);
backing.requestVO.setCompany(companyVO);
backing.requestsList = new ArrayList<>(backing.getBo().getRequest(backing.requestVO));
if (backing.requestsList.isEmpty())
{
FacesMessage facesMessage = new FacesMessage(FacesMessage.SEVERITY_WARN, "Nenhum registro encontrado!", null);
FacesContext.getCurrentInstance().addMessage(null, facesMessage);
backing.requestsList = null;
}
}
..backing getter and setter
}
My requestsList is on my RequestBacking where I have all my getters and setters, please correct me if there is a better way of doing this, I'm using it because it leaves my controller cleaner.
public List<RequestVO> requestsList;
Apparently the value="#{requestController.backing.requestsList}" didn't return the same value as it did on the initial request. That can happen if it's a request scoped bean and/or if the requestsList is populated on every request based on a request based variable.
That's just a design mistake. Put the managed bean in the view scope and make sure that you aren't doing any business logic in a getter method. The nested class backing is also suspicious or it must be a poor naming.
See also:
Why JSF calls getters multiple times
How to choose the right bean scope?
Update in a nutshell, your bean should look something like this:
#ManagedBean
#ViewScoped
public class Orders {
private String query; // +getter +setter
private List<Order> results; // +getter (no setter required)
#EJB
private OrderService service;
public void search() {
results = service.search(query);
}
// Add/generate normal getters/setters (don't change them!)
}
and your view should look like this:
<h:form>
<p:inputText value="#{orders.query}" />
<p:commandButton value="Search" action="#{orders.search}" update=":tableForm" />
</h:form>
<h:form id="tableForm">
<p:dataTable value="#{orders.results}" var="order" ... rendered="#{not empty orders.results}">
...
</p:dataTable>
<h:outputText value="No results found" rendered="#{facesContext.postback and empty orders.results}" />
</h:form>