Visualforce load apex components via ajax on page load

Question

Can someone tell me how to use ajax to load an apex pageBlockTable via ajax on page load? I've seen examples showing how to use an apex actionFunction, but the samples are usually simple (e.g. - returning a string from the controller and putting it on the page. My controller returns a list of sObjects and i'm just not quite sure how it's done.

Page:

<apex:pageBlockTable value="{!TopContent}" var="item">

    <apex:column headerValue="Title">

        <apex:outputLink value="/sfc/#version?selectedDocumentId={!item.Id}">

          {!item.Title}

        </apex:outputLink>

    </apex:column>

</apex:pageBlockTable>

Controller:

List<ContentDocument> topContent;

public List<ContentDocument> getTopContent()

{

    if (topContent == null)

    {

        topContent = [select Id,Title from ContentDocument limit 10];

    }

    return topContent;

}

Answer 1

Okay, so the trick here is to use an actionFunction and then call it directly from javascript.

So the VF page looks like this:

<apex:page controller="VfTestController">

    <apex:form>

        <apex:actionFunction action="{!loadDocuments}" name="loadDocuments" rerender="pageBlock" status="myStatus" />

    </apex:form>

    <apex:pageBlock id="pageBlock"> 

        <apex:pageBlockTable value="{!TopContent}" rendered="{!!ISBLANK(TopContent)}" var="item">

            <apex:column headerValue="Title">

                <apex:outputLink value="/sfc/#version?selectedDocumentId={!item.Id}">

                    {!item.Title}

                </apex:outputLink>

            </apex:column>

        </apex:pageBlockTable>

        <apex:actionStatus startText="Loading content..." id="myStatus" />

    </apex:pageBlock>

    <script type="text/javascript">

        window.setTimeout(loadDocuments, 100);

    </script>

</apex:page>

and the controller like this:

public class VfTestController 

{

    List<ContentDocument> topContent;

    public List<ContentDocument> getTopContent()

    {

        return topContent;

    }

    public PageReference loadDocuments()

    {

        if (topContent == null)

        {

            topContent = [select Id,Title from ContentDocument limit 10];

        }

        return null;

    }

}

Go for this in-depth job-oriented salesforce course online!