ui:repeat + AJAX
We have a list to be displayed under a panel of the screen where all the code in which the fields are repeatable are kept under a different Facelet file. While I am trying to render an image based on the listener's action for an ajax event I am getting some problem to update the image with ID as JSF is generating an ID with the index in the middle due to the use of <ui:repeat> like so repeatForm:repeat:2:redimage.
This is the main page:
<!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:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<h:head>
<title>Repeat Test Demo</title>
</h:head>
<h:body>
<h:form id="repeatForm">
<ui:repeat id ="repeat" value="#{listBean.xyzList}" var="repeatListVar">
<p:panel id="genLiabPanelRender">
<ui:include src="MyScreen.xhtml" />
</p:panel>
</ui:repeat>
</h:form>
</h:body>
</html>
This Facelet is repeatable based on the list size within the panel.
MyScreen.xhtml this is the include Facelet file:
<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:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.prime.com.tr/ui">
<h:body class="body">
<h:panelGrid columns="4" border="0" width="90%">
<h:panelGroup style="display:block;text-align:left;width: 320px">
<h:selectBooleanCheckbox value="#{repeatListVar.primaryPolicyInd}" />
<h:outputText value="#{label.primaryCov}" />
</h:panelGroup>
<h:panelGroup style="display:block;text-align:left;width: 240px">
<h:selectBooleanCheckbox value="#{repeatListVar.abcInd1}" />
<h:outputText value="#{label.commGenLiab}" />
</h:panelGroup>
<h:panelGroup style="display:block;text-align:left;width: 180px">
<h:outputText value=" #{label.eachOccur}" style="text-align:left" />
</h:panelGroup>
<h:panelGroup style="display:block;text-align:left;width: 130px">
<p:inputMask mask="#{label.limitAmtMask}" id="genLiabEachOccAmt"
value="#{repeatListVar.a25GLEOAmt}" required="true"
style="width: 90px">
<f:ajax event="blur" render="redimage" listener="#{repeatListVar.testA25GLEOAmt}"/>
</p:inputMask>
<h:graphicImage id="redimage" url="/images/icons/redIcon.png" rendered="#{repeatListVar.testA25GLEOAmtInd}" />
</h:panelGroup>
This ends up generating IDs for the <h:outputText> that look like: repeatForm:repeat:2:redimage. But because we're using the <f:ajax> tag, we only need to specify "redimage". The tag takes care of the work of finding out what the real ID is.
We are calling a method in the listener and set the value of boolean indicator to either true or false which is false by default. The indicator is used to render the image.
But when we are using this <f:ajax> t开发者_JAVA百科o render the image based on the indicator value, I am getting the error
malformedXML: During update repeatForm:repeat:2:redimage not found
How is this caused and how can I solve this?
This should work. I see only 2 possible causes:
Your bean is request scoped and does not preserve the
<ui:repeat>value. Fix the bean constructor's job and/or put the bean in the view scope.Your HTML output is syntactically invalid and is therefore confusing the JavaScript code who is responsible for updating the HTML DOM tree. You should not use
<html>and<h:body>in the include file. It would be duplicated in the HTML output. You should only use it in the master page. The include page should look like this:<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"> <h:panelGrid columns="4" border="0" width="90%"> ... </h:panelGrid> </ui:composition>Do not duplicate
<html>,<h:head>and/or<h:body>in there.
加载中,请稍侯......
精彩评论