JSF - commandLink actionListener not executed: problem and
FYI: while trying to figure out the following problem I found postings
on the web about actionListener methods of commandLinks not being
executed. The following describes one such situation and workaround.
There may be a problem with the JSF component tree when the rendered
attribute is used to conditionally display a component such as a
dataTable.
Problem
-------
The actionListener method of an HtmlCommandLink is not
executed when the HtmlCommandLink is defined within an
HtmlDataTable that is rendered conditionally via the
rendered attribute.
Execution Environment
---------------------
Windows XP Pro SP1
JBoss 4.0.3RC2
MyFaces bundled with JBoss in .../deploy/jbossweb-tomcat55.sar/jsf-libs
Workaround
----------
The workaround for this problem is to display the HtmlDataTable
conditionally by setting the style attribute with the CSS visibility property.
For example:
to not display the pane set style="visibility: hidden"
to display the pane set style="visibility: visible"
However, this way of conditionally displaying the dataTable
is less desirable because the HTML is rendered, the network
bandwidth usage is increased and page performance is negatively
affected.
Problem Scenario
--------------------
The problem occurs on a search page that has two panes: one
pane contains the search criteria and the other the search
results. The search criteria are: last name, first name and
department. The results pane contains a dataTable with two
columns: name (last name, first name) and department. Upon
the initial display of the page, the search criteria pane is
displayed, but the search results pane is not. When the
user clicks the search button in the search criteria pane,
the JSF backing bean executes a database query based on the
criteria entered and displays the search results pane with the
results. If the user enters no search criteria a default
query is executed. The user can click commandLinks in the
column headings to sort by either name or department.
Example JSF View (assumes backing Bean named searchBean)
-------------------------------------------------------------------------
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<html>
<head>
<title>My JSF Search Page</title>
<link rel="stylesheet" type="text/css" href="<%= request.getContextPath() %>/styles/styles.css" />
</head>
<body>
<f:view>
<h:panelGrid id="ContentGrid" columns="1" border="0" cellpadding="2">
<f:facet name="header">
<h:outputText value="Enter Search Criteria" />
</f:facet>
<h:form id="criteria-form">
<h:panelGrid id="criteria-panel" columns="2" border="0" cellpadding="2">
<h:outputLabel for="userNameInput" value="Last Name:" />
<h:inputText id="lastNameInput" size="20" maxlength="30"
value="#{searchBean.lastName}" />
<h:outputLabel for="firstNameInput" value="First Name: " />
<h:inputText id="firstNameInput" size="20" maxlength="30"
value="#{searchBean.firstName}" />
<h:outputLabel for="departmentInput" value="Department: " />
<h:inputText id="firstNameInput" size="20" maxlength="30"
value="#{searchBean.firstName}" />
<h:commandButton action="#{searchBean.searchButtonAction}"
value="Search" />
</h:panelGrid>
</h:form>
<%/* This is the JSF code for which the actionListener method of the
HtmlCommandLink is not called. It uses the rendered attribute to
display the search results conditionally. The HTML for the search
form is not rendered */%>
<h:form id="results-form-1" rendered="#{searchBean.renderResults}" >
<h:dataTable id="search-datatable"
binding="#{searchBean.personTable}"
value="#{searchBean.personList}"
var="person"
rows="#{searchBean.rowCount}"
border="0" cellpadding="0" cellspacing="2" width="85%" >
<%/* PERSON NAME: displayed as lastName, firstName */%>
<h:column>
<f:facet name="header">
<h:commandLink id="orderByPersonName"
actionListener="#{searchBean.orderByListener}" >
<h:outputText value = "Person Name" />
</h:commandLink>
</f:facet>
<h:outputText value = "#{person.lastName}, #{person.firstName }" />
</h:column>
<%/* DEPARTMENT */%>
<h:column>
<f:facet name="header">
<h:commandLink id="orderByDepartment"
actionListener="#{searchBean.orderByListener}" >
<h:outputText value = "Department" />
</h:commandLink>
</f:facet>
<h:outputText value = "#{person.department}" />
</h:column>
</h:dataTable>
</h:form>
<%/* This is the JSF code for which the actionListener method of the
HtmlCommandLink is called when you click the link. It uses the
style attribute to display the search results conditionally
by switching the CSS visibility property (either "visibility:hidden"
or "visibility: visible". The Html for the search form is rendered
but not displayed by the browser */%>
<h:form id="results-form-2" style="#{searchBean.searchResultsVisibility}"> >
<h:dataTable id="search-datatable"
binding="#{searchBean.personTable}"
value="#{searchBean.personList}"
var="person"
rows="#{searchBean.rowCount}"
border="0" cellpadding="0" cellspacing="2" width="85%" >
<%/* PERSON NAME: displayed as lastName, firstName */%>
<h:column>
<f:facet name="header">
<h:commandLink id="orderByPersonName"
actionListener="#{searchBean.orderByListener}" >
<h:outputText value = "Person Name" />
</h:commandLink>
</f:facet>
<h:outputText value = "#{person.lastName}, #{person.firstName }" />
</h:column>
<%/* DEPARTMENT */%>
<h:column>
<f:facet name="header">
<h:commandLink id="orderByDepartment"
actionListener="#{searchBean.orderByListener}" >
<h:outputText value = "Department" />
</h:commandLink>
</f:facet>
<h:outputText value = "#{person.department}" />
</h:column>
</h:dataTable>
</h:form>
</h:panelGrid>
</f:view>
</body>
</html>