0 Replies Latest reply on Apr 14, 2006 10:26 AM by Robert Swarr

    JSF -  commandLink actionListener not executed: problem and

    Robert Swarr Newbie

      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>