Announcement Announcement Module
Collapse
No announcement yet.
a4j:commandButton and partial page re-rendering Page Title Module
Move Remove Collapse
X
Conversation Detail Module
Collapse
  • Filter
  • Time
  • Show
Clear All
new posts

  • a4j:commandButton and partial page re-rendering

    I have an view in a SWF flow which contains:
    • Two a4j:forms that contain a4j:commandButton submission buttons. These two forms are in different tabs of a client-switched tab panel.
    • A a4j:form containing a rich:dataTable and associated rich:dataScroller
    A cut-down version is as follows:
    Code:
    <ui:composition xmlns="http://www.w3.org/1999/xhtml"
    	xmlns:f="http://java.sun.com/jsf/core"
    	xmlns:h="http://java.sun.com/jsf/html"
    	xmlns:ui="http://java.sun.com/jsf/facelets"
    	xmlns:a4j="http://richfaces.org/a4j"
    	xmlns:rich="http://richfaces.org/rich"
    	xmlns:security="http://sourceforge.net/projects/jsf-comp/jsfsecurity"
    	xmlns:sf="http://www.springframework.org/tags/faces"
    	template="/WEB-INF/templates/main.xhtml">
    
    	<ui:param name="title" value="Employee Search" />
    	<ui:define name="body">
    		<rich:panel>
    			<f:facet name="header">Employee Search</f:facet>
    			<rich:panel>
    				<rich:tabPanel switchType="client">
    					<rich:tab label="Quick Search">
    						<a4j:form id="quickSearch">
    							<h:messages id="messages" errorClass="errors" infoClass="info" />
    							<h:panelGrid columns="4" cellspacing="10">
    								<h:outputLabel for="searchString" value="Name" />
    								<h:inputText id="searchString"
    									value="#{searchCriteria.quickSearch}" required="true" />
    								<a4j:commandButton id="quickSearchSubmit" action="quickSearch"
    									styleClass="rich-button default" value="Search"
    									reRender="#{flowRenderFragments}">
    									<ui:debug/>
    								</a4j:commandButton>
    							</h:panelGrid>
    						</a4j:form>
    					</rich:tab>
    					[... other tab omitted for berevity...]
    			</rich:panel>
    
    			<rich:separator height="10px" lineType="none" />
    			<rich:panel>
    				<f:facet name="header">Results</f:facet>
    				<a4j:form id="searchResults">
    					<rich:dataTable id="peopleList" rows="10" columnClasses="col"
    						onRowMouseOver="this.style.backgroundColor='#{a4jSkin.tableRowHighlightColor}'"
    						onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'"
    						value="#{peopleDataModel}" var="person" width="100%">
    						[... table content omitted for berevity ...]
    					</rich:dataTable>
    					<rich:spacer height="30" />
    					<rich:datascroller for="peopleList" />
    				</a4j:form>
    			</rich:panel>
    		</rich:panel>
    	</ui:define>
    </ui:composition>
    The a4j:commandButtons initiate a web-flow transition like this:
    Code:
    <!-- Quick search: loginId OR givenName OR surname -->
    <transition on="quickSearch">
    	<!-- Quick searches are always in OR mode -->
    	<set name="flowScope.searchCriteria.andMode" value="false"/>
    	<!-- Perform the search -->
    	<evaluate expression="personService.search(searchCriteria,pagingCriteria)" result="viewScope.searchResult"/>
    	<evaluate expression="viewScope.searchResult.result.resultsList" result="viewScope.peopleDataModel" result-type="dataModel"/>
    	<render fragments="quickSearch:messages,searchResults:peopleList"/>
    </transition>
    When I click on the quickSearch button, the transition is initiated, but the section content is not replaced. a4j:log shows the following output:
    Code:
    debug[14:45:35,389]: Have Event [object Object] with properties: target: undefined, srcElement: [object], type: click
    debug[14:45:35,389]: NEW AJAX REQUEST !!! with form :quickSearch
    debug[14:45:35,389]: Append text control quickSearch:searchString with value [jl] and value attribute [jl]
    debug[14:45:35,389]: Append hidden control quickSearch with value [quickSearch] and value attribute [quickSearch]
    debug[14:45:35,389]: Append hidden control autoScroll with value [] and value attribute []
    debug[14:45:35,405]: parameter quickSearch:quickSearchSubmit with value quickSearch:quickSearchSubmit
    debug[14:45:35,405]: Start XmlHttpRequest
    debug[14:45:35,405]: Reqest state : 1
    debug[14:45:35,420]: QueryString: AJAXREQUEST=_viewRoot&quickSearch%3AsearchString=jl&quickSearch=quickSearch&autoScroll=&quickSearch%3AquickSearchSubmit=quickSearch%3AquickSearchSubmit&
    debug[14:45:35,420]: Reqest state : 1
    debug[14:45:35,530]: Reqest state : 2
    debug[14:45:35,530]: Reqest state : 3
    debug[14:45:35,530]: Reqest state : 4
    debug[14:45:35,530]: Reqest end with state 4
    debug[14:45:35,545]: Response  with content-type: text/html;charset=UTF-8
    debug[14:45:35,545]: Full response content: <script src="/WTD-DAS/a4j_3_2_1-SNAPSHOTorg.ajax4jsf.javascript.AjaxScript.jsf" type="text/javascript"></script><script src="/WTD-DAS/a4j_3_2_1-SNAPSHOTorg.ajax4jsf.javascript.PrototypeScript.jsf" type="text/javascript"></script><script src="/WTD-DAS/a4j_3_2_1-SNAPSHOTorg/richfaces/renderkit/html/scripts/data-table.js.jsf" type="text/javascript"></script><link href="/WTD-DAS/a4j_3_2_1-SNAPSHOTcss/table.xcss/DATB/eAGTOL44L3T5DGkAEMUDoA__.jsf" type="text/css" rel="stylesheet" /><table class="dr-table rich-table " id="searchResults:peopleList" border="0" cellpadding="0" cellspacing="0" width="100%"><colgroup span="9"></colgroup><thead class="dr-table-thead"><tr class="dr-table-header rich-table-header  "><td id="searchResults:peopleList:j_id59" class="dr-table-headercell rich-table-headercell ">Photo</td><td
    [...content omitted for berevity...]
    <a href="#" onclick="if(typeof jsfcljs == 'function'){jsfcljs(document.forms['searchResults'],'searchResults:peopleList:0:j_id93,searchResults:peopleList:0:j_id93,loginId,williamsjl','');}return false">View</a></td></tr></tbody></table><meta name="Ajax-Update-Ids" content="quickSearch:messages,searchResults:peopleList" /><span id="ajax-view-state"></span><meta id="Ajax-Response" name="Ajax-Response" content="true" />
    debug[14:45:35,545]: Header Ajax-Expired not found, search in <meta>
    error[14:45:35,545]: Error parsing XML
    error[14:45:35,545]: Parse Error: Document is empty
    Clearly I am doing something wrong, but I can't seem to work out what it is. Has anyone seen this before?

    I notice that the
    Code:
    <meta id="Ajax-Response" name="Ajax-Response" content="true">
    comes after the actual content, which looks a bit odd - is this normal?

    I am using:
    • RichFaces 3.2.1.GA
    • JSF 1.2_07
    • Spring Web Flow 2.0.3.RELEASE
    • Spring 2.5.5
    • Tomcat 6

  • #2
    Looking at the generated AJAX response document, it also appears that there is no top-level <html> element. I'd guess that is the reason why the document can't be parsed.

    Now, does anyone know how I can debug the generation of this AJAX response from the SWF side?

    Comment


    • #3
      Solution

      I have found the solution.

      The RichFaces filter must be applied to both the Faces servlet and the Spring MVC servlet to properly post-process AJAX responses.

      Without it applied to the Spring MVC servlet, AJAX responses don't have a top-level element.

      Comment

      Working...
      X