Rerendering of an output panel not happening

Question

What I'm trying to do is re-render an output panel once one of the options from a pick list is selected. From what I searched online, everyone recommended me wrapping my output panel by another output panel. Though it renders perfectly fine w/that approach, I'm still kind of confused on why I have to do this. It doesn't seem very smart to wrap my output panel by another output panel because it doesn't seem very necessary other than for the re-rendering.

Another way is to re-render the whole page which does work, but it doesn't make any sense to re-render the whole page when I only need to re-render a small portion of the page.

And also, because of the extra output panel, there seems to be an extra line on my form and it looks weird because the whole section has not yet rendered. Once it renders, its fine but before it there are 2 lines...

Is there any way I can go around this? Kind of get irritated seeing 2 output panel tags in a row...

Answer 1

Unfortunately, this is how the Visualforce framework works. When you supply an Id value to the rerender attribute, Visualforce finds that element in the DOM and when your request is complete, re-evaluates all HTML in that element and its children. However, if the element was never rendered to the page (as is the case when rendered="false) the framework cannot find a DOM element to update and just silently does nothing.

This is different than how lightning functions because lightning puts placeholder tags into the DOM that it can use to locate and re-draw areas that are not actually in the DOM currently.

While this isn't an answer on how to do things differently, hopefully it sheds some light on why it is sometimes necessary to have extra elements in Visualforce as render targets.