0

It seems like I am simply unable to grasp, how updating components with Ajax works. I keep on getting an Exception "Cannot find component with identifier ":menu-item-container" referenced from "j_idt12:0:j_idt16:j_idt76"."

This is my code: 

<!DOCTYPE html> <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.org/ui"> <f:view contentType="text/html"> <h:head> <title><ui:insert name="pageTitle"></ui:insert></title> </h:head> <h:body> <h:outputStylesheet library="css" name="style.css" /> <div class="menu-navigation"> <ul> <li>Menu</li> <ui:repeat var="category" value="#{restaurantsBean.restaurant.categories}"> <h:form> <li><p:commandLink update=":menu-item-container"> <div> #{category.name} <f:setPropertyActionListener value="#{category.id}" target="# {restaurantMenuBean.selected}" /> </div> </p:commandLink></li> </h:form> </ui:repeat> </ul> </div> <div id="menu-item-container"> <ui:repeat var="category" value="#{restaurantsBean.restaurant.categories}"> <p:outputPanel> <h:panelGroup id="pangroup" layout="block" rendered="#{restaurantMenuBean.active(category.id)}"> <div class="some-heading"> <h2>#{category.name}</h2> </div> <div class="category-description">#{category.description}</div> <ui:repeat var="item" value="#{category.items}"> <p:outputPanel rendered="#{restaurantMenuBean.needLightbox(item)}"> <ui:include src="/lightbox-item.xhtml"></ui:include> </p:outputPanel> <p:outputPanel rendered="#{!restaurantMenuBean.needLightbox(item)}"> <ui:include src="/nolightbox-item.xhtml"></ui:include> </p:outputPanel> </ui:repeat> </h:panelGroup> </p:outputPanel> </ui:repeat> </div> </h:body> </f:view> </html>

This is the related area of html source output, which tells me, my "menu-item-container" is right at the root and the update-attribute only needs a separation marker ":" in front of its id.

<div id="menu-item-container"><span id="j_idt17:0:j_idt64"></span><span id="j_idt17:1:j_idt64"><div id="j_idt17:1:pangroup"> <div class="some-heading">
Improve this question

1 Answer 1

Reset to default
2

The to-be-updated components are resolved using the algorithm as described in UIViewRoot#findComponent(). It should be obvious that it can find fullworthy JSF components only.

Your menu-item-container is however a plain HTML <div> element and thus unavailable in the JSF component tree.

Replace it by a fullworthy JSF component.

<h:panelGroup id="menu-item-container" layout="block">

The <h:panelGroup> renders by default a <span> and the layout="block" turns it into a <div>.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Yeah, honestly I read the algorithm's description for a couple of times while the fact, that it can find JSF components only remained far from obvious to me... oops again. And to cap it all off I have to ask: Does it make any sense to replace html-elements I don't want to update solely?
Okay, JSF is maybe better to understand if you're already somewhat familiar with general web development basics (server side vs client side, etc). Try to see JSF as a HTML code generator. JSF runs on webserver, produces HTML and sends it to webbrowser. That'll maybe help in better understanding the concepts. As to replacing all the plain HTML by JSF components, no, that's not necessary if you don't need a JSF component representation of it in order to do any JSF magic with it. Keeping it plain HTML is then cheaper.
Must be some kind of rookieness... :D So thank you again for your continuous advice. :)

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.