Okay, I've done that, and I understand how to use component ids with ajax (at least I think so), but something's not working for me. Check this out. Sorry for the long listings, but I want to show everything. You can pretty much just look at the bold text.
I have a composite component, map.xhtml
<!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:f="
http://java.sun.com/jsf/core"
xmlns:h="
http://java.sun.com/jsf/html"
xmlns:ui="
http://java.sun.com/jsf/facelets"
xmlns:composite="
http://java.sun.com/jsf/composite"
xmlns:places="
http://java.sun.com/jsf/composite/components/places">
<!-- INTERFACE -->
<composite:interface>
</composite:interface>
<!-- IMPLEMENTATION -->
<composite:implementation>
<h:outputScript library="javascript/prototype" name="prototype-1.6.0.2.js"/>
<h:outputScript library="components/places" name="util.js"/>
<div class="map" id="mapDiv">
<div style="padding-bottom: 10px;">
<h:outputText value="#{cc.attrs.title}"
style="color: blue"/>
</div>
<h:panelGrid id="grid" columns="1">
<h:panelGroup id="group">
<div style="padding-left: 5px;">
<i>
<h:outputText value="#{cc.parent.attrs.location.streetAddress},"/>
</i>
<h:outputText value=" #{cc.parent.attrs.location.city}, " />
<h:outputText value="#{cc.parent.attrs.location.state}"/>
<hr/>
</div>
</h:panelGroup>
<places:mapZoomControl/>
<h:graphicImage id="
image" url="#{cc.parent.attrs.location.mapUrl}"
style="border: thin solid gray"/>
</h:panelGrid>
</div>
</composite:implementation>
</html>
The pertinent thing is that I'm using <places:mapZoomControl/>. In that component, I have an <f:ajax> tag in a menu that should render the image beneath <places:mapZoomControl>. That mapZoomControl component looks like this:
<!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:f="
http://java.sun.com/jsf/core"
xmlns:h="
http://java.sun.com/jsf/html"
xmlns:ui="
http://java.sun.com/jsf/facelets"
xmlns:composite="
http://java.sun.com/jsf/composite">
<!-- INTERFACE -->
<composite:interface>
<composite:attribute name="ccId"/>
</composite:interface>
<!-- IMPLEMENTATION -->
<composite:implementation>
<h:outputScript library="javascript/prototype" name="prototype-1.6.0.2.js"/>
<h:outputScript library="components/places" name="util.js"/>
<div id="#{cc.clientId}">
<h:panelGrid columns="2">
<div class="zoomPrompt">
#{msgs.zoomPrompt}
</div>
<h:selectOneMenu id="menu"
value="#{cc.parent.attrs.location.zoomIndex}"
style="font-size:13px;font-family:Palatino">
<f:ajax render="#{cc.parent.clientId}:image"/>
<f:selectItems value="#{places.zoomLevelItems}"/>
<h:graphicImage id="progressbar" style="display: none"
library="images" name="orange-barber-pole.gif"/>
</h:selectOneMenu>
</h:panelGrid>
</div>
</composite:implementation>
</html>
Notice the <f:ajax> tag. I think I'm accessing the image from the parent component (map.xhtml) correctly. However, when I load the page I get this:
<f:ajax> contains an unknown id
'form:j_id1186681689_16ef8569:0:j_id1186681689_16ef8513:j_id-1105909415_41ead6fe:image'
If I remove the f:ajax tag, load the page, and check the source, I see an <img> tag:
<img id="form:j_id1186681689_16ef8569:0:j_id1186681689_16ef8513:j_id-1105909415_41ead6fe:image" src="..."/>
And that id is *exactly* what <f:ajax> says it cannot find. It's in the page, but <f:ajax> cannot find it?!?
My guess is that <f:ajax> is evaluating the id before the page is completely constructed, and therefore, it doesn't find it, but that's just a WAG on my part.
So, if this is not correct:
<f:ajax render="#{cc.parent.clientId}:image"/>
Then how do I access the image in the parent (map) component?
It seems to me that I'm using <f:ajax> correctly, but I'd be happy to be told otherwise.
Thanks,
david