When Field Dependency In Visualforce Doesn’t Work!!!

Recently we have come across a strange issue.

Requirement: Add two pick list fields, one is controlling field, another is dependent field.

Solution: Simple, add two fields within <apex:inputfield> tag, we are done for.

No, that doesn't work on a page with 2000 lines of code in between <apex:page> tags and lots of javascript. But, that works on simple page with the following structure.

<apex:page id="page" >

  <apex:form id="form01">

          <apex:pageBlock id="block01" >           

               <apex:pageMessages />

<apex:pageBlockSection id="sec01">

            

           <apex:inputField ……. />  // controlling field

                           <apex:inputField …...../>

</apex:pageBlockSection>

</apex:pageBlock>

</apex:form>

</apex:page>

But the problem is that it wouldn't work. The dependent picklist shows None and only None. 

As we dug down deep into the issue, we found some interesting things about visualforce pages, and how they render/ rerender.

So these are the things we found: Force.com renders the visualforce page with its engine generated ids and preloaded values, we can check that with IE or any html debugging tool.

For depending picklist to appear on the page it sends the entire list to the browser and then controls it with a javascript. All thanks to IE and firebug. 

So try not to override function bodyOnLoad() in javascript. If you want to do anything onload, do it with apex tags, or with jQuery ready() method.

Hope this helps.