how to update dynamic text in PrimeFaces [duplicate] - jsf

This question already has answers here:
Can I update a JSF component from a JSF backing bean method?
(5 answers)
Closed 3 years ago.
I'm new to PrimeFaces (and JSF too) and I'm trying to update dialog message based on retrieved data.
View looks like:
<p:dialog id="userDialog" header="Confirmation" widgetVar="userDialog" dynamic="true" modal="true" closable="fasle" width="680px" resizable="false">
<h:form>
<b>Email address #{userListView.email}</b> is already registered with the following user <b>#{userListView.firstName}</b> <b>#{userListView.lasttName}</b>:
<b>Please confirm that you would like to proceed with adding an additional account for this User.</b><br />
<hr />
<div class="ui-confirm-dialog-footer">
<p:commandButton value="Yes" type="button" styleClass="ui-confirmdialog-yes" icon="pi pi-check" onclick="PF('userDialog').hide()" />
<p:commandButton value="No" type="button" styleClass="ui-confirmdialog-no" icon="pi pi-times" onclick="PF('userDialog').hide()" />
</div>
</h:form>
And controller looks like:
#ManagedBean(name = "userListView")
#ViewScoped
public class UserListView extends DataTableListView implements Serializable {
.....some other code...
public String getFirstName() {
String firstName = "";
List<UserMembership> membershipList = getMembershipList();
if (!membershipList.isEmpty()) {
UserMembership membership = membershipList.get(0);
firstName = membership.getUser().getFirstName();
}
return firstName;
}
public String getLasttName() {
String lastName = "";
List<UserMembership> membershipList = getMembershipList();
if (!membershipList.isEmpty()) {
UserMembership membership = membershipList.get(0);
lastName = membership.getUser().getLastName();
}
return lastName;
}
public String getEmail() {
String email = "";
List<UserMembership> membershipList = getMembershipList();
if (!membershipList.isEmpty()) {
UserMembership membership = membershipList.get(0);
email = membership.getUser().getEmail();
}
return email;
}
....some other code...
}
and dialog box is spawned as
RequestContext.getCurrentInstance().execute("showDialog(userDialog')");
It will work fine for the first user but then when I will get that dialog box for another one it keeps data from first one not updated with current.
Also I have try to add
onHide="PF('userDialog').content.empty()"
to the dialog but that will remove whole dialog box content.
How can I destruct and refresh that dialog box with new data then?
PS.
Not sure if I need to get this done via
#PostConstruct
public void init() {}

In the case you are using Primefaces 7.0+ swap the already mentioned
RequestContext.getCurrentInstance().update("userDialog");
for
PrimeFaces.current().ajax().update("userDialog");
If I can suggest you, set some id for <h:form> and use the full client ID after, something like
PrimeFaces.current().ajax().update("userDialog:yourFormId");
BalusC already answer a similar question in this thread Can I update a JSF component from a JSF backing bean method?

In my case fix looks like
RequestContext.getCurrentInstance().update(":userDialog");
just after .execute() part.

Related

PrimeFaces ManyCheckbox ArrayList not Updating inside modal dialog [duplicate]

This question already has answers here:
Understanding PrimeFaces process/update and JSF f:ajax execute/render attributes
(5 answers)
Closed 6 years ago.
I have a modal dialog, where a user can select and deselect roles based on another user and then submit this to the database to be updated.
However, after debugging, the ArrayList that backs the ManyCheckbox doesn't get updated, and the selectedRoles ArrayList remains to what it originally was.
For example:
I load the application
There is one user in the database with role 'admin'
I try to edit this user and the dialog opens up, 'admin' checkbox is selected.
I click the 'user' role checkbox and click submit
The selectedRoles array is still only just 'admin' instead of 'admin' and 'user'
Here is my dialog modal:
<p:dialog header="Editing User ID: #{usersView.viewUser}" id="editUserDialog" widgetVar="editUserDialog" modal="true" appendTo="#(body)">
<h:form id="editUserForm">
<p:selectManyCheckbox id="roleSelect" value="#{usersView.selectedRoles}" layout="grid" columns="3">
<f:selectItems value="#{rolesView.roles}" var="role" itemLabel="#{role.name}" itemValue="#{role.name}" />
</p:selectManyCheckbox>
<p:separator />
<p:commandButton process="#this" update=":form:tabs:adminView:userTable:userRoleOutput" value="Submit" id="EditUserSubmitButton" actionListener="#{usersView.editUserRole}" oncomplete="PF('editUserDialog').hide();" />
</h:form>
</p:dialog>
UserView:
#ManagedBean(name="usersView", eager=true)
#ApplicationScoped
private ArrayList<String> selectedRoles;
public Arraylist<String> getSelectedRoles()
{
return this.selectedRoles;
}
public void setSelectedRoles(ArrayList<String> roles)
{
this.selectedRoles = roles;
}
public void editUserRole(ActionEvent actionEvent)
{
// This method literally just loops through all users and matches the one we're looking at
User user = findUser();
if (user != null)
{
// gives user checked roles in database and local session
addSelectedRoles(user);
ArrayList<String> rolesToRemove = user.getRoleNames();
rolesToRemove.removeAll(selectedRoles);
// removes user unchecked roles in database and local session
removeSelectedRoles(user, rolesToRemove);
}
else
{
// Handle exception...
}
}
I am working on a restricted VM, so I cannot copy and paste and this is all the information I can post, which I believe is enough.
Any help is greatly appreciated.
I solved my issue by removing process="#this" and now the ArrayList is getting updated.
process="#this" means that the current component of the commandLink and hence why it wasn't updating.

Programmatically add Tabs using PrimeFaces [duplicate]

This question already has answers here:
How to dynamically add and remove a tab in p:tabView component
(2 answers)
Closed 7 years ago.
I am programmatically add a new tab whenever a menu item is clicked. I have googled for all the questions on dynamic Tab creation and found a lot of unanswered queries. So my question is, is it possible to create tabs dynamically? Below is the code I am working on for the past week and not a tab in sight..
I am using Primefaces 5.0, JSF 2.2 Mojarra
Dynamic menu -
DefaultMenuItem windowItem = new DefaultMenuItem(node);
windowItem.setCommand("#{windowContainer.add}");
windowItem.setImmediate(true);
WindowContainer Backing Bean
#ManagedBean
#ViewScoped
public class WindowContainer implements Serializable {
private List<Window> windows;
#PostConstruct
public void init() {
windows = new ArrayList<Window>();
windows.add(new Window("window"+windows.size(),"first tab"));
}
public void add() {
windows.add(new Window("window" + windows.size(), "some content"));
RequestContext req = RequestContext.getCurrentInstance();
req.update("WindowContainer");
}
public void remove(Window window) {
windows.remove(window);
}
public List<Window> getWindows() {
return windows;
}
public void setWindows(ArrayList<Window> windows) {
this.windows = windows;
}
Windows is simple tab with only outputtext .
The View
<p:tabView id= "WindowContainer" value="#{windowContainer.windows}" var="window">
<p:tab title="#{window.title}">
<p>#{tab.content}</p>
<p:commandButton value="Close" action="#{windowContainer.remove(window)}" />
</p:tab>
</p:tabView>
<p:menu>
<p:submenu label="Ajax">
<p:menuitem value="Add Tab" actionListener="#{menuView.addTab}" update="WindowContainer" />
</p:menu>
Try like this update="WindowContainer" .Inside quotes give tabview id.

Input fields hold previous values only if validation failed

I came up with a strange problem. I tried to isolate the problem so following is my simplified code.
public class MyBean {
private List<Data> dataList;
Data selectedData;
public MyBean() {
dataList = new ArrayList<Data>();
dataList.add(new Data("John", 16));
dataList.add(new Data("William", 25));
}
public List<Data> getDataList() {
return dataList;
}
public void edit(Data data) {
selectedData = data;
}
public void newData() {
selectedData = new Data(null, null);
}
public Data getSelectedData() {
return selectedData;
}
public class Data {
String name;
Integer age;
Data(String name, Integer age) {
this.name = name;
this.age = age;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public Integer getAge() {
return age;
}
public void setAge(Integer age) {
this.age = age;
}
}
}
xhtml:
<rich:modalPanel id="pop">
<h:form>
Name: <h:inputText value="#{myBean.selectedData.name}" required="true" id="txtName"/><br/>
Age : <h:inputText value="#{myBean.selectedData.age}" required="true" id="txtAge"/>
<a4j:commandButton value="Save"/>
<a4j:commandButton value="Close" onclick="Richfaces.hideModalPanel('pop');return false;"/>
<br/>
<rich:message for="txtName"/><br/>
<rich:message for="txtAge"/>
</h:form>
</rich:modalPanel>
<h:form>
<rich:dataTable value="#{myBean.dataList}" var="data">
<rich:column>#{data.name}</rich:column>
<rich:column>
<a4j:commandLink value="Edit" action="#{myBean.edit(data)}" reRender="pop" oncomplete="Richfaces.showModalPanel('pop')"/>
</rich:column>
</rich:dataTable>
<a4j:commandButton value="New" action="#{myBean.newData()}" reRender="pop" oncomplete="Richfaces.showModalPanel('pop')"/>
</h:form>
This is the path to error:
Load the page
Click the "Edit" link in first row(popup displays)
In popup, clear the "Age" field and click "Save".(Required message shown)
Click cancel(without filling "Age" field)
Click second link.
Now it shows irrelevant data(previous data). - This is the problem
Even when I click "New" button it shows incorrect data.
This happens only if a validation is failed in the popup.
Is there a solution for this?
This problem is in JSF 2 also recognized and explained in detail in the following answer: How can I populate a text field using PrimeFaces AJAX after validation errors occur? If you were using JSF 2, you could have used OmniFaces' ResetInputAjaxActionListener or PrimeFaces' <p:resetInput> or resetValues="true" for this.
To the point, you need to clear the state of the EditableValueHolder component when it's about to be ajax-rendered, but which isn't included in the ajax-execute. To clear the state, in JSF 2 you would have used the convenience method resetValue() for this, but this isn't available in JSF 1.2 and you need to invoke the 4 individual methods setValue(null), setSubmittedValue(null), setLocalValueSet(false), setValid(true) to clear the state.
To figure out which components are to be ajax-rendered, but aren't been ajax-executed, in JSF 2 you would have used PartialViewContext methods for this, but this is not available in JSF 1.2 which hasn't standardized ajax yet. You'd need to fiddle with RichFaces specific ajax API in order to figure that. I can't tell that from top of head, so here's a kickoff example assuming that you already know the components which needs to be cleared. Imagine that the form in your popup has id="popForm" and the name input field has id="nameInput", here's how you could clear it inside the newData() method:
UIInput nameInput = (UIInput) context.getViewRoot().findComponent("popForm:nameInput");
nameInput.setValue(null);
nameInput.setSubmittedValue(null);
nameInput.setLocalValueSet(false);
nameInput.setValid(true);
do one thing on cancel action set all popup values null. now in your next click all values set to be default.
or on click set all previous values null. and set all respective values after that.
I had the same problem. if you are using Primefaces, the solution is as simple as putting resetValues="true" on your p:commandLink or p:commandButton that loads the selected item.
After validation failed if you want to remain same as input data which you have pass as submission parameter, then set value attribute as your form bean name as mention below i.e.
<input type="text" id="fname" path="fname" value="${myFormBean.fname}"/>

How to pass the ID of the current user rendered on the page to an action handler method in JSF 2?

I have a JSF page in which I show the details of a given user:
<h:form>
<p>
<h:outputLabel value="User Name" for="userName" />
<h:outputText id="userName" value="#{userController.user.name}" />
</p>
<p>
<h:outputLabel value="Email" for="email" />
<h:outputText id="email" value="#{userController.user.email}" />
</p>
<p>
<h:commandLink value="Edit" action="#{userController.edit(userController.user.id)}" />
</p>
</h:form>
This works fine with the exception of the Edit commandLink. When I click it, I expect userController.edit to be passed the ID of the user that's currently being rendered on the page.
However looks like as userController is a request scoped bean that has a #PostConstruct method that assigns a new User to the user field, always 0 is being passed to the action method as the ID of a new instance of User is null which apparently gets converted to 0.
How can I fix this controller/page, without changing the scope of the controller, to pass the correct ID to the edit action? Here's the code for the controller:
#Model
public class UserController {
#Inject
#UserRepository
private EntityManager entityManager;
#Inject
private UserTransaction tx;
private User user;
public String edit(Long id) {
System.out.println("id = " + id);
// fetch the user with id from the db
return "edit";
}
public User getUser() {
return user;
}
public void setUser(User user) {
this.user = user;
}
#PostConstruct
private void init() {
user = new User();
}
}
The approach is weird but I can imagine when you need this. (e.g. you don't wand to write to session and flash scope don't work in distributed environment etc.). BTW if you can't use session scope consider using flash scope.
Apart from correctness of the approach, try adding aditional field to the bean:
protected Long currentId;
public Long getCurrentId() {
return currentId == null ? user.getId() : currentId;//or simply return it, I don't know how you play with the user field
}
public void setCurrentId(Long currentId) {
this.currentId = currentId;
}
Remove parameter from edit action and use currentId field, and to your view add param (hidden field will not work here):
<f:viewParam name="id" value="#{userController.currentId}" />
Then in action you can get user id from the previous view simply accessing this.currentId.
And BTW, try load your User from another place, not int #PostConstruct. If you create user in #PostConstruct then when you are in edit method the currentId will be from previous view, and user.id will be from #PostConstruct. So if you don't want to store user in session scope, but use only request scope you have to persist it immediately after creation (e.g. in database). In edit method you have to get it back using currentId.

h:commandButton inside h:dataTable [duplicate]

This question already has answers here:
How can I pass selected row to commandLink inside dataTable or ui:repeat?
(4 answers)
Closed 7 years ago.
I am using a JSF data table. One of the columns in the table is a Command button.
When this button is clicked I need to pass few parameters (like a value of the selected row) using the Expression language. This paramaters need to be passed to the JSF managed bean which can execute methods on them.
I have used the following snippet of code but the value i am getting on the JSF bean is always null.
<h:column>
<f:facet name="header">
<h:outputText value="Follow"/>
</f:facet>
<h:commandButton id="FollwDoc" action="#{usermanager.followDoctor}" value="Follow" />
<h:inputHidden id="id1" value="#{doc.doctorid}" />
</h:column>
Bean Method:
public void followDoctor() {
FacesContext context = FacesContext.getCurrentInstance();
Map requestMap = context.getExternalContext().getRequestParameterMap();
String value = (String)requestMap.get("id1");
System.out.println("Doctor Added to patient List"+ value);
}
How can I pass values to the JSF managed bean with a commandbutton?
Use DataModel#getRowData() to obtain the current row in action method.
#ManagedBean
#ViewScoped
public class Usermanager {
private List<Doctor> doctors;
private DataModel<Doctor> doctorModel;
#PostConstruct
public void init() {
doctors = getItSomehow();
doctorModel = new ListDataModel<Doctor>(doctors);
}
public void followDoctor() {
Doctor selectedDoctor = doctorModel.getRowData();
// ...
}
// ...
}
Use it in the datatable instead.
<h:dataTable value="#{usermanager.doctorModel}" var="doc">
And get rid of that h:inputHidden next to the h:commandButton in the view.
An -less elegant- alternative is to use f:setPropertyActionListener.
public class Usermanager {
private Long doctorId;
public void followDoctor() {
Doctor selectedDoctor = getItSomehowBy(doctorId);
// ...
}
// ...
}
With the following button:
<h:commandButton action="#{usermanager.followDoctor}" value="Follow">
<f:setPropertyActionListener target="#{usermanager.doctorId}" value="#{doc.doctorId}" />
</h:commandButton>
Related:
The benefits and pitfalls of #ViewScoped - Contains CRUD example using DataModel<E>.

Resources