2

I created my first APEX component which takes values from picklist and displays them in a autocomplete When I test my page in preview it is working fine, however, when I put the component in the page, I get an error in browser console that custom controller not found.
This is my page

<apex:page tabStyle="Case" standardController="Case" extensions="CaseReasonCompleteController">
<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"/>
<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"/>
<apex:stylesheet value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"/>

<style>
    .displayNone { 
    display:none; 
    }
    .displayBlock {
    display:block;
    }
    .ui-autocomplete-loading { 
    background: white url(/img/loading32.gif) right center no-repeat;
    background-size:15px 15px; 
    }
    .placeHolder {
    font-style: italic;
    }
</style>
<apex:form id="autoCompleteCaseReason">
    <apex:pageBlock id="searchBlock">
        <apex:pageBlockSection id="searchSection" title="Case Reason Lookup" columns="1">
            <apex:outputLabel value="Case Reason"></apex:outputLabel>
            <apex:inputText id="caseReasonText" value="{!searchTerm}" styleClass="placeHolder"/>
            <apex:inputHidden id="caseReasonId" value="{!selectedReason}"/>
        </apex:pageBlockSection>
    </apex:pageBlock>
</apex:form>
<script type="text/javascript">
var placeholder = 'Enter case reason here';
var caseReasonObject;
var queryTerm;

$('[id$=caseReasonText]').autocomplete({
    minLength:3,
    source: function(request, response) {
        queryTerm = request.term;
        CaseReasonCompleteController.searchCaseReason(request.term, function(result, event) {
            if(event.type == 'exception') {
                alert(event.message);
            } else {
                caseReasonObject = result;
                response(caseReasonObject);
            }
        });
    },
    focus: function(event, ui) {
        $('[id$=caseReasonText]').val(ui.item.label);
        return false;
    },
    select: function(event, ui) {
        $('[id$=caseReasonText]').val(ui.item.label);
        $('[id$=caseReasonId]').val(ui.item.Id);
        return false;
    },
})
.data("ui-autocomplete")._renderItem = function(ul, item) {
    var entry = "<a>"+item.label;
    entry = entry + "</a>";
    entry = entry.replace(queryTerm, "<b>" + queryTerm + "</b>");
    console.log(entry);
    return $("<li></li>")
    .data("ui-autocomplete-item", item )
    .append( entry )
    .appendTo( ul );
};
$('[id$=caseReasonText]').val(placeholder);
$('[id$=caseReasonText]').on("focus", function(event) {
    $tgt = $(event.target);
    if($tgt.val() === placeholder ){
        $tgt.val('');
        $tgt.removeClass('placeHolder');
    }
});
$('[id$=caseReasonText]').on("blur",  function(event){
    $tgt = $(event.target);
    if($tgt.val() === '' ){
        $tgt.val(placeholder);
        $tgt.addClass('placeHolder');
    }
});
</script> </apex:page>

This is my controller

    public with sharing class CaseReasonCompleteController {
//instance fields
public String searchTerm{get; set;}
public String selectedReason{get; set;}
private final Case cas;

//constructor
public CaseReasonCompleteController() {

}
public CaseReasonCompleteController(ApexPages.StandardController stdController) {
    this.cas = (Case)stdController.getRecord();
}

//Javascript action for searching case reason
@RemoteAction
public static List<String> searchCaseReason(String searchTerm) {
    System.debug('case reason is: '+ searchTerm);
    List<String> caseReason = caseReasonValues(searchTerm);
    return caseReason;
}

public static List<String> caseReasonValues(String searchTerm) {
    List<String> caseReasonPickList = null;
    if (caseReasonPicklist == null) {
        caseReasonPicklist = new List<String>();
        Schema.DescribeFieldResult field = Case.Reason.getDescribe();
        for (Schema.PicklistEntry f : field.getPicklistValues()) {
            String caseLabel = f.getLabel();
            if(caseLabel.contains(searchTerm))
                caseReasonPicklist.add(caseLabel);
        }
    }
    return caseReasonPickList;
}    }

1 Answer 1

1

I got the error to go away by making the remote action 'searchCaseReason' global instead of public. Check out the below link for more information on scope and visibility with @RemoteAction methods:

https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_js_remoting_scope_visibility.htm

0

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .