4 Replies Latest reply on Oct 25, 2007 7:56 PM by Igor Dikhtyaruk

    a4j:support onchange event with Internet Explorer

    Chris Baxter Newbie

      I have noticed some strange behavior when trying to capture onchange events for ui components with Internet Explorer (IE 6). What I have noticed is that the onchange event is not fired when I change a component (like changing the value of a checkbox by clicking in it) unless I click somewhere else on the page (or on another component) after I change the initial component. When using Firefox, the event is fired as expected, which is when I change the component. I have included some sample code below with 3 components (checkbox, radio button and dropdown menu) that have nested a4j:support looking for the onchange event. IN IE, the only time the page updates the correct h:outputText is after I click somewhere else after changing the component. Is this expected behavior?

      Here is the .xhtml page:

      <html xmlns:ui="http://java.sun.com/jsf/facelets"
       xmlns:rich="http://richfaces.ajax4jsf.org/rich"
       xmlns:f="http://java.sun.com/jsf/core"
       xmlns:h="http://java.sun.com/jsf/html"
       xmlns:a4j="https://ajax4jsf.dev.java.net/ajax"
       xmlns:c="http://java.sun.com/jstl/core"
       xmlns:t="http://myfaces.apache.org/tomahawk">
       <ui:composition>
       <h:form id="MyForm">
       <rich:panel>
       <table>
       <tr>
       <td>
       <h:selectBooleanCheckbox id="MyCheckbox"
       value="#{TestBean.checkboxValue}">
       <a4j:support event="onchange" reRender="CheckboxOutput"
       action="#{TestBean.checkboxChanged}"/>
       </h:selectBooleanCheckbox>
       </td>
       <td width="20"/>
       <td>
       <t:selectOneRadio id="MyRadio" layout="spread"
       value="#{TestBean.radioValue}">
       <a4j:support event="onchange"
       action="#{TestBean.radioChanged}"
       reRender="RadioOutput"/>
       <f:selectItem itemLabel="Value 1" itemValue="V1"/>
       <f:selectItem itemLabel="Value 2" itemValue="V2"/>
       </t:selectOneRadio>
       <t:radio for="MyRadio" index="0"/>
       <t:radio for="MyRadio" index="1"/>
       </td>
       <td width="20"/>
       <td>
       <h:selectOneMenu id="MyMenu" value="#{TestBean.menuValue}">
       <a4j:support event="onchange"
       action="#{TestBean.menuChanged}"
       reRender="MenuOutput"/>
       <f:selectItem itemLabel="Please select" itemValue=""/>
       <f:selectItem itemLabel="Menu Val 1" itemValue="MV1"/>
       <f:selectItem itemLabel="Menu Val 2" itemValue="MV2"/>
       </h:selectOneMenu>
       </td>
       </tr>
       </table>
       <br/>
       <table>
       <tr>
       <td>Checkbox Value: <h:outputText id="CheckboxOutput" value="#{TestBean.checkboxValue}"/></td>
       </tr>
       <tr>
       <td>Radio Value: <h:outputText id="RadioOutput" value="#{TestBean.radioValue}"/></td>
       </tr>
       <tr>
       <td>Menu Value: <h:outputText id="MenuOutput" value="#{TestBean.menuValue}"/></td>
       </tr>
       </table>
       </rich:panel>
       </h:form>
       </ui:composition>
      </html>


      And here is the backing bean (session scoped in faces-config.xml):

      public class TestBean {
       private Boolean checkboxValue = false;
       private String radioValue = "V1";
       private String menuValue = "";
      
       public String radioChanged(){
       System.out.println("In radio changed...");
       return "";
       }
      
       public String checkboxChanged(){
       System.out.println("In checkbox changed...");
       return "";
       }
      
       public String menuChanged(){
       System.out.println("In menu changed...");
       return "";
       }
      
       /**
       * Gets the checkboxValue
       * @return Boolean
       */
       public Boolean getCheckboxValue() {
       return checkboxValue;
       }
      
       /**
       * Sets the checkboxValue
       * @param checkboxValue The checkboxValue to set.
       */
       public void setCheckboxValue(Boolean checkboxValue) {
       this.checkboxValue = checkboxValue;
       }
      
       /**
       * Gets the menuValue
       * @return String
       */
       public String getMenuValue() {
       return menuValue;
       }
      
       /**
       * Sets the menuValue
       * @param menuValue The menuValue to set.
       */
       public void setMenuValue(String menuValue) {
       this.menuValue = menuValue;
       }
      
       /**
       * Gets the radioValue
       * @return String
       */
       public String getRadioValue() {
       return radioValue;
       }
      
       /**
       * Sets the radioValue
       * @param radioValue The radioValue to set.
       */
       public void setRadioValue(String radioValue) {
       this.radioValue = radioValue;
       }
      }