The Problem

I’ve recently been working with some PrimeFaces components. In general they’ve been fairly awesome to use, but either I’ve been looking for documentation in all the wrong places or they aren’t documented very well. The PrimeFaces commandButton is, by default, Ajax enabled. This means that when the user clicks on the button, on the sections of the webpage that are directly involved in the button will be refreshed. This avoids have to retrieve the entire website, losing state of other controls and generally makes for a more pleasant user experience. The errors thrown by the commandButton when it isn’t setup correctly gave me some difficulties — all of my woes turned out to be from one core lack of understanding on my behalf though. In the one case, I was using a <p: layout> . Everything worked fine until I specified an element that the commandButton should update and began receiving a pop up message on pageload that unhelpfully said

“The center-pane element does not exist. The center-pane is a required element.”

Apart from its appealing Fight-Clubesque phrasing, there wasn’t much I liked about that message. In the other case, I had a commandButton attempting to update a form that it was inside. Its message was similarly unhelpful —

“WARNING: HTML nesting warning on closing changes: element update not explicitly closed”

The Solution

The issue was (somehow) resulting from the same problem — the update specification in the button is relative to the current NamingContainer, as I eventually gleaned from this StackOverflow post. In my case, I had a nested p:dataTable  inside a h:form , with the dataTable attempting to update the form . As the form was higher in the tree, referring to it directly did not work. Instead, I needed to use the :  syntax that indicates that the ID I’m referring to is relative to the root of the document, not the current naming container. Specifically, I changed mainForm to :mainForm