This article was last updated on : November 4th, 2016 at 3:56 am

Showing or hiding attributes in JSF using JavaScript

While doing web development using JSF framework we need to show or hide attributes depending on some attributes value. In this post I am going to show you how to display a text box or other JSF UI component if user response “other” from Listbox (<h:selectOneMenu>) . In the end of the example you will be able to write code for displaying, showing and hiding any JSF UI Component using Javascript. Later you can try some good examples by yourself.

Some examples where Showing or Hiding Attributes are required

I would like to take an example while explaining this example. Suppose I am registering myself on one of a job portal as a job seeker. I did not found my college in the list but I must  enter my College or University name so that employers, HR managers can validate my data. So in this case we can have an option of “Other” in the College or University list and I can select my University name as “Other” and fill the name in the text field shown after selecting value as “Other”. In this example I will take the same scenario. So let us continue with the example.

I would suggest to have a good focus on util.js file in this tutorial. We will explain later in the example.

Create A Front JSP page (universityName.jsp)


<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<html>
<head>
<link rel="stylesheet" type="text/css"
href="<%=request.getContextPath() + "/"%>style.css">
<SCRIPT src="<%=request.getContextPath() + "/"%>util.js"
language="javascript" type="text/javascript"></SCRIPT>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Showing and Hiding UI Component in JSF</title>
</head>
<body>
<f:view>
<h:form id="showHideJSFUIComponentId">
<h:panelGroup style="text-align:center;">
<h:outputText value="Please enter University Details"
styleClass="boldLabel"></h:outputText>
</h:panelGroup>
<h:panelGrid border="0" columns="2">
<h:panelGroup>
<h:outputText value="University or College Name"
styleClass="outputLabel" />
<h:panelGrid>
<h:outputText styleClass="outputLabelSmall"
value="*if your college or university is not present" />
<h:outputText styleClass="outputLabelSmall"
value="please select 'other' and give college name" />
</h:panelGrid>
</h:panelGroup>
<h:selectOneMenu value="#{showHideJSFMBean.universityNameSelected}"
id="collegeNameSelectedId" onchange="showOtherCollegeField();">
<f:selectItems value="#{showHideJSFMBean.universityList}" />
</h:selectOneMenu>
<h:outputText value="Other" id="lblOtherCollegeNameId"
styleClass="#{showHideJSFMBean.universityNameSelected=='Other' ? 'outputLabel' : 'hide'}"></h:outputText>
<h:inputText value="#{showHideJSFMBean.otherUniversityNameEntered}"
id="txtOtherCollegeNameId"
styleClass="#{showHideJSFMBean.universityNameSelected=='Other' ? 'show' : 'hide'}"></h:inputText>
</h:panelGrid>
<h:panelGroup style="text-align:center;">
<h:commandButton value="Display College Details" id="commandButton"
action="#{showHideJSFMBean.collegeDetailsEntered}"></h:commandButton>
</h:panelGroup>
</h:form>
</f:view>
</body>
</html>

Create A Javascript file (util.js)


function showOtherCollegeField() {
var selectedCollegeNameId =
document.getElementById("showHideJSFUIComponentId:collegeNameSelectedId");
if (selectedCollegeNameId != null && selectedCollegeNameId.value == '00') {
alert("Please select any College Name");
}
if (selectedCollegeNameId.value == 'Other') {
document.getElementById("showHideJSFUIComponentId:lblOtherCollegeNameId").className = 'outputLabel';
document.getElementById("showHideJSFUIComponentId:txtOtherCollegeNameId").className = 'show';
} else {
document.getElementById("showHideJSFUIComponentId:lblOtherCollegeNameId").className = 'hide';
document.getElementById("showHideJSFUIComponentId:txtOtherCollegeNameId").className = 'hide';
}
}

In the above file you can see this line


document.getElementById("showHideJSFUIComponentId:lblOtherCollegeNameId").className = 'outputLabel';

if value selected is “Other” then we are calling CSS class which will show the attribute and if value is not other then we are calling the CSS class which will hide the attribute. We can assign CSS class to the jsf UI attribute in javascript method by using .className .

Create A CSS file (style.css)


.hide {
display: none;
}
.show {
display: table;
}
.outputLabel{
font-size: medium;
color: blue;
}
.outputLabelSmall{
font-size: xx-small;
color: red;
}
.boldLabel{
font-size: medium;
font-weight: bold;
color: blue;
}

Create JSF Managed Bean


package com.sitenol.showhidejsfuicomponent;
import java.util.ArrayList;
import java.util.List;
import javax.faces.model.SelectItem;
public class ShowHideJSFManagedBean {
private String universityNameSelected;
private String otherUniversityNameEntered;
private List<SelectItem> universityList;
public String collegeDetailsEntered() {
return "displayUniversityDetails";
}
public List<SelectItem> getUniversityList() {
if (universityList == null) {
universityList = new ArrayList<SelectItem>();
universityList.add(new SelectItem("00", "Select"));
universityList.add(new SelectItem("stanford university",
"stanford university"));
universityList.add(new SelectItem("paris university",
"paris university"));
universityList.add(new SelectItem("Other", "Other"));
}
return universityList;
}
public void setUniversityList(List<SelectItem> universityList) {
this.universityList = universityList;
}
public String getUniversityNameSelected() {
return universityNameSelected;
}
public void setUniversityNameSelected(String universityNameSelected) {
this.universityNameSelected = universityNameSelected;
}
public String getOtherUniversityNameEntered() {
return otherUniversityNameEntered;
}
public void setOtherUniversityNameEntered(String otherUniversityNameEntered) {
this.otherUniversityNameEntered = otherUniversityNameEntered;
}
}

Create JSP to display University Name Selected (displayUniversityName.jsp)


<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<html>
<head>
<link rel="stylesheet" type="text/css"
href="<%=request.getContextPath() + "/"%>style.css">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Showing and Hiding UI Component in JSF</title>
</head>
<body>
<f:view>
<h:form>
<h:panelGroup style="text-align:center;">
<h:outputText value="University Name Entered" styleClass="boldLabel"></h:outputText>
</h:panelGroup>
<h:panelGrid border="0" columns="2">
<h:outputText value="University or College Name - "
styleClass="outputLabel" />
<h:outputText value="#{showHideJSFMBean.otherUniversityNameEntered}"
styleClass="#{showHideJSFMBean.universityNameSelected =='Other' ? 'show' : 'hide'}"></h:outputText>
</h:panelGrid>
</h:form>
</f:view>
</body>
</html>

Create A faces-config.xml File

In faces-config.xml we have to configure managed bean ShowHideJSFManagedBean – a java file and navigation-rule. Please add the following code in your faces-config.xml file.


<?xml version="1.0" encoding="UTF-8"?>
<faces-config xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_1_2.xsd"
version="1.2">
<managed-bean>
<managed-bean-name>showHideJSFMBean</managed-bean-name>
<managed-bean-class>com.sitenol.showhidejsfuicomponent.ShowHideJSFManagedBean</managed-bean-class>
<managed-bean-scope>session</managed-bean-scope>
</managed-bean>
<navigation-rule>
<from-view-id>/universityName.jsp</from-view-id>
<navigation-case>
<from-outcome>displayUniversityDetails</from-outcome>
<to-view-id>/displayUniversityName.jsp</to-view-id>
</navigation-case>
</navigation-rule>
</faces-config>

Create web.xml file

Please use this web.xml file.


<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
<display-name>ShowHideJSFUIComponents</display-name>
<welcome-file-list>
<welcome-file>universityName.jsp</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.faces</url-pattern>
</servlet-mapping>
<context-param>
<description>State saving method: 'client' or 'server' (=default). See JSF Specification 2.5.2</description>
<param-name>javax.faces.STATE_SAVING_METHOD</param-name>
<param-value>client</param-value>
</context-param>
<context-param>
<param-name>javax.servlet.jsp.jstl.fmt.localizationContext</param-name>
<param-value>resources.application</param-value>
</context-param>
<listener>
<listener-class>com.sun.faces.config.ConfigureListener</listener-class>
</listener>
</web-app>

How it will work (Output)

Once you have done with all the coding side deploy the war file to the web server and start it. Please make sure if you have already deployed same war multiple times then delete the temp files. I am using Apache tomcat.

Please type

http://localhost:8081/ShowHideJSFUIComponents/universityName.faces

in browser and hit. You will find the result like this image given below.

This image is showing the output result of hiding and showing JSF attributes.

Thanks for reading this article. Please give your valuable comments.

Share this post:

Related Posts

Leave a Comment