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>
Related
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
My purpose is to show an alert after a delete :
So my .xhmtl code is:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:form id="form">
....
<p:growl autoUpdate="true" id="message" for="message" showDetail="true"/>
</h:form>
and in my bean after delete I do:
FacesMessage infoMsg = new FacesMessage(FacesMessage.SEVERITY_INFO, "DELETE", "DELETE OK" );
FacesContext.getCurrentInstance().addMessage("form:message", infoMsg);
The problem is the object is deleted correctly but the alert is not show. Anyone can help me?
Place growl component in own form like this.
<h:form id="growlForm">
<p:growl showDetail="true" life="8000" keepAlive="true"/>
</h:form>
And create a message like this
FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("Success!", "Deleted"));
PrimeFaces.current().ajax().update("growlForm");
Instead of using
PrimeFaces.current().ajax().update("growlForm");
You can also update the form by referencing it from the update attribute in your p:commandButton component. Also, your Bean which handels the request should not be RequestScoped, but ViewScoped.
In Primefaces 7 Documentation growl does not have autoupdate.
So you are using a different version.
I give you some sample code in case that you want to delete an item in a datatable
<h:form id="form">
<p:growl id="msgs1" showDetail="true" life="3000"/>
.....
<p:dataTable value="#{ManageBean.dataList}"
var="record"
widgetVar="rolesTable"
rowKey="#{record}">
<p:column headerText="Data" sortBy="#{record.desc }"
<h:outputText value="#{record.desc}"/>
</p:column>
<p:column headerText="Actions" width="100">
<p:commandLink
update="form" action="#{ManageBean.delete(record)}"
>
<h:graphicImage name="/icons/delete.png"
title="Delete"/>
</p:commandLink>
</p:dataTable>
And the code in ManageBean
public void delete(ObjectType object) {
//Your code for delete
db.dbTransactions.deleteObject(object);
//Create the message
FacesMessage msg = new FacesMessage("Successful Delete");
FacesContext.getCurrentInstance().addMessage(null, msg);
//Remove the object from your list
dataList.remove(object);
}
}
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 .
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
I have a DataTable (Primefaces 3.5, JSF 2.0) which is populated from a database. In the first column of this table, checkboxes are displayed (multiple row selection).
After selecting row(s), when a button (<p:commandButton>) is pressed, the selected rows are expected to be deleted from the database.
Before deleting row(s), a confirm message regarding the deletion of the selected row(s) is displayed in <p:confirmDialog> with two buttons Yes and No something like the following.
Test.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-transitional.dtd">
<ui:composition template="template/Template.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<ui:define name="title">Test</ui:define>
<ui:define name="content">
<h:form id="form">
<p:dataTable id="dataTable" var="row" value="#{testManagedBean.list}"
selection="#{testManagedBean.selectedValues}"
rowKey="#{row.id}"
rowIndexVar="rowIndex">
<p:column selectionMode="multiple" style="width:5%; text-align: center;">
<f:facet name="footer">
----------------> <p:commandButton actionListener="#{testManagedBean.deleteMultipleActionListener}" oncomplete="confirmDeleteMultiple.show()" update=":form:confirmDialogDeleteMultiple" process=":form:dataTable" icon="ui-icon ui-icon-close"/>
</f:facet>
</p:column>
<p:column headerText="Index">
<h:outputText value="#{rowIndex+1}"/>
</p:column>
<p:column id="id" headerText="Id">
<h:outputText value="#{row.id}"/>
</p:column>
<p:column id="countryName" headerText="Description">
<h:outputText value="#{row.description}"/>
</p:column>
</p:dataTable>
---------------><p:confirmDialog id="confirmDialogDeleteMultiple" widgetVar="confirmDeleteMultiple" appendToBody="true" message="Delete row(s)?" showEffect="true" hideEffect="true" header="Deletion of row." severity="alert" closeOnEscape="true" closable="true">
<p:commandButton id="confirmDeleteMultiple" value="Yes" oncomplete="confirmDeleteMultiple.hide()" actionListener="#{testManagedBean.deleteMultiple}" process="#this dataTable" update="dataTable"/>
<p:commandButton id="declineDeleteMultiple" value="No" onclick="confirmDeleteMultiple.hide()" type="button" />
</p:confirmDialog>
</h:form>
</ui:define>
</ui:composition>
The managed bean:
#ManagedBean
#ViewScoped
public final class TestManagedBean implements Serializable
{
#EJB(mappedName="ejb/JNDI")
private TestService testService;
private List<Test> list;
private List<Test>selectedValues;
public TestManagedBean(){}
#PostConstruct
public void init()
{
list=testService.getList();
}
public List<Test> getList() {
return list;
}
public List<Test> getSelectedValues() {
return selectedValues;
}
public void setSelectedValues(List<Test> selectedValues) {
this.selectedValues = selectedValues;
}
public void deleteMultipleActionListener(ActionEvent actionEvent)
{
//Just show a warning message, when the delete button is pressed.
for(Test test:selectedValues)
{
System.out.println(test.getId()+" : "+test.getDescription());
}//Displays the list.
}
public void deleteMultiple(ActionEvent actionEvent)
{
System.out.println("multiple");
for(Test test:selectedValues)
{
System.out.println(test.getId()+" : "+test.getDescription());
}//The list is not null and empty.
}
}
When the button (indicated by an arrow in XHTML) is pressed, the deleteMultipleActionListener() method in the managed bean is invoked where it simply displays the list which is populated by the selected rows and the confirm dialog as shown in XHTML appears afterwards. (This is just to show a warning message before deletion. The loop in this method is just for the demonstration).
When the Yes button on the confirm dialog is pressed, the deleteMultiple() method is invoked which is responsible for actual deletion of rows (actionListioner in <p:commandButton> inside <p:confirmDialog>) and the deletion of rows should be performed but here the list of the selected rows retrieved here is empty (not null).
The resulting list inside the deleteMultiple() method is empty because of <f:view> on the template page. The template page is shown below.
<?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-transitional.dtd">
<html lang="#{localeBean.language}"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core">
--------->
<f:view locale="#{localeBean.locale}" encoding="UTF-8" contentType="text/html">
<f:loadBundle basename="messages.ResourceBundle" var="messages"/>
<h:head><title><ui:insert name="title">Default Title</ui:insert></title></h:head>
<h:body>
<p:layout fullPage="true">
<p:layoutUnit position="north" size="135" collapsed="false" resizable="false" closable="false" collapsible="false" gutter="6">
<h:form>
<h:selectOneMenu id="languages" value="#{localeBean.language}" onchange="submit();" style="position: absolute; right: 0; top: 50px;">
<f:selectItem itemValue="en" itemLabel="English" />
<f:selectItem itemValue="hi" itemLabel="Hindi" />
</h:selectOneMenu>
</h:form>
</p:layoutUnit>
<p:layoutUnit position="west" id="leftPanel" size="225" header="Menu Item" resizable="false" closable="false" collapsible="true" gutter="6">
</p:layoutUnit>
<p:layoutUnit position="center" size="2500" maxSize="2500">
<ui:insert name="content">Put default content here, if any.</ui:insert>
</p:layoutUnit>
</p:layout>
</h:body>
</f:view>
</html>
When I remove this template from the above Test.xhtml page and use this <f:view> tag on the Test.xhtml page itself, everything works fine and the list of the selected rows inside the deleteMultiple() method is obtained correctly.
So, what is going wrong? Why does the list become empty when the Yes button is pressed, if the template page is enclosed by <f:view>? Is it wrong? How to accomplish this? (<f:view> is used for the localization of the application as it can be imagined).
Your problem is solved when you replace the process="#this datatable" in your confirmDeleteMultiple by process="#this", which makes the button component only be processed. In fact you don't need Ajax to process your datatable when you send the deletion confirmation, because values for deletion are already stored in the bean since previous step (that's the main benefit of the view scope).
Making your datatable to be processed in your Ajax request invokes again the setSelectedValues setter, so the original value is getting overriden by the new (empty) selection.