1 Reply Latest reply on Sep 15, 2009 9:13 PM by Tim Evers

    3.3.1 GA + MyFaces 1.2.7 - AJAX request not working

    Yogesh Bhardwaj Newbie

      Greetings,
      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


        • 1. Re: 3.3.1 GA + MyFaces 1.2.7 - AJAX request not working
          Tim Evers Master

          Can you just try something.... I can't remember if this is true or not but maybe your button needs to be inside the a4j:outputPanel.

          So change your xhtml to this:

          <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>
           <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>
           </a4j:outputPanel>
           </h:form>
          </ui:composition>
          


          This may make no difference at all, but give it a go :)