reRendering a bound h:panelGroup
davidintx Sep 20, 2007 6:10 PMUsing Richfaces-3.1.1-SNAPSHOT (specifically, the version included in Seam-2.0.0.CR1 released a few days ago)
I have three items on a page
A. A h:selectOneMenu with a id="pickColumn" and, in the a:support tag, reRender="pickOperator"
B. Another h:selectOneMenu with a id="pickOperator" and, in the a:support tag, reRender="pickValue"
C. A h:panelGroup with an id of "pickValue" which can contain text fields, dropdowns, or some combination of both. This h:panelGroup is bound to a backing bean via binding = "#{userAccountDisplay.searchValuePanel}". The getSearchValuePanel method returns an HtmlPanelGroup
Currently, when the "pickColumn" dropdown is changed (event="onchange"), the choices in the "pickOperator" dropdown are updated via a4j with new values, which is what I expect. However, when the "pickOperator" dropdown column is changed, the contents of the "pickValue" panelGroup are not updated. Below is the xhtml page I am using, followed by a description of what I've already tried via code changes, debugging, and logging.
<h:selectOneMenu id="pickColumn" value="#{userAccountSearch.searchColumn}"> <a:support event="onchange" reRender="pickOperator" ajaxSingle="true" /> <s:selectItems value="#{userAttributeDefinitionList}" var="userAttributeDefinition" label="#{userAttributeDefinition.label}" /> <s:convertEntity /> </h:selectOneMenu> <h:selectOneMenu id="pickOperator" value="#{userAccountSearch.operator}" converter="#{classConverter}"> <a:support event="onchange" reRender="pickValue" ajaxSingle="true" /> <s:selectItems value="#{userAccountSearch.operators}" var="operator" label="#{messages[operator.getName()]}" /> </h:selectOneMenu> <h:panelGroup id="pickValue" binding = "#{userAccountDisplay.searchValuePanel}"/>
I have tried removing reRender="pickValue" from the pickOperator element, and instead wrapping the h:panel with <a:outputPanel ajaxRendered="true"> but that didn't help.
I attached a debugger, and it turns out that the getSearchValuePanel method isn't actually even being called when the pickOperator dropdown is changed.
When I submitted the form via non ajax methods, everything in the view updated properly--that is, the h:panelGroup displayed the appropriate items for what was contained in the pickOperator dropdown.
Here is the contents of the log, when the "pickOperator" dropdown is changed: (I've manually broken up some of the long lines, to avoid excess horizontal scrolling )
debug[16:26:47,603]: Have Event [object Object] with properties: target: [object HTMLSelectElement], srcElement: undefined, type: change debug[16:26:47,603]: NEW AJAX REQUEST !!! with form :main debug[16:26:47,603]: Append hidden control main with value [main] and value attribute [main] debug[16:26:47,603]: Append select-one control main:pickColumn with value [2] and value attribute [null] debug[16:26:47,603]: Append select-one control main:pickOperator with value [com.hrworx.formworx.model.query.operator.date.DateIsInTheLast] and value attribute [null] debug[16:26:47,603]: Append text control main:j_id32 with value [] and value attribute [null] debug[16:26:47,603]: Append hidden control javax.faces.ViewState with value [_id4] and value attribute [_id4] debug[16:26:47,603]: Append select-one control main:pickOperator with value [com.hrworx.formworx.model.query.operator.date.DateIsInTheLast] and value attribute [null] debug[16:26:47,603]: parameter main:j_id10 with value main:j_id10 debug[16:26:47,603]: Start XmlHttpRequest debug[16:26:47,603]: Reqest state : 1 debug[16:26:47,603]: QueryString: AJAXREQUEST=_viewRoot&main=main&main%3ApickColumn=2&main%3ApickOperator=com.hrworx.formworx.model.query.operator.date.DateIsInTheLast &main%3ApickOperator=com.hrworx.formworx.model.query.operator.date.DateIsInTheLast&main%3Aj_id32=&javax.faces.ViewState=_id4 &main%3Aj_id10=main%3Aj_id10& debug[16:26:47,603]: Reqest state : 1 debug[16:26:47,783]: Reqest state : 2 debug[16:26:47,783]: Reqest state : 3 debug[16:26:47,783]: Reqest state : 4 debug[16:26:47,783]: Reqest end with state 4 debug[16:26:47,783]: Response with content-type: text/xml;charset=UTF-8 debug[16:26:47,783]: Full response content: <?xml version="1.0"?> <html xmlns="http://www.w3.org/1999/xhtml"><head><title></title> <script type="text/javascript" src="/formworx-war/a4j_3_1_0-SNAPSHOTorg.ajax4jsf.javascript.AjaxScript"> </script></head> <body><span id="main:pickValue"><input type="text" name="main:j_id32" value="" /></span><meta name="Ajax-Update-Ids" content="main:pickValue" /> <span id="ajax-view-state"><input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="_id4" /></span> <meta id="Ajax-Response" name="Ajax-Response" content="true" /></body></html> debug[16:26:47,783]: Header Ajax-Expired not found, search in <meta> debug[16:26:47,783]: search for elements by name 'meta' in element #document debug[16:26:47,783]: getElementsByTagName found 2 debug[16:26:47,783]: Find <meta name='Ajax-Update-Ids' content='main:pickValue'> debug[16:26:47,783]: Find <meta name='Ajax-Response' content='true'> debug[16:26:47,783]: Header Ajax-Update-Ids not found, search in <meta> debug[16:26:47,783]: search for elements by name 'meta' in element #document debug[16:26:47,783]: getElementsByTagName found 2 debug[16:26:47,783]: Find <meta name='Ajax-Update-Ids' content='main:pickValue'> debug[16:26:47,783]: Update page by list of rendered areas from response main:pickValue debug[16:26:47,783]: search for elements by name 'script' in element #document debug[16:26:47,783]: getElementsByTagName found 1 debug[16:26:47,793]: <script> in response with src=/formworx-war/a4j_3_1_0-SNAPSHOTorg.ajax4jsf.javascript.AjaxScript debug[16:26:47,793]: Such element exist in document debug[16:26:47,793]: search for elements by name 'link' in element #document debug[16:26:47,793]: getElementsByTagName found 0 debug[16:26:47,793]: Attempt to update part of page for Id: main:pickValue debug[16:26:47,793]: call getElementById for id= main:pickValue debug[16:26:47,793]: Replace content of node by replaceChild() debug[16:26:47,793]: search for elements by name 'script' in element span debug[16:26:47,793]: getElementsByTagName found 0 debug[16:26:47,793]: Scripts in updated part count : 0 debug[16:26:47,793]: Update part of page for Id: main:pickValue successful debug[16:26:47,793]: call getElementById for id= ajax-view-state debug[16:26:47,793]: Hidden JSF state fields: [object HTMLSpanElement] debug[16:26:47,793]: Namespace for hidden view-state input fields is undefined debug[16:26:47,793]: search for elements by name 'input' in element span debug[16:26:47,793]: getElementsByTagName found 1 debug[16:26:47,793]: Replace value for inputs: 3 by new values: 1 debug[16:26:47,793]: Input in response: javax.faces.ViewState debug[16:26:47,793]: Found same input on page with type: hidden debug[16:26:47,803]: search for elements by name 'INPUT' in element span debug[16:26:47,803]: getElementsByTagName found 0 debug[16:26:47,803]: Replace value for inputs: 3 by new values: 0 debug[16:26:47,803]: call getElementById for id= _A4J.AJAX.focus debug[16:26:47,803]: No focus information in response debug[16:26:47,803]: call getElementById for id= org.ajax4jsf.oncomplete
Any suggestions regarding how I can update the panelGroup via ajax would be appreciated.