a4j:support onchange event with Internet Explorer
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;
}
}