0 Replies Latest reply on Jun 16, 2011 3:41 AM by horowitzathome

Correct rendering of a4j:outputPanel with ajaxRendered=true obviously depends on the position where it is defined in xhtml

horowitzathome Jun 16, 2011 3:41 AM

I run into the following problem. How a component gets updated obviously depends on the position where the component is defined in the xhtml file in regard of ajaxRendered=true within an a4j:outputPanel.

Case 1 which does not work correctly:

a4j:outputPanel with ajaxRendered=true and an h:outputText

rich:autocomplete

a4j:outputPanel with ajaxRendered=true and an h:outputText

The outputText above autocomplete is always updated with the second last content (this is not correct)
The outputText below the autocomplete is always updated with the current content (this is correct)

Case 2 which does work correctly

rich:autocomplete

a4j:outputPanel with ajaxRendered=true and an h:outputText

Both outputText elements are updated with the current content.

Szenario:

The possible values for autocomplete are “sugg1, sugg2 and sugg3”. Assume someone has entered already the text “sug”.

Both outputText fields show “Number of suggestions = 3”.

Now continue input with “sugg”.

Still both outputText fields show “Number of suggestions = 3”.

Now continue input with “sugg1”.

The outputField above autocomplete still shows “Number of suggestions = 3” (which is wrong).

The outputField below autocomplete shows “Number of suggestions = 1” (which is correct).

Now delete the “1” with backspace, i.e. the entry field now contains “sugg” again.

The outputField above autocomplete still shows “Number of suggestions = 1” (which is wrong and obviously is the second last message).

The outputField below autocomplete shows “Number of suggestions = 3” (which is correct).

Resume: obviously, if the outputText is declared above the autocomplete it is somehow not correctly taken into account.

Is there any restriction regarding ajaxRendered=true at which position in the xhtml a component is positioned?

Environment:

MyFaces

Richfaces Version 4 with

richfaces-components-api-4.1.0-20110610.221051-49
richfaces-components-ui-4.1.0-20110610.221051-49
richfaces-core-api-4.1.0-20110610.220429-51
richfaces-core-impl-4.1.0-20110610.220429-50
cssparser-0.9.5
guava-r08
sac-1.3

BeanCode

@ManagedBean(name = "testBean")
@SessionScoped
public class TestBean {

private List<String> testSuggs = new ArrayList<String>();
private String testSuggSel;
private String someMsg = "No message";

public TestBean() {
testSuggs.add("sugg1");
testSuggs.add("sugg2");
testSuggs.add("sugg3");
}

public Collection<String> acTestAction(String suggest) {
String suggestAsString = (String) suggest;

List<String> retSuggs = new ArrayList<String>();

for(String sugg : testSuggs) {
   if(sugg.startsWith(suggestAsString)) {
    retSuggs.add(sugg);
   }
}

someMsg = "Number of suggestions = " + retSuggs.size();

return retSuggs;
}
}

XHTML which does not work correctly

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:c="http://java.sun.com/jstl/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:rich="http://richfaces.org/rich"
xmlns:a4j="http://richfaces.org/a4j">
<h:head>
<title>Rich Test Main</title>
</h:head>
<h:body>

<f:view>

<rich:panel id="mainAjaxRenderTestPanel">

<h:form>

    <a4j:outputPanel ajaxRendered="true" id="msg2">
     <h:outputText id="untMsg2" value="#{testBean.someMsg}" />
    </a4j:outputPanel>

    <rich:autocomplete id="acTest" value="#{testBean.testSuggSel}"
     autocompleteMethod="#{testBean.acTestAction}" autofill="false"
     mode="ajax" />

    <a4j:outputPanel ajaxRendered="true" id="msg1">
     <h:outputText id="untMsg1" value="#{testBean.someMsg}" />
    </a4j:outputPanel>

</h:form>

</rich:panel>

</f:view>

</h:body>
</html>

XHTML which works correctly (only partial, i.e. the changes)

<h:form>

    <rich:autocomplete id="acTest" value="#{testBean.testSuggSel}"
     autocompleteMethod="#{testBean.acTestAction}" autofill="false"
     mode="ajax" />

<a4j:outputPanel ajaxRendered="true" id="msg2">

<h:outputText id="untMsg2" value="#{testBean.someMsg}" />

</a4j:outputPanel>

    <a4j:outputPanel ajaxRendered="true" id="msg1">
     <h:outputText id="untMsg1" value="#{testBean.someMsg}" />
    </a4j:outputPanel>

</h:form>