show/hide datatable upon button click - jsf

i have a requirement like i need to show/hide datatable upon button click . I tried implementing it , but its not working . below is the code .
please let me know if we can do with ajax . It is possible only if i set ajax to false .
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>hello world</title>
</h:head>
<h:body>
<h:form>
<p:outputPanel id="panel" rendered="#{bye1.showtable}">
<p:dataTable value="#{bye1.carmodel}" var="cartypes">
<p:column headerText="Model">
<h:outputText value="#{cartypes.carname}">
</h:outputText>
</p:column>
<p:column headerText="Location">
<h:outputText value="#{cartypes.location}"></h:outputText>
</p:column>
<p:column headerText="Price">
<h:outputText value="#{cartypes.rate}"></h:outputText>
</p:column>
</p:dataTable>
</p:outputPanel>
<p:commandButton value="show" action="#{bye1.enabletable}" update="panel">
</p:commandButton>
</h:form>
</h:body>
</html>
package lifecycle;
import java.util.ArrayList;
import java.util.List;
import javax.annotation.PostConstruct;
public class bye {
private String output;
private Boolean showtable;
private List<cars> carmodel;
public List<cars> getCarmodel() {
System.out.println("cars populated...........");
return carmodel;
}
#PostConstruct
public void bye1() {
System.out.println("constructor called");
carmodel = new ArrayList<cars>();
output = "hai";
carmodel.add(new cars("ford","chennai","4 laks"));
carmodel.add(new cars("AUDI","chennai","44 laks"));
}
public String getOutput() {
return output;
}
public Boolean getShowtable() {
return showtable;
}
public String enabletable() {
showtable = true;
return "";
}
}
Any help ?
Thanks in Advance

Use an actionListener on your commandbutton instead of action.
"A return value of an empty string or the same view ID will also return to the same page, but recreate the view scope and thus destroy any currently active view scoped beans and, if applicable, recreate them:"
Differences between action and actionListener
Also consider the use of Boolean vs boolean.
It also seems like your class is missing the #ManagedBean and scope annotations?

I think the update="panel" is not working properly, and the panel component is not getting updated. When you disable ajax, the whole page gets update, and maybe this is why the update works only with ajax="false".
Can you try this and tell me if it works now ? :
<p:commandButton value="show" actionListener="#{bye1.enabletable}" ajax="true" update=":#{p:component('panel')}">
</p:commandButton>

i found this solution .
i did a change like this
<p:outputPanel id="panel" >
<p:dataTable value="#{bye1.carmodel}" var="cartypes"
rendered="#{bye1.showtable}">
..............
</p:dataatble>
</p:outputPanel>
set the rendered attribute to the datatable rather to the outputpanel .

Related

Update bean property while using actionListener [duplicate]

This question already has answers here:
p:commandbutton action doesn't work inside p:dialog
(4 answers)
Closed 2 years ago.
I have a dialog in a form. The dialog has an inputTextarea and a commandButton. The commandButton uses actionListener to call a method on the bean. My issue is that the data in the inputTextarea is not available to my actionListener's method. The comments field shown below is null on the bean. How can I get access to it's contents in my bean's method?
The Page:
<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core" xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:p="http://primefaces.org/ui"
template="/common/template.xhtml">
<ui:define name="title">test</ui:define>
<ui:define name="head">
<h:outputStylesheet name="web0020.css" library="css"/>
</ui:define>
<ui:define name="content">
<p:panel id="fileUploads" header="File Uploads" style="margin-bottom:20px">
<h:form id="form">
<p:messages id="messages" showDetail="false" closable="true">
<p:autoUpdate/>
</p:messages>
<p:dialog header="Approve" widgetVar="approveDlg" modal="true" appendTo="#(body)">
<p:panelGrid columns="1" layout="grid" styleClass="ui-noborder">
<h:outputText value="Approve Submission" style="font-weight:bold;font-size:1.3em"/>
<p:outputLabel for="comments" value="Comments:" style="font-weight:bold"/>
<p:inputTextarea id="comments" value="#{testView.comments}"
rows="1" cols="100"/>
<p:commandButton value="Save"
actionListener="#{testView.approve()}"
icon="ui-icon-check" update=":form:messages"/>
</p:panelGrid>
</p:dialog>
<p:commandButton value="Approve" onclick="PF('approveDlg').show();" icon="fa fa-thumbs-up"
update=":form:messages"/>
</h:form>
</p:panel>
</ui:define>
</ui:composition>
#Named
#ViewScoped
public class TestView implements Serializable{
#SuppressWarnings("compatibility:1287963775427900593")
private static final long serialVersionUID = 1L;
public TestView() {
super();
}
private String comments;
public void approve() {
try {
System.out.println("Comment:" + comments); //THIS IS EMPTY
} catch (Exception e) {
FacesContext.getCurrentInstance()
.addMessage(null,
new FacesMessage(FacesMessage.SEVERITY_ERROR, "Error! " + e.getMessage(), e.getMessage()));
}
}
public void setComments(String comments) {
this.comments = comments;
}
public String getComments() {
return comments;
}
}
Answered with this - Primefaces dialog with modal=true not working properly. In order to make a modal form, you have to use appendTo="#(body)" and if you use appendTo, you will be outside the page's form, so you have to embed a separate form (outside of the main page's form) inside your dialog

Primefaces dataTable is not rendered [duplicate]

This question already has an answer here:
JSF returns blank/unparsed page with plain/raw XHTML/XML/EL source instead of rendered HTML output
(1 answer)
Closed 7 years ago.
i cannot find out what i am doing wrong, so that my dataTable is not shown on the webpage.
The User class i created is not really complicated but has more than these three properties which i try to set in the bean.
The only thing that is displayed is the facet Text "Test Header"
What am i missing?
Testmonitor .xhtml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<head>
<title>Test Monitor</title>
<meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
</head>
<body onload="#{testdata.createUsers()}">
<p:dataTable id="overviewTable" var="collector" sortOrder="descending" value="#{testdata.userList}">
<f:facet name="header">
Test Header
</f:facet>
<p:column headerText="IP">
<h:outputText value="#{collector.ip}" />
</p:column>
<p:column headerText="CollectorID">
<h:outputText value="#{collector.collectorId}" />
</p:column>
<p:column headerText="ID">
<h:outputText value="#{collector.id}" />
</p:column>
</p:dataTable>
</body>
</html>
Bean:Testdata.java
package MonitorTest;
import UserAndPosition.User;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import java.util.List;
#ManagedBean
#SessionScoped
public class Testdata {
private List<User> UserList;
private User aUser=new User();
public void createUsers() {
aUser.setCollectorId("AnyCollectorID");
aUser.setId("WND9L320NDUD");
aUser.setIp("192.168.2.1");
UserList.add(aUser);
//System.out.println("Post Construct durchgelaufen");
}
/**
* Regular Getter- and Setter Methods.
*/
public Testdata() {
}
public List<User> getUserList() {
return UserList;
}
public void setUserList(List<User> UserList) {
this.UserList = UserList;
}
}
Thanks in advance
I haven't tested, but you definitely need h:head and h:body instead.
Also in onload you can use only script (not Expression Language), annotate createUsers() with #PostConstruct instead - then the method will run whenever the bean is being created.
I found the solution: Before the error I changed the project properties in Netbeans so that not the index.xhtml would show up as initial page. i just entered "/Testmonitor.xhtml" as relative path. the "/faces" path of the url was then missing an all JSF or primefaces components did not show up (even though i did not get any error message or so..)
I dont know why this "/faces" in the url is so important, but obviously it is!
Can someone explain what /faces causes?

RequestContext won't work

I am having trouble to update the view from the bean in the back using PrimeFaces's RequestContext. In the example below I have a button and 2 panels. When pressing the button, I want to update one panel, but not the other one.
It does not work though and I can't find the error! requestContext.update("panela"); is fired, but doesn't do its job!
Help greatly appreciated!
The XHTML file:
<!DOCTYPE html>
<html xmlns="http://www.w3c.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head/>
<h:body>
<h:form>
<p:panelGrid columns="1">
<p:commandButton value="Save" actionListener="#{runtimeUpdatesBean.save}" />
<p:panel id="panela">
<h:outputText value="#{runtimeUpdatesBean.texta}"/>
</p:panel>
<p:panel id="panelb">
<h:outputText value="#{runtimeUpdatesBean.textb}"/>
</p:panel>
</p:panelGrid>
</h:form>
</h:body>
</html>
The bean:
package com.glasses.primework;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import org.primefaces.context.RequestContext;
#ManagedBean
#SessionScoped
public class RuntimeUpdatesBean {
private String texta;
private String textb;
private boolean outcome;
public String getTexta() {
texta += "a";
System.out.println("RuntimeUpdatesBean.getTexta() = " + texta);
return texta;
}
public String getTextb() {
textb += "b";
System.out.println("RuntimeUpdatesBean.getTextb() = " + textb);
return textb;
}
public void save() {
RequestContext requestContext = RequestContext.getCurrentInstance();
if(outcome) {
System.out.println("RuntimeUpdatesBean.save() = update panela");
requestContext.update("panela");
outcome = false;
} else {
System.out.println("RuntimeUpdatesBean.save() = update panelb");
requestContext.update("panelb");
outcome = true;
}
}
}
Well the problem is the ID of the component that you are referring.
In JSF when you place a component inside h:form (or Some Primefaces components like TabView), that component's Id will be generated based on the h:form id too.
Here is the Example:
<h:form id="panelaForm">
<p:panel id="panela">
....
</p:panel>
</h:form>
In the above case your p:panel's id will be generated as panelaForm:panela.
In your case since you haven't provided any ID for h:form a dynamic id will be attached like for example j_xyz:panela(you can see it using you browser's Inspect Element).
So If you wan to access p:panel with Id panela inside the same h:form then no need to attach the form Id.
But If you want to access the p:panel outside h:form then you need to attach the h:form id to access it.
Solution to you problem is: use an custom ID to your h:form (which is a best practice by the way..) and access the p:panel by attaching that form ID.
<h:form id="panelaForm">
<p:panel id="panela">
....
</p:panel>
</h:form>
And in Managed bean use:
RequestContext.getCurrentInstance().update("panelaForm:panela");
I'm the new guy here (Java EE) however below solution works for me:
<!DOCTYPE html>
<html xmlns="http://www.w3c.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head/>
<h:body>
<h:form id="form">
<p:panelGrid columns="1">
<p:commandButton value="Save" actionListener="#{runtimeUpdatesBean.save}" update=":form" />
<p:panel id="panela">
<h:outputText value="#{runtimeUpdatesBean.texta}"/>
</p:panel>
<p:panel id="panelb">
<h:outputText value="#{runtimeUpdatesBean.textb}"/>
</p:panel>
</p:panelGrid>
</h:form>
</h:body>

command button do not call function and do not work update attribute

Sample.xhtml
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head>
<f:event listener="#{sample.dosamplelist}" type="preRenderView" />
</h:head>
<h:body>
<h:form>
<h:panelGrid id="samplesetting" columns="6" cellpadding="5">
<f:facet name="header">Name Setting</f:facet>
<h:outputLabel for="samplename" value="Name:" />
<p:inputText value="#{sample.name}" id="samplename"
required="true" label="samplename" />
</h:panelGrid>
<p:panel id="sampleview" header="Sample List">
<p:dataTable var="spl" value="#{sample.samplelist}" rowKey="#{spl.name}"
selection="#{sample.selectedname}"
selectionMode="single">
<p:column headerText="Name">
<h:outputText value="#{spl.name}" />
</p:column>
<p:column>
<p:commandButton id="one" value="View Details" action="#{sample.setSelectedsample(spl)}" update="#form:samplesetting">
</p:commandButton>
</p:column>
</p:dataTable>
</p:panel>
</h:form>
Managed Bean
#SuppressWarnings("serial")
#ManagedBean(name = "sample")
#RequestScoped
public class Sample implements Serializable
{
private String name;
private List<Sample> samplelist;
private String selectedname;
//getters and setters
public void dosamplelist(ComponentSystemEvent event)
{
List<Sample> samplelist = new ArrayList<Sample>();
Sample configA = new Sample();
configA.setName("John");
samplelist.add(configA);
Sample configB = new Sample();
configB.setName("David");
samplelist.add(configB);
this.samplelist = samplelist;
}
public void setSelectedsample(Sample smpl)
{
this.name = smpl.name;
}
}
This is the sample of little big form, and the need is, when we select the table row from the bottom, it will be display to top input box for editing purpose.
But when I press the command button it do not work. why? and what is the reason please?
Possible Problem
One obvious problem is that at the class level, you've defined:
private List<Sample> samplelist;
Then you go ahead and hide the variable in doSampleList with
List<Sample> samplelist = new ArrayList<Sample>();
Combined with the fact that you have your bean marked as #RequestScoped, it will guarantee that the content of the samplelist will not be consistent during the JSF request processing.
To Solve:
Mark your bean as #ViewScoped instead and resolve the variable hiding problem as you see fit.
Further reading:
commandButton/commandLink/ajax action/listener method not invoked or input value not updated

jsf immediate="true" regarding binding to session bean

I have a listing page that goes to an add page. The add page has a name textbox whose value is bound to a session scoped bean.
The listing page has an add button that goes via an action method to the add page. This action method clears the object that the name textbox is bound to.
I also have a cancel button on the add page, which is bound to an action method that again clears the value that the name textbox is bound to.
If nothing is set to immediate, this all works fine.
However, if I set the cancel button to immediate, if I enter values in the name field, and then click cancel, the action method is fired and clears the object in the backing bean and goes to the listing page. If I then click add, the action method clears the object again (ignore if it's best method or not) and then goes to the add page. I would now expect the add page's name textbox to be empty, but it's not?! Surely, since the add button is not immediate, the values should be re-bound and empty?
Below is the relevant XHTML for the add button on the listing page
<h:commandButton id="addButton"
value="Add"
action="#{myBean.gotoAdd}"/>
Below is the relevant XHTML for the input box on the add page (myBean is session scoped), followed by that of the cancel button on the add page.:
<h:inputText id="newName"
value="#{myBean.newObject.name}"
binding="#{myBean.newNameInput}"
styleClass="name" />
<h:commandButton id="cancelButton"
value="Cancel" immediate="true"
action="#{myBean.cancelAdd}"
onclick="return confirm('You sure?');"/>
I almost never use the binding property of tags, except for when I need to identify which item of a list has had an action fired on it, so I am not particularly well-informed about its uses. But I know that without using binding your code would most likely work as you expected, so my expectation is that whatever javax.faces.component.UIxxx object you are binding to isn't getting reset correctly.
I'm having very similar problems right now.
Besides removing the binding and/or immediate attribute, try calling setSubmittedValue() on component with binding from action called upon click on 'add' button.
Alas, even if it helps you, you would still have to do it in any action that can lead to displaying same component after cancel.
That's why I'm still trying to figure out some better solution...
If you use immediate="true" then the value will be kept, this is how the parameter works. You should take a look at the following links:
http://wiki.apache.org/myfaces/How_The_Immediate_Attribute_Works
http://wiki.apache.org/myfaces/ClearInputComponents
Ok, here's an example that I did from scratch. I have two cancel buttons, one that is immediate, and one that isn't. Example of steps to reproduce:
Go to james-list page and click Add
The add page displays with empty fields. Enter values for all fields and click Add.
The listing page displays and is updated to include the new person. Click Add.
The add page displays with empty fields. Enter values for all fields and Click Cancel (Immediate)
The listing page displays and is unchanged. Click Add.
The add page displays however the fields are not empty as I would expect. Click Cancel.
The listing page displays and is unchanged. Click Add.
The add page displays and NOW the fields are not empty.
James.java:
package com.jamiebarrow;
import java.util.ArrayList;
import java.util.List;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.component.UIComponent;
#ManagedBean
#SessionScoped
public class James {
private UIComponent idComponent;
private UIComponent firstNameComponent;
private UIComponent lastNameComponent;
public UIComponent getIdComponent() {
return idComponent;
}
public void setIdComponent(UIComponent idComponent) {
this.idComponent = idComponent;
}
public UIComponent getFirstNameComponent() {
return firstNameComponent;
}
public void setFirstNameComponent(UIComponent firstNameComponent) {
this.firstNameComponent = firstNameComponent;
}
public UIComponent getLastNameComponent() {
return lastNameComponent;
}
public void setLastNameComponent(UIComponent lastNameComponent) {
this.lastNameComponent = lastNameComponent;
}
private List<Person> personResults;
private Person person;
public James() {
personResults = new ArrayList();
personResults.add(new PersonBuilder(1, "Bob", "Uncle").build());
personResults.add(new PersonBuilder(2, "Jack", "Black").build());
}
public List<Person> getPersonResults() {
return personResults;
}
public void setPersonResults(List<Person> personResults) {
this.personResults = personResults;
}
public Person getPerson() {
return person;
}
public void setPerson(Person person) {
this.person = person;
}
private void clearPerson() {
person = new PersonBuilder().build();
}
public String gotoList() {
return "james-list";
}
public String gotoAdd() {
clearPerson();
return "james-add";
}
public String cancelAdd() {
clearPerson();
return gotoList();
}
public String addPerson() {
personResults.add(person);
return gotoList();
}
}
james-list.xhtml:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<title>list page</title>
</h:head>
<body>
<div class="container">
<div class="content">
<h:messages showSummary="true" showDetail="false" errorClass="error" infoClass="info"
warnClass="warn"/>
<h:form>
<h:dataTable value="#{james.personResults}" var="person">
<h:column>
<f:facet name="header">Id</f:facet>
<h:outputText value="#{person.id}"/>
</h:column>
<h:column>
<f:facet name="header">Name</f:facet>
<h:outputText value="#{person.firstName}"/>
</h:column>
<h:column>
<f:facet name="header">Surname</f:facet>
<h:outputText value="#{person.lastName}"/>
</h:column>
</h:dataTable>
<h:panelGroup layout="block">
<h:commandButton value="Add" action="#{james.gotoAdd}"/>
</h:panelGroup>
</h:form>
</div>
</div>
<ui:debug hotkey="L" rendered="true"/>
</body>
</html>
james-add.xhtml:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<title>add page</title>
</h:head>
<body>
<div class="container">
<div class="content">
<h:messages showSummary="true" showDetail="false" errorClass="error" infoClass="info"
warnClass="warn"/>
<h:form>
<fieldset>
<legend>Add Person</legend>
<h:panelGrid columns="2">
<h:outputLabel for="PersonId" value="Id:"/>
<h:inputText id="PersonId" value="#{james.person.id}" binding="#{james.idComponent}"/>
<h:outputLabel for="PersonFirstName" value="First Name:"/>
<h:inputText id="PersonFirstName" value="#{james.person.firstName}" binding="#{james.firstNameComponent}"/>
<h:outputLabel for="PersonLastName" value="Last Name:"/>
<h:inputText id="PersonLastName" value="#{james.person.lastName}" binding="#{james.lastNameComponent}"/>
</h:panelGrid>
<h:panelGroup layout="block">
<h:commandButton value="Add" action="#{james.addPerson}"/>
<h:commandButton value="Cancel (immediate)" action="#{james.cancelAdd}" immediate="true"/>
<h:commandButton value="Cancel" action="#{james.cancelAdd}"/>
</h:panelGroup>
</fieldset>
</h:form>
</div>
</div>
<ui:debug hotkey="L" rendered="true"/>
</body>
</html>

Resources