3.3.1 GA + MyFaces 1.2.7 - AJAX request not working
Hello all,
Environment details:
Windows XP
JBoss 4.3.0
JDK 6
JSF 1.2
RichFaces 3.3.1 GA
MyFaces 1.2.7
We were using RichFaces 3.1.0 in our application and upgraded to 3.3.1 GA. I am facing a weird issue with AJAX requests not going through when a dropdown's value on the page is changed. I was able to reproduce the issue with the following trimmed down code:
This is a very simple test: The page has a dropdown that fetches values from a method in the backing bean. This dropdown does not trigger any AJAX events on change. There is an AJAX output panel that has an HTML fieldset containing a RichFaces tree. Then there is an AJAX command button, which when clicked, adds the value of the button (which in this case is string 'IF') as a node of the tree, and refreshes the AJAX output panel. The addition of node and tree construction is all fine.
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:s="http://jboss.com/products/seam/taglib"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:rich="http://richfaces.org/rich"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:richx="http://richfaces.org/richx">
<h:form>
<f:loadBundle id="myB" basename="MyBundle" var="myBundle" />
<h:selectOneMenu value="#{myBackingBean.dataObject.eventId}" id="eventSelOne">
<f:selectItem id="eventDefault" itemLabel="" itemValue="" />
<f:selectItems id="eventSelItems" value="#{myBackingBean.events}" />
</h:selectOneMenu>
<br/>
<a4j:outputPanel id="ifTreeAjaxPanel">
<fieldset class="fieldset" style="width:70%; height:200px">
<legend><b><h:outputText id="formulaTreeLegend" value="#{myBundle.Formula}" /></b></legend>
<rich:tree style="width:350px" id="ifTree" switchType="client" value="#{myBackingBean.dataObject.formulaRootNode}" var="formulaRootNode"
ajaxSubmitSelection="true" nodeSelectListener="#{myBackingBean.processNodeSelection}">
<rich:treeNode>
<h:outputText value="#{formulaRootNode}"/>
</rich:treeNode>
</rich:tree>
</fieldset>
</a4j:outputPanel>
<br/>
<a4j:commandButton id="ifButton" value="#{myBundle.If_U}" action="#{myBackingBean.addNewStatement}"
reRender="ifTreeAjaxPanel">
<a4j:actionparam id="ifAP" name="ifActionParam" value="#{myBundle.If_S}" assignTo="#{myBackingBean.statementActionType}" />
</a4j:commandButton>
</h:form>
</ui:composition>
If I don't select a value in the dropdown, and click the button, the node gets added fine. But if I change the value in the dropdown, the server does not even get the AJAX request. And I do not see any javascript errors in Firefox Error Console. The HTML code that gets generated in JBoss 4.3.0 is as follows:
<html xmlns="http://www.w3.org/1999/xhtml"><head><link class="component" href="/a4j/s/3_3_1.GAorg/richfaces/renderkit/html/css/basic_classes.xcss/DATB/eAELXT5DOhSIAQ!sA18_.jsflps" rel="stylesheet" type="text/css" /><link class="component" href="/a4j/s/3_3_1.GAorg/richfaces/renderkit/html/css/extended_classes.xcss/DATB/eAELXT5DOhSIAQ!sA18_.jsflps" media="rich-extended-skinning" rel="stylesheet" type="text/css" /><script src="/a4j/g/3_3_1.GAorg.ajax4jsf.javascript.PrototypeScript.jsflps" type="text/javascript"></script><script src="/a4j/g/3_3_1.GAorg/richfaces/renderkit/html/scripts/json/json-mini.js.jsflps" type="text/javascript"></script><script src="/a4j/g/3_3_1.GAorg.ajax4jsf.javascript.DnDScript.jsflps" type="text/javascript"></script><script src="/a4j/g/3_3_1.GAorg/richfaces/renderkit/html/scripts/utils.js.jsflps" type="text/javascript"></script><script src="/a4j/g/3_3_1.GAorg/richfaces/renderkit/html/scripts/json/json-dom.js.jsflps" type="text/javascript"></script><script src="/a4j/g/3_3_1.GAorg/richfaces/renderkit/html/scripts/dnd/dnd-common.js.jsflps" type="text/javascript"></script><script src="/a4j/g/3_3_1.GAorg/richfaces/renderkit/html/scripts/dnd/dnd-draggable.js.jsflps" type="text/javascript"></script><script src="/a4j/g/3_3_1.GAorg/richfaces/renderkit/html/scripts/dnd/dnd-dropzone.js.jsflps" type="text/javascript"></script><script src="/a4j/g/3_3_1.GAorg.ajax4jsf.javascript.AjaxScript.jsflps" type="text/javascript"></script><script src="/a4j/g/3_3_1.GAorg/ajax4jsf/javascript/scripts/form.js.jsflps" type="text/javascript"></script><script src="/a4j/g/3_3_1.GAorg/richfaces/renderkit/html/scripts/form.js.jsflps" type="text/javascript"></script><script src="/a4j/g/3_3_1.GAorg/richfaces/renderkit/html/scripts/events.js.jsflps" type="text/javascript"></script><script src="/a4j/g/3_3_1.GAorg/richfaces/renderkit/html/scripts/tree.js.jsflps" type="text/javascript"></script><script src="/a4j/g/3_3_1.GAorg/richfaces/renderkit/html/scripts/tree-selection.js.jsflps" type="text/javascript"></script><script src="/a4j/g/3_3_1.GAorg/richfaces/renderkit/html/scripts/tree-item.js.jsflps" type="text/javascript"></script><script src="/a4j/g/3_3_1.GAorg/richfaces/renderkit/html/scripts/tree-item-dnd.js.jsflps" type="text/javascript"></script><script src="/a4j/g/3_3_1.GAorg/richfaces/renderkit/html/scripts/drag-indicator.js.jsflps" type="text/javascript"></script><script src="/a4j/g/3_3_1.GAorg/richfaces/renderkit/html/scripts/browser_info.js.jsflps" type="text/javascript"></script><link class="component" href="/a4j/s/3_3_1.GAorg/richfaces/renderkit/html/css/dragIndicator.xcss/DATB/eAELXT5DOhSIAQ!sA18_.jsflps" rel="stylesheet" type="text/css" /><link class="component" href="/a4j/s/3_3_1.GAcss/tree.xcss/DATB/eAELXT5DOhSIAQ!sA18_.jsflps" rel="stylesheet" type="text/css" /><script type="text/javascript">window.RICH_FACES_EXTENDED_SKINNING_ON=true;</script><script src="/a4j/g/3_3_1.GAorg/richfaces/renderkit/html/scripts/skinning.js.jsflps" type="text/javascript"></script></head><form id="j_id0" name="j_id0" method="post" action="/tcs/estimation/formula/RichTest.xhtml" enctype="application/x-www-form-urlencoded"><input type="hidden" name="uniqueToken" value="8" /><select id="j_id0:costEventSelOne" name="j_id0:costEventSelOne" size="1"> <option value="" selected="selected"></option> <option value="11">Demurrage and Detention Cost</option></select>
<br />
<br /><span id="j_id0:ifTreeAjaxPanel">
<fieldset class="fieldset" style="width:70%; height:200px">
<legend><b><span id="j_id0:formulaTreeLegend">Formula</span></b></legend><div class="dr-tree rich-tree " id="j_id0:ifTree" style="width:350px" xmlns:rich="http://richfaces.ajax4jsf.org/rich"><div id="j_id0:ifTree:childs"></div><input type="hidden" id="j_id0:ifTree:input" name="j_id0:ifTree:input" value="" /><script type="text/javascript"><!--
(function() {
var tree = new Tree("j_id0:ifTree", "j_id0:ifTree:input", "client",
{
onselect: "",
onexpand: "",
oncollapse: "",
oncontextmenu: ""
},
function(event) {
A4J.AJAX.Submit('_viewRoot','j_id0',event,{'similarityGroupingId':'j_id0:ifTree','parameters':{'j_id0:ifTree:selectedNode':event.selectedNode} ,'actionUrl':'/tcs/estimation/formula/RichTest.xhtml'} ); return false;
},
{'showConnectingLines':true}
);
tree.drop = function(event,drag){var options = {'similarityGroupingId':'j_id0:ifTree','parameters':{'j_id0:ifTree':'j_id0:ifTree'} ,'actionUrl':'/tcs/estimation/formula/RichTest.xhtml'} ;options.parameters['dropTargetId'] = 'j_id0:ifTree';Object.extend(options.parameters, drag.getParameters());var dzOptions = this.getDropzoneOptions(); if (dzOptions.ondrop) { if (!dzOptions.ondrop.call(this, event)) return; };A4J.AJAX.Submit('_viewRoot','j_id0',event,options);};
}());
//--></script><div id="j_id0:ifTree:script" class="dr-tree-h-script"><script type="text/javascript"><!--
//--></script></div></div>
</fieldset></span>
<br />
<br /><input id="j_id0:ifButton" name="j_id0:ifButton" onclick="A4J.AJAX.Submit('_viewRoot','j_id0',event,{'similarityGroupingId':'j_id0:ifButton','parameters':{'ifActionParam':'If','j_id0:ifButton':'j_id0:ifButton'} ,'actionUrl':'/tcs/estimation/formula/RichTest.xhtml'} );return false;" value="IF" type="button" /><input type="hidden" name="j_id0_SUBMIT" value="1" /><input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="8D/UFkDJ2hOW7VNEy6qkRXDa92KhYQ+rQXnY3wve8UI7Fw8XfwM7G4Sx6plfZW9N3sFsCddroBmMGxgf4MCvNixjuVN8emh8nwsvi7SCvu8mjXtIcoIWIAC47ORfN+ct" /></form></html>
The same code works in the following environment:
Windows XP
WebSphere 6.0
JDK 5
JSF 1.1
RichFaces 3.1.0
MyFaces 1.1.4
In that environment, the generated HTML code is as follows:
<html xmlns="http://www.w3.org/1999/xhtml"><head><link rel='stylesheet' type='text/css' href='/a4j_3_1_0org/richfaces/renderkit/html/css/dragIndicator.xcss/DATB/eAFL3LxbGwAFQgH7.jsflps' /><link rel='stylesheet' type='text/css' href='/a4j_3_1_0css/tree.xcss/DATB/eAFL3LxbGwAFQgH7.jsflps' /><script type='text/javascript' src='/a4j_3_1_0org.ajax4jsf.javascript.PrototypeScript.jsflps'></script><script type='text/javascript' src='/a4j_3_1_0org/richfaces/renderkit/html/scripts/json/json-mini.js.jsflps'></script><script type='text/javascript' src='/a4j_3_1_0org.ajax4jsf.javascript.DnDScript.jsflps'></script><script type='text/javascript' src='/a4j_3_1_0org/richfaces/renderkit/html/scripts/utils.js.jsflps'></script><script type='text/javascript' src='/a4j_3_1_0org/richfaces/renderkit/html/scripts/json/json-dom.js.jsflps'></script><script type='text/javascript' src='/a4j_3_1_0org/richfaces/renderkit/html/scripts/dnd/dnd-common.js.jsflps'></script><script type='text/javascript' src='/a4j_3_1_0org/richfaces/renderkit/html/scripts/dnd/dnd-draggable.js.jsflps'></script><script type='text/javascript' src='/a4j_3_1_0org/richfaces/renderkit/html/scripts/dnd/dnd-dropzone.js.jsflps'></script><script type='text/javascript' src='/a4j_3_1_0org.ajax4jsf.javascript.AjaxScript.jsflps'></script><script type='text/javascript' src='/a4j_3_1_0org/ajax4jsf/javascript/scripts/form.js.jsflps'></script><script type='text/javascript' src='/a4j_3_1_0org/richfaces/renderkit/html/scripts/form.js.jsflps'></script><script type='text/javascript' src='/a4j_3_1_0org/richfaces/renderkit/html/scripts/events.js.jsflps'></script><script type='text/javascript' src='/a4j_3_1_0org/richfaces/renderkit/html/scripts/tree.js.jsflps'></script><script type='text/javascript' src='/a4j_3_1_0org/richfaces/renderkit/html/scripts/tree-selection.js.jsflps'></script><script type='text/javascript' src='/a4j_3_1_0org/richfaces/renderkit/html/scripts/tree-item.js.jsflps'></script><script type='text/javascript' src='/a4j_3_1_0org/richfaces/renderkit/html/scripts/tree-item-dnd.js.jsflps'></script><script type='text/javascript' src='/a4j_3_1_0org/richfaces/renderkit/html/scripts/drag-indicator.js.jsflps'></script></head><form id="_id0" name="_id0" method="post" action="/tcs/estimation/RichTest.xhtml" enctype="application/x-www-form-urlencoded"><input type="hidden" name="uniqueToken" value="3" /><select id="_id0:costEventSelOne" name="_id0:costEventSelOne" size="1"> <option value="" selected="selected"></option> <option value="11">Demurrage and Detention Cost</option></select>
<br />
<br /><span id="_id0:ifTreeAjaxPanel">
<fieldset class="fieldset" style="width:70%; height:200px">
<legend><b><span id="_id0:formulaTreeLegend">Formula</span></b></legend><div class="dr-tree rich-tree " id="_id0:ifTree" style="width:350px" xmlns:rich="http://richfaces.ajax4jsf.org/rich" rows="0"><input type="hidden" id="_id0:ifTree:input" name="_id0:ifTree:input" value="" /><script type="text/javascript"><!--
var Richfaces_Tree__id0_ifTree =
new Tree("_id0:ifTree", "_id0:ifTree:input", "client",
{
onselect: "",
onexpand: "",
oncollapse: ""
},
function(event) {
A4J.AJAX.Submit('_viewRoot','_id0',event,{'parameters':{'_id0:ifTree:selectedNode':event.selectedNode} ,'actionUrl':'/tcs/estimation/RichTest.xhtml'} ); return false;
},
false,
true
);
Richfaces_Tree__id0_ifTree.drop = function(event,drag){var options = {'parameters':{'_id0:ifTree':'_id0:ifTree'} ,'actionUrl':'/tcs/estimation/RichTest.xhtml'} ;options.parameters['dropTargetId'] = '_id0:ifTree';Object.extend(options.parameters,drag.getParameters());var dzOptions = this.getDropzoneOptions(); if (dzOptions.ondrop) { if (!dzOptions.ondrop.call(this, event)) return; };A4J.AJAX.Submit('_viewRoot','_id0',event,options);};
//--></script><div id="_id0:ifTree:script"><script type="text/javascript"><!--
//--></script></div></div>
</fieldset></span>
<br />
<br /><input id="_id0:ifButton" name="_id0:ifButton" onclick="A4J.AJAX.Submit('_viewRoot','_id0',event,{'parameters':{'ifActionParam':'If','_id0:ifButton':'_id0:ifButton'} ,'actionUrl':'/tcs/estimation/RichTest.xhtml'} );return false;" value="IF" type="button" /><input type="hidden" name="_id0_SUBMIT" value="1" /><input type="hidden" name="jsf_sequence" value="1" /></form></html>
I understand that this might not necessarily be a RichFaces issue, but I would greatly appreciate if anyone could provide some feedback.
Thanks.