0

I am on a visualforce page for a particular contact. Is there a way to access the name and id within a javascript block?

A basic example:

 <apex:form >
        <apex:commandButton value="TestButton" onclick="alert({!contact.name})"/>
    </apex:form>

It does not recognize the contact.name.

2 Answers 2

6

Using variables in Javascript should work just fine, but you forgot the quotation marks in your code:

alert("{!(contact.name)}")

Otherwise Javascript thinks it's a variable instead of a string.

2
  • 1
    Also, prefer JSINHTMLENCODE when you do that, or Jim "Slim Jim" Smith will cause an error.
    – sfdcfox
    Commented Jan 6, 2015 at 17:54
  • @sfdcfox, The JSENCODE was someone else's edit, which I just "rolled back". Was trying to reject it when someone else approved it.
    – crmprogdev
    Commented Jan 6, 2015 at 18:47
4

You're on the right track, but you currently have a syntax error in your javascript:

Your code:

<apex:form >
     <apex:commandButton value="TestButton" onclick="alert({!contact.name})"/>
</apex:form>

renders into:

<form>
     <input type="button" value="TestButton" onclick="alert(John Smith)"/>
</form>

But JS needs the name to be a string, enclosed by quote. As such, you need to add the quotes to your VF so that they'll be rendered in the final HTML:

Adjusted code:

<apex:form >
    <apex:commandButton value="TestButton" onclick="alert('{!contact.name}')"/>
</apex:form>

renders into more-or-less the following HTML:

<form>
    <input type="button" value="TestButton" onclick="alert('John Smith')"/>
</form>

Which should work.


Having said that, it's good practice to avoid using VF template code directly in javascript because of security risks. As a result, you should try to do the following:

  1. Any time you're using VF in javascript, use the JSENCODE function, ie. alert('{!JSENCODE(Contact.Name)}').

  2. If your Javascript is embedded inside an HTML tag or attribute (as in your example), then use JSINHTMLENCODE instead. (See the documentation for those functions)

  3. When possible, segment your code as much as possible to have a single place where you're initializing SFDC data into Salesforce. Here's a very basic example to show the concept. It's contrived for such a simple case - makes more sense when you're using more complicated logic.

...

<script>
    var contactName = '{!JSENCODE(Contact.Name)}';

    function alertGreeting() {
        alert(contactName);
    }
</script>

<apex:form >
     <apex:commandButton value="TestButton" onclick="alertGreeting();"/>
</apex:form>
5
  • 1
    JSINHTMLENCODE, not JSENCODE.
    – sfdcfox
    Commented Jan 6, 2015 at 17:54
  • Good point, updated answer.
    – Benj
    Commented Jan 6, 2015 at 18:43
  • (At least, updated it in terms of how I understand JSENCODE and JSINHTMLENCODE -- if I'm wrong, can you edit?)
    – Benj
    Commented Jan 6, 2015 at 18:45
  • Looks good to me. It's just important for less experienced developers to make sure they're not exposing themselves to Robert';) DROP TABLE Students;-- ("Little Bobby Tables").
    – sfdcfox
    Commented Jan 6, 2015 at 18:54
  • Exactly. Love that link!
    – Benj
    Commented Jan 6, 2015 at 18:58

You must log in to answer this question.

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