7

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!

  • Just a suggestion. Since it is mostly visualforce can you try wrapping this in a apex:outputpanel instead of a div and provide the Id of the panel to the actionsupport and check if the rendering is consistent ? – Rao Jun 27 '13 at 18:23
  • @rao, as I cannot set the outputpanel Id, it will have a dynamically generated Id. How can I retrieve this Id -- and then supply it to the actionsupport tag? – André Medeiros Jun 27 '13 at 18:29
  • Just use apex:outputPanel id="mypanel", that's it. It must work because the generated panel-id will be unique inside your page (like j_id0:myForm:j_id38:mypanel) – Sergej Utko Jun 27 '13 at 18:35
  • The problem is that as I expect the developer to declare many of my component in a single page, controlling rerendering means that each component will have to have a unique Id, or I will end up reloading all the components in the page each time the user selects an option. Unless I can rerender based on the DOM Id, which I don't know how to retrieve prior to rendering. – André Medeiros Jun 27 '13 at 18:39
  • can you build a custom setting with key ={!name} and value={!name} and pull it in a controller using map can you do id = map[{!name}] in your page? This way it is more adjustable and not a code change every time you want to add/modify the ID names. This is close to hard coding but gives you flexibility with no code change – Rao Jun 27 '13 at 18:43
6

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.

  • Ok, I can build the DOM structure from scratch and selecting standard HTML elements is easy. The problem I am facing now is that static variables are not kept between AJAX requests, so, every time I try to get the controller information to update my DOM as needed, it's null. Any Ideas on that? – André Medeiros Jul 1 '13 at 14:33
  • 1
    Static variables do not keep state between requests. You'll need to either pass parameters to your static functions, or use an actionFunction and bind the values to a managed element (and set/get the values from that managed element). – sfdcfox Jul 1 '13 at 15:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.