is actionFunction or jQuery init function running first?

Question

I am now responsible for a chunk of code that is big and old enough that no one is certain how it works. I have a few questions I'm hoping you can help with.

I have a page called PolicyDetails.page and a controller named SD_PolicyDetailController. The page has an actionFunction at the top of the page and some jQuery at the bottom of the page. The actionFunction code is as follows:

<apex:form id="policyDetailActionFunctionForm">
    <apex:actionFunction action="{!loadPolicyDetail}" name="loadPolicyDetail"
                         rerender="(bunch of panels)"
                         oncomplete="PolicyDetail.showPanel()">
        <apex:param name="policyAlertMessages" assignTo="{!policyAlertMessages}" value="" />
    </apex:actionFunction>
</apex:form>

The relevant jQuery is as follows:

j$(function() {
     try{
        console.log('SD_PolicyDetail.page - Document Ready');
        PolicyDetail.init();
     } catch (err) {
        console.error('Policy Detail - Document Ready error', err);
     }
  });

init: function() {
        console.log('PolicyDetail.init()');
        PolicyDetail.loadPolicyAlertMessages();
        PolicyDetail.loadPolicyDetail();
        PolicyDetail.nonRerendered();
     },

loadPolicyDetail: function() {
        console.log('PolicyDetail.loadPolicyDetail() - action function call');
        loadPolicyDetail(this.policyAlertMessages);
     },

The controller also has a loadPolicyDetail method as follows:

public Object loadPolicyDetail(){
    try{
        System.debug('SD_PolicyDetailController.loadPolicyDetail()');

        policyAlertMessageWrapper = getPolicyAlertMessageWrapper();

        (async callout code)
    }
}

As well as the following method:

public SD_PolicyAlertMessages getPolicyAlertMessageWrapper() {
    SD_PolicyAlertMessages policyAlertMessagesWrapper = new SD_PolicyAlertMessages();

    try{
        String policyAlertMessages = Apexpages.currentPage().getParameters().get('policyAlertMessages');

        (code to retrieve, process and display alert messages)
}

Now I am still a novice with Salesforce. My understanding is that the 'action' in actionFunction is calling the loadPolicyDetail function from the controller. Is this right? Meanwhile, jQuery is initially calling the loadPolicyDetail function in the page's script, but it looks like that is also itself calling the loadPolicyDetail function from the controller. Is that right? If so, which of these is running first? Or are they both running at the same time, and if so, why is that needed?

Thanks!

Answer 1

1. The jQuery init() method starts first
2. It calls an internal method PolicyDetail.loadPolicyDetail()
3. That then calls the actionFunction loadPolicyDetail with policyAlertMessages
4. The actionFunction interacts with the controller action method called loadPolicyDetail. The signature of this method is a bit weird. It should either be void if it doesn't return a PageReference or PageReference if it does

The VF page is never going to call an actionFunction unless it is referenced in an onXXX attribute or called explicitly from Javascript elsewhere (including jQuery). actionFunctions are effectively javascript that can interact with the controller's action methods