0

I have developed page with autoComplete feature. I'm getting an Uncaught SyntaxError: Unexpected identifier error because of symbols used in Account Names such as "诸城金盛-abc Commerce and" Co., Ltd. I'm posting my code for reference.

Visualforce page Code:

<apex:page id="pageId" standardController="Account"  lightningStylesheets="{!$User.UIThemeDisplayed == 'Theme4d'}" extensions="SFI_AccountExtension">
    <html lang="en">
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <title>jQuery UI Autocomplete - Default functionality</title>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"/>
        <style>
            .ui-autocomplete {
            max-height: 100px;
            overflow-y: auto;

            overflow-x: hidden;
            }

            * html .ui-autocomplete {
            height: 100px;
            }


            td.data2Col {
            text-align: center !important;

            }
table {
border:0px;
border-collapse:collapse;
border-spacing:0px;
}

td,th { 
padding:0px; 
border-width:0px; 
margin:0px; 

}

th{
width : 50px !important;
}

th{
width : 50px !important;
    padding-bottom: 20px;            
}
table#mytable tr td:first-child{display:none;}
table#mytable th{width:12%}            
table#mytable td{text-align:left;} 
        </style>
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <apex:form id="formID">

            <apex:includeScript value="https://code.jquery.com/jquery-1.12.4.js" />
            <apex:includeScript value="https://code.jquery.com/ui/1.12.1/jquery-ui.js" />
            <center>
                <apex:pageblock mode="Edit" id="pageBLockID" >
                    <apex:pageMessages id="showmsg"></apex:pageMessages>
                    <apex:pageBlockSection id="pageblockSectionID" title="Auto Complete Demo" columns="1" collapsible="false" >
                        <table cellspacing="0" cellpadding="0" id="mytable">
                            <tr id="tr1Id">
                                <apex:outputPanel >
                                    <th><apex:outputLabel value="Account" style="color: #4a4a56; font-weight: bold; font-size:91%;  text-align: left; "></apex:outputLabel></th>
                                    <td>
                                        <div class="requiredInput"><div class="requiredBlock"></div>
                                            <apex:inputText label="Account " value="{!selectedAccount}"  id="AccountIds"    style="width : 206px;" />
                                        </div>    
                                    </td>
                                </apex:outputPanel>
                            </tr>

                        </table>
                    </apex:pageblockSection>

                </apex:pageblock>
            </center>
        </apex:form>
        <script>
        $( function() {
            var availableTags = {!accList};

            $('[id$=AccountIds]').autocomplete({
                source: availableTags
            });
        } );
        </script>



    </html>
</apex:page>

Apex Code:

public class SFI_AccountExtension {
    public Account accountRecord {
        get;
        set;
    }

    public List < String > accList {
        get;
        set;
    }
     public String  selectedAccount{
        get;
        set;
    }
    public SFI_AccountExtension(ApexPages.StandardController sc) {
            selectedAccount = '';
            accountRecord = (Account) sc.getRecord();

        getAccountList();//method to load list of accounts


    }

    //Method to supply list of account with the record type name 'SAP Sold-To Customer' present in salesforce for auto complete
    public List < String > getAccountList() {
        accList = new List < String > ();
        Id RecordTypeId = [SELECT Id, Name FROM RecordType WHERE SobjectType = 'Account'
                           AND Name = 'SAP Sold-To Customer'
                           limit 1
                          ].id;
        for (Account acc: [select name, SAP_Customer_Number__c from Account where recordTypeId =: RecordTypeId]) {
            accList.add('"' + acc.SAP_Customer_Number__c + ' - ' + acc.name + '"');
        }
        return accList;
    }

}

Can somebody please tell how to avoid this type of error.

Improve this question
2

It sounds like you'll need to encode your data:

var availableTags = JSON.parse("{!JSENCODE(accList)}");

This may still result in errors, but it should be closer to what you're looking for.

Improve this answer
2
  • Hi @sfdcfox when I'm trying to use this I'm getting this error " Error: Incorrect argument type for function 'JSENCODE()'. " – prasanth Aug 5 '18 at 7:50
  • In that case, you might need to to JSON.serialize on the server side, then use the JSON string. You can't ordinarily have JavaScript variables with odd names, it's a limitation of JavaScript. – sfdcfox Aug 5 '18 at 8:19

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.