aspose file tools*
The moose likes JSF and the fly likes How do you update / replace or re-render JSF components from a click on another component? Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of EJB 3 in Action this week in the EJB and other Java EE Technologies forum!
JavaRanch » Java Forums » Java » JSF
Bookmark "How do you update / replace or re-render JSF components from a click on another component?" Watch "How do you update / replace or re-render JSF components from a click on another component?" New topic
Author

How do you update / replace or re-render JSF components from a click on another component?

Joe Robets
Greenhorn

Joined: Jun 11, 2012
Posts: 1
Hi,

I am sort of new and I am getting mixed output with PrimeFaces when attempting to display different output based on clicking different command buttons:

I have tried a mix of ajax="false" and update="some other component Id" with PrimeFaces and this is what I get:

1 - When I use ajax=false and update=north to update the north panel for a page after clicking a Login button, it works and the north panel gets updated correctly.

2 - When I use ajax=false and update=center on another button within the north toolbar, it doesn't update the center panel, instead if updates the north panel again.

Why am I seeing this behavior? Is it a bug? Is there anyone out there that may have tried using PrimeFaces and run into the same thing?

Here is the content of the page that displays both issues:


<!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:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<title>Dashboard</title>
<style type="text/css">
.ui-widget, .ui-widget .ui-widget {
font-size:12px;
}
.noWrapClass {
word-wrap: normal;
}
.ui-tabs .ui-tabs-nav li{float:right!important;}
</style>
</h:head>
<h:body>
<f:view>
<p:layout id="context" fullPage="true" rendered="true">
<p:layoutUnit id="north" position="north" closable="false" collapsible="false">
<p:toolbar>
<p:toolbarGroup id="group1" rendered="#{loginBean.loggedIn}" align="left">
<h:form id="navF">
<p:commandButton type="push" value="search" action="#{contextBean.toggleViewMode(1)}" ajax="false" update=":center"/>
<p:commandButton type="push" value="map" action="#{contextBean.toggleViewMode(2)}"/>
<p:commandButton type="push" value="configure" action="#{contextBean.toggleViewMode(3)}"/>
<p:commandButton type="push" value="alarms" action="#{contextBean.toggleViewMode(4)}"/>
<p:commandButton type="push" value="notifications" action="#{contextBean.toggleViewMode(5)}"/>
</h:form>
</p:toolbarGroup>
<p:toolbarGroup id="group2" rendered="#{loginBean.loggedIn}" align="right" >
<h:form id="logoutF">
<p:commandButton type="push" value="Logout" ajax="false" action="#{loginBean.logout}" update=":north"/>
</h:form>
</p:toolbarGroup>
<p:toolbarGroup id="group3" rendered="#{!loginBean.loggedIn}" align="right">
<h:form id="loginF">
<p:commandButton type="push" value="Login" onclick="dlg.show();"/>
</h:form>
</p:toolbarGroup>
</p:toolbar>
</p:layoutUnit>
<p:layoutUnit id="center" position="center">
<p:panel id="searchPanel" rendered="#{contextBean.isRendered(1)}">
<h:form>
<p:panelGrid columns="2">
<hutputText value="Device: "/>
<p:inputText id="device" value="#{searchBean.device}"/>
<hutputText value="Group: " />
<p:inputText id="group" value="#{searchBean.group}"/>
<p:commandButton type="push" value="Search" action="contextBean.search"/>
</p:panelGrid>
</h:form>
</p:panel>
</p:layoutUnit>
</p:layout>
<p:growl id="growl" life="3000" />
<p:dialog id="dialog" header="Login" widgetVar="dlg">
<h:form>
<h:panelGrid columns="2" cellpadding="5">
<hutputLabel for="user" value="User:" />
<p:inputText value="#{loginBean.user}"
id="user" required="true" label="user" />

<hutputLabel for="password" value="Password:" />
<h:inputSecret value="#{loginBean.password}"
id="password" required="true" label="password" />

<f:facet name="footer">
<p:commandButton id="loginButton" value="Login" update=":north,:growl" ajax="false"
action="#{loginBean.login}"/>
</f:facet>
</h:panelGrid>
</h:form>
</p:dialog>

</f:view>
</h:body>
</html>


Here is the LoginBean code:


/*
* To change this template, choose Tools | Templates
* and open the template in the editor.
*/
import com.ge.de.cnms.util.Data;
import java.awt.event.ActionEvent;
import java.io.Serializable;
import javax.enterprise.context.SessionScoped;
import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
import javax.faces.context.FacesContext;
import org.primefaces.context.RequestContext;

/**
*
* @author joe
*/
@ManagedBean
@SessionScoped
public class LoginBean implements Serializable{

private boolean loggedIn;
private String user;
private String password;
/**
* Creates a new instance of LoginBean
*/
public LoginBean() {
System.out.println(this);
loggedIn=false;
}

public String getUser() {
return user;
}

public void setUser(String user) {
this.user = user;
}

public String getPassword() {
return password;
}

public void setPassword(String password) {
this.password = password;
}

public void login() {
//The commented out code is only used with dasboard.xhtml and not
//dashboard2.xhtml
//RequestContext context = RequestContext.getCurrentInstance();
if(user != null && user.equals("sce") &&
password != null && password.equals("marks99")) {
loggedIn = true;
} else {
loggedIn = false;
}
// context.addCallbackParam("loggedIn", loggedIn);
System.out.println("user=<" + this.user + ">");
System.out.println("password=<" + this.password + ">");
System.out.println("loggedIn=<" + this.loggedIn + ">");
}

public void logout(){
loggedIn = !loggedIn;
}

public boolean isLoggedIn() {
return loggedIn;
}

public void setLoggedIn(boolean loggedIn) {
this.loggedIn = loggedIn;
}


}


Here is the searchBean code:


/*
* To change this template, choose Tools | Templates
* and open the template in the editor.
*/

import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;

/**
*
* @author joe
*/
@ManagedBean
@RequestScoped
public class SearchBean {
private String device;
private String group;

/**
* Creates a new instance of SearchBean
*/
public SearchBean() {
}

public String getDevice() {
return device;
}

public void setDevice(String device) {
this.device = device;
}

public String getGroup() {
return group;
}

public void setGroup(String group) {
this.group = group;
}

public void search(){
//do nothing for now
}
}


And here is the context bean code:


/*
* To change this template, choose Tools | Templates
* and open the template in the editor.
*/

import java.io.Serializable;
import javax.enterprise.context.SessionScoped;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;

/**
*
* @author joe
*/
@ManagedBean
@RequestScoped
public class ContextBean implements Serializable
{
private int mode;
private boolean rendered;

public int getMode() {
return mode;
}

public void setMode(int mode) {
this.mode = mode;
}

public boolean isRendered(int mode) {
System.out.println("mode=<" + mode + ">, rendered=<" + this.mode==mode + ">");
return this.mode == mode;
}

public void setRendered(boolean rendered) {
this.rendered = rendered;
}

public enum SearchMode{
DEFAULT,
SEARCH,
MAP,
CONFIG,
ALARMS,
NOTIFICATIONS
}
/**
* Creates a new instance of ContextBean
*/
public ContextBean() {
System.out.println(this);
}

public void toggleViewMode(int value){
System.out.println("toggleViewMode <" + value + ">");
switch(SearchMode.values()[value]){
case DEFAULT: {//DEFAULT
System.out.println("Mode=<" + SearchMode.DEFAULT + ">");
mode = SearchMode.DEFAULT.ordinal();
break;
}case SEARCH:{//SEARCH
System.out.println("Mode=<" + SearchMode.SEARCH + ">");
mode = SearchMode.SEARCH.ordinal();
break;
}case MAP:{//MAP
System.out.println("Mode=<" + SearchMode.MAP + ">");
mode = SearchMode.MAP.ordinal();
break;
}case CONFIG:{//CONFIG
System.out.println("Mode=<" + SearchMode.CONFIG + ">");
mode = SearchMode.CONFIG.ordinal();
break;
}case ALARMS:{//ALARMS
System.out.println("Mode=<" + SearchMode.ALARMS + ">");
mode = SearchMode.ALARMS.ordinal();
break;
}case NOTIFICATIONS:{//NOTIFICATIONS
System.out.println("Mode=<" + SearchMode.NOTIFICATIONS + ">");
mode = SearchMode.NOTIFICATIONS.ordinal();
break;
}default:{
System.out.println("Mode=<" + SearchMode.DEFAULT + ">");
mode = SearchMode.DEFAULT.ordinal();
break;
}
}
}
}


Is it not possible to update / replace a component from a click on a button when using the PrimeFaces framework? It seems it works in #1 but not #2 as stated above. Why?

Thanks,

Joe


Tim Holloway
Saloon Keeper

Joined: Jun 25, 2001
Posts: 15641
    
  15

Welcome to the JavaRanch, Joe!

You can do 2 things that will make it easier to get an answer:

1. Try and shorten your examples to the basics. Pasting the complete original code is sometimes necessary, but reading it on-screen can be a real

2. http://www.coderanch.com/how-to/java/UseCodeTags The Code Tags can be used to make any sort of structured text more readable. They are especially useful for Java code and XML.


Customer surveys are for companies who didn't pay proper attention to begin with.
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: How do you update / replace or re-render JSF components from a click on another component?
 
Similar Threads
FaceletContext.includeFacelet trouble
spring security 2.0.4 , primefaces , prettyfaces and Login
JSF 2.0 Login
Reset the value of an input text using PrimeFaces 2.2.1
context.getRequest()).getRequestDispatcher("/j_spring_security_check") returns null