从 Visualforce 页面在 Controller 中设置值花费的时间太长

Question

I'm using Visualforce Page to display some selection fields, and based on the selections I'm updating my list.

<apex:form>
    <div class="map-controls">
        <div class="map-selects">
            <apex:selectList value="{!state}" multiselect="false" size="1">
                <apex:selectOptions value="{!states}"></apex:selectOptions>
                <apex:actionSupport event="onchange" rerender="countyList" />
            </apex:selectList>

            <apex:selectList value="{!county}" multiselect="false" size="1" id="countyList">
                <apex:selectOptions value="{!counties}"></apex:selectOptions>
            </apex:selectList>
        </div>

        <div class="map-search">
            <apex:commandButton value="Search" action="{!test}" rerender="productlistpanel" status="status" />
        </div>

        <div class="radio-btns">
            <apex:selectRadio value="{!type}">
                <apex:selectOptions value="{!types}" />
            </apex:selectRadio>
        </div>
    </div>
</apex:form>

Basically what I'm trying to do here is, when user selects the State, County and Type upon clicking the commandButton, the product list will be rendered.

<apex:outputPanel id="productlistpanel">
    <div class="splide" role="group">
        <div class="splide__track">
            <ul class="splide__list">
                <apex:repeat value="{!products}" var="productKey" id="theRepeat">
                    <!-- REPEAT CONTENT -->
                </apex:repeat>
            </ul>
        </div>
    </div>
    
    <script>
    document.dispatchEvent(new CustomEvent("splideTest", { "detail": 'TEST' }));                    
    </script>
</apex:outputPanel>

And this is my controller.

public List<SelectOption> getTypes() {
    RecordTypeInfo TYPE1 = Schema.SObjectType.Product2.getRecordTypeInfosByDeveloperName().get('TYPE1');
    RecordTypeInfo TYPE2 = Schema.SObjectType.Product2.getRecordTypeInfosByDeveloperName().get('TYPE2');

    List<SelectOption> options = new List<SelectOption>();
    options.add(new SelectOption(TYPE1.getRecordTypeId(), 'TYPE1'));
    options.add(new SelectOption(TYPE2.getRecordTypeId(), 'TYPE2'));

    return options;
}

public List<SelectOption> getStates() {
    List<SelectOption> options = new List<SelectOption>();
    options.add(new SelectOption('All', 'All'));

    List<State__c> states = [SELECT Id, 
                                Name
                            FROM State__c];

    for (State__c s : states) {
        options.add(new SelectOption(s.Name, s.Name));
    }

    return options;
}

public List<SelectOption> getCounties() {
    List<SelectOption> options = new List<SelectOption>();
    options.add(new SelectOption('All', 'All'));

    List<County__c> counties = new List<County__c>();

    if (state != null && state != 'ALL') {
        counties = [SELECT Id, 
                            State__c, 
                            Name
                    FROM County__c
                    WHERE State__r.Name = :state];
    }

    for (County__c c : counties) {
        options.add(new SelectOption(c.Name, c.Name));
    }

    return options;
}

public PageReference test() {
    return null;
}

public String state { get; set; }

public String county { get; set; }

public String type { get; set; }

public Map<Id, WRAPPER> productList { get; set; }

public Map<Id, WRAPPER> getProducts() {
    try {
        // CREATE QUERY
        query += String.isNotBlank(state) && state != 'ALL' ? ' AND State__c = \'' + state + '\'' : '';
        query += String.isNotBlank(county) && county != 'ALL' ? ' AND County__c = \'' + county + '\'' : '';
        query += String.isNotBlank(type)  ? ' AND RecordTypeId = \'' + type + '\'' : '';
        query += ' ORDER BY Name ASC';

        System.debug('query ' + query);
        List<Product2> productList = (List<Product2>)database.query(query);

        for (Product2 prod : productList) {
            // CREATE LIST
        }

        return returnMap;
    } catch (Exception ex) {
        ApexPages.Message msg = new ApexPages.Message(ApexPages.Severity.Error, ex.getMessage());
        ApexPages.addMessage(msg);
        return null;
    }
}

My problem is when I select the type and hit Search; the type is not available right away. I can see the rerender is being executed and at the logs I see that type is not saved. I have to click Search button again to see the Type selected as I wanted it to be.

I usually use Lightning Web Component and I don't deal with this kind of problem but unfortunately, I have to use VF Page for this implementation.

I could not locate any work-around so far, I tried to understand the delay, but it seems like it is not a common issue. I assume it is a design issue on my end. I couldn't locate why setting the value is not fast enough.

Does that happen to you, or do you have any suggestions for it?

Answer 1

You could cheat, write it in LWC and then use "Lightning Out" to display it. Saves the hassle of eventually rewriting it;)

I suspect part of it is that only 1st picklist has apex:actionSupport .

You swallow the exception (maybe there's an issue with the query) and use addMessage - but for it to truly show you need <apex:pageMessages id="messages" /> tag and then add it to your rerender ( rerender="productlistpanel,messages" )

Your "type" picklist radio is the only one without fallback "ALL". I suspect in UI it apppears to have type1 selected as 1st entry but really the value is null because you didn't initalise it in controller? See if it behaves better if you explicitly set it in constructor for example.

Risko of soql injection (could use bind variables, even in dynamic soql), you could read about <apex:actionRegion> for such partial form submits. Shameless plug: https://salesforce.stackexchange.com/a/22216/799