3.3.1 GA + MyFaces 1.2.7 - AJAX request not working
ybh6336 Sep 14, 2009 10:17 PMGreetings,
Apologies for the bad formatting in previous post, please ignore that one:
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 any feedback.
Thanks