Rerender standard html element from Visualforce component

Question

I am working on a project that consists of a Visualforce component that loads some data from a JSON file and constructs picklists/comboboxes with cross value dependencies, so that developers can refer to these objects in VF pages easily and don't have to write much controller-level code.

This is my component:

<apex:component controller="DependantPicklistController">
  <apex:attribute name="parentController" type="DependantPicklistBase" required="true" description="Controlador" assignTo="{!pageController}"/>
  <apex:attribute name="plname" type="String" required="true" description="Picklist" assignTo="{!name}"/> 

  <div id="{!name}">
    <apex:outputText value="{!name}"/>
    <apex:selectlist value="{!selectedValue}">
      <apex:selectOptions value="{!picklistValues}"/>
      <apex:actionSupport event="onselect" action="{!reloadChildren}" rerender="{!dependantPicklists}"/>
    </apex:selectlist>
  </div>
</apex:component>

As the Id property of Visualforce components HAS to be literal, I cannot wrap my component body in a OutputPanel like this:

<apex:outputPanel id="{!name}">[component body]</apex:outputPanel>

Therefore, because I want to automatise the rerendering process, I ended setting the Id property of the <div> tag.

However, providing the <div> Id to the <apex:actionsupport> tag rerender property doesn't seem to work.

Is there any way to set these arbitrary HTML elements to rerender once the user selects a value from the picklist?

Thank you in advance!

Answer 1

Visualforce has two types of elements: managed and unmanaged. Managed elements can be referenced through $Component, while unmanaged elements cannot. You can tell if an element is managed because it will have a namespace, such as c or apex. For example, <apex:outputPanel> is managed, <select> is not. Visualforce cannot re-render any element that is not managed by the view state. It is for this reason that the apex:action* elements support an onComplete attribute that will call a JavaScript function once Visualforce has finished modifying the DOM. Simply specify the function to call after the callback, and use that function to update the DOM with your own custom rendering.