ActionFuntion Rerender in VF page leads to sudden “Insufficient Privileges” - even as Admin

Question

To make a VF component appear to load faster I used an actionFunction to load it only after the rest of the pages has loaded (jquery's document.ready).

After doing this my component showed an "Insufficient Privileges" error. Even as an admin. From reading other posts on Stackexchange I get the impression that this error is actually hidding the real error. But as other posts here state, debugging this error is also nearly impossible.

Any ideas on this?!

It worked before I added this to my component:

<apex:component controller="MyController" allowDml="true">

    <!-- Component constructor workaround as standard constructor does not seem to work in components -->
    {!Init} 

    <!-- Uses rerender to render component only when rest of the page is loaded. Looks like faster loading ;-) -->
    <apex:actionFunction name="renderOnLoad_{!componentId}" action="{!renderOnLoad}" rerender="myPanel" />

    <apex:outputPanel layout="block" id="myPanel"> 
      ...
    </apex:outputPanel>

    <script type="text/javascript">
        $j = jQuery.noConflict();

        // Render table only when rest of document is loaded.
        $j(document).ready(function() { 
            renderOnLoad_{!componentId}();
        });
    </script>
</apex:component>

and this to MyController

public with sharing class MyController {

    public Boolean isPageLoaded { get; private set; }

    public void getInit() { 
        this.isPageLoaded = false;
        ...
    }

    /** 
     * Renders component only after the rest of the page is loaded
     */
    public PageReference renderOnLoad() {
        this.isPageLoaded = true;
        return null;
    }
}

Answer 1

While I can appreciate what you are attempting to do, the reason you are seeing the error is 99% as a result of where you are performing a page post within the page lifecycle. (i.e. not everything required to post the page has been rendered yet.)

This implementation appears to be overly complicated for the simple behavior desired. This is most easily achieved with CSS attributes and not with an actionFunction.

The actionFunction adds more delay as the page is posted to change the boolean from false to true. Is the behavior of the action method only there to change a rendering flag from false to true? What is it that is in the component markup which is slow to render? Seems that there's something else going on that could be resolved in a more simplistic fashion.

Original Example

<apex:component controller="MyController" allowDml="true">
    <style type="text/css">
        .hiddenPanel { display; none; }
    </style>
    <apex:outputPanel layout="block" id="myPanel" styleClass="hiddenPanel"> 
      ...
    </apex:outputPanel>
    <script type="text/javascript">
        $j = jQuery.noConflict();

        // show table only when rest of document is loaded.
        $j(document).ready(function() { 
            $j('.hiddenPanel').removeClass('hiddenPanel');
        });
    </script>
</apex:component>

Spinning Wheel Example (Everything except the spinning wheel hidden for 3 seconds while it loads)

<apex:component controller="MyController" allowDml="true">
    <style type="text/css">
        .hidden { display; none; }
    </style>

    <script type="text/javascript">
        $j = jQuery.noConflict();

        // show the hidden content at a point that you deem it 'ready' to be shown
        // in this example, it is 3 seconds after this script block is reached
        setTimeout(function() {
            // show all of the previously hidden stuff
            $j('.hidden').removeClass('hidden');

            // hide the spinning wheel image
            $j('#theSpinningWheel').addClass('hidden');
        }, 3000);

    </script>

    <img id="theSpinningWheel" src="/resource/spinningwheel.gif" />

    <apex:outputPanel layout="block" id="myPanel1" styleClass="hidden"> 
      ...
    </apex:outputPanel>

    <apex:outputPanel layout="block" id="myPanel2" styleClass="hidden"> 
      ...
    </apex:outputPanel> 

</apex:component>