1

This is making me slightly insane. I cannot, for the life of me, figure out how to get this dang rerendering working in Visualforce.

I am doing something like this on my visualforce page:

<apex:form id="theForm">
    <apex:outputPanel id="criteriaTableScript">
        <script>
            var criteriaTable;
            var fieldCriteriaList = JSON.parse('{!fieldCriteria}');
            function instantiateCriteriaTable(){
                var fieldCriteriaList = JSON.parse('{!fieldCriteria}');
                console.log('Updated Criteria: ', fieldCriteriaList);
                if(fieldCriteriaList.length > 0){
                    dependencyTable.destroy();
                    $Lightning.use('FSTR:FieldUpdateApp', function(){
                        console.log('Creating lightning component');
                        $Lightning.createComponent(
                            'c:CriteriaTableViewComponent',
                            {
                                Id: '{!myObj.Id}',
                                criteriaObject: 'Criteria__c',
                                criteria: JSON.parse('{!fieldCriteria}')
                            },
                            'sfd-section',
                            function(cmp){
                                criteriaTable = cmp;
                                console.log('Component created');
                                //component created
                            }
                        );
                    });
                }
            }
        </script>
    </apex:outputPanel>
    <apex:actionFunction name="addCriteriaToList" action="{!addCriteriaToList}" onComplete="instantiateCriteriaTable();" reRender="criteriaTableScript">
        <apex:param name="criteriaDataStr" value='' />
    </apex:actionFunction>
</apex:form>

There is more stuff in the form afterwards, but just wanted to show this to indicate the outputpanel and action function are at the very top level of the form, nothing is preventing their rendering or anything.

So... a user creates a criteria, saving the criteria triggers the action function, which does this in the controller:

public PageReference addCriteriaToList(){
    String criteria = ApexPages.currentPage().getParameters().get('criteriaDataStr');
    PCE_Step_Field_Dependency__c newSFD = (Criteria__c)JSON.deserialize(criteria, Type.forName('Criteria__c'));
    fieldCriteria.add(newSFD);

    return null;
}

All it does is add the new criteria to a global variable fieldCriteria then returns.

My action function is then supposed to rerender the outputPanel, so the script inside should grab the updated values of '{!fieldCriteria}', it then should call the function inside the outputPanel.

but fieldCriteria remains an empty list, all the time. It just doesn't seem to be rerendering.

I came to this solution by finding this post

But it just will not update...

  • Suggest you use your browser's development Tools to set a breakpoint in the JavaScript and also take a look at the "Network" tab to check what is sent and received. Also worth adding some System.debug calls in the Apex and watching the logs on the server-side. – Keith C Sep 6 '18 at 21:22
  • I think this would be a lot easier if you chose a different approach. This is perhaps the least efficient design one could choose for this sort of behavior. Perhaps keep all of the criteria client-side until you need to use it, then send it to the Visualforce controller later. Or just write a full component for it. – sfdcfox Sep 6 '18 at 21:22
  • I did system.debug. The data is correct in my controller. The size of the list is 1 after I insert it, it then comes back and is supposed to rerender and do the oncomplete method, but still an empty list. – Tyler Dahle Sep 6 '18 at 21:23
  • 2
    Quick question: Does ANY part of the rerendered area contain an SVG in the SLDS format with the <use> and <svg> tags? See: salesforce.stackexchange.com/questions/164801/… - Just something to think about. I would suggest you create a temp page with just the minimal amount of stuff to test your re-reneder. If it does not work, take out elements until it does. then you will have your culprit. – Eric Sep 6 '18 at 23:37
  • 1
    Also, add <apex:pageMessages> to your page. you may be getting an error and not seeing it. Change the method to a void return type and remove return null. Just some basic stuff to try since there could be many many reasons why it is not re-rendering. Pull your function function instantiateCriteriaTable() out of the re-rendered part. Debug the values in the re-rendered part not inside the function. All of this will help you narrow down the issue. – Eric Sep 6 '18 at 23:39

Your Answer

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

Browse other questions tagged or ask your own question.