• Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

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

 
Joe Robets
Greenhorn
Posts: 1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 17989
47
Android Eclipse IDE Linux
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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.
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic