Update component outside of h:form - ComponentNotFoundException [duplicate] - jsf

Question

This question already has answers here:
Is it possible to update non-JSF components (plain HTML) with JSF ajax?
(3 answers)
Closed 6 years ago.
I am trying to update the element "entryDiv" in my xhtml from a button inside a form like this:
<div id="entryDiv">
<div>
<h:form id="myForm">
<c:forEach items="#{foodPlanManagementBean.loadRestaurantsHistory()}" var="restaurantHistoryEntry">
<p:commandButton value="MyName" update="entryDiv"/>
</c:forEach>
</h:form>
</div>
Some more unrelated elements here...
</div>
However, this way all I am left with is a ComponentFoundException, tell me that the component could not be located:
Cannot find component for expression "entryDiv" referenced from "form:myForm:j_idt25".
I already read up a bit on SO and I found one solution proposing to put a : in front of the "entryDiv", but that doesn't turn out to give me any different results.
How could I fix this?

Answer 1

JSF can't see the id of your div if it is not a JSF component so you need to convert your div to a h:panelGroup
<h:panelGroup id="entryDiv" layout="block">
<div>
<h:form id="myForm">
<c:forEach items="#{foodPlanManagementBean.loadRestaurantsHistory()}" var="restaurantHistoryEntry">
<p:commandButton value="MyName" update=":entryDiv"/>
</div>
</c:forEach>
</h:form>
</div>
</h:panelGroup>
if you don't put layout="block" it will render a span instead of a div.