Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
RustyboyRustyboy 

Style and javascript in VisualForce

I am going around in circles trying to get a simple function to work in Javascript. The function looks like this:

 

<script type="text/javascript">
  function attendeeAbsent(status)
    {
      if (status == "Apologies") {
      return true;   
    }
    if (status == "Absent") {
      return true;
    }
    return false;
  }
</script>

 

I want use with to highlight a column like this:

 

<apex:column headerValue="Status" style="{!IF((attendeeAbsent(att.Status__c)),"background-color: #FFCC66;","")}">
   <apex:outputField value="{!att.Status__c}"/>
</apex:column>

 

Whatever I do, I keep getting this message when I try to save:

 

Save error: Unknown function attendeeAbsent. Check spelling.

 

Any ideas? I have been at this for almost 2 hours. I am sure its something simple, but I have very limited JS skills

 

Thanks in advance

 

 

 

 

 

Best Answer chosen by Admin (Salesforce Developers) 
zachbarkleyzachbarkley

Hi Rustyboy,

I think i know what you're trying to do:

 

Try using this CSS

<style>
.Apologies {background-color:red;}
.Absent {background-color:green;}
.MyNewStatus{background-color:black;}
</style>

 

And this VF Page

 

<apex:column headerValue="Status" styleClass="{!att.Status__c}">
   <apex:outputField value="{!att.Status__c}"/>
</apex:column>

 

All Answers

zachbarkleyzachbarkley

Hi Rustyboy,

 

This message is saying that it's trying to find a method in your controller or extention on that page that looks like this:

 

public PageReference attendeeAbsent(){

}

 

Anything inside something that looks like this on a visualforce page {!SOMETHING} means that it's going to be looking in the viewstate for the function, not javascript. The viewstate will connect to the APEX CODE.

 

Maybe if you post what you are trying to acheive, the community might be able to solve your query. Example: I'm trying to style the column based on the Status__c value etc..
sfdcfoxsfdcfox

You're trying to mix JavaScript and Visualforce expressions, which won't work. The Visualforce engine can't see JavaScript methods, although JavaScript can see some Visualforce methods (remote actions and action functions). Instead, use a normal expression:

 

<apex:column headerValue="Status" style="{!IF(case(att.Status__c,'Apologies',1,'Absent',1,0)=1,"background-color: #FFCC66;","")}">
   <apex:outputField value="{!att.Status__c}"/>
</apex:column>

 
zachbarkleyzachbarkley

Hi Rustyboy,

I think i know what you're trying to do:

 

Try using this CSS

<style>
.Apologies {background-color:red;}
.Absent {background-color:green;}
.MyNewStatus{background-color:black;}
</style>

 

And this VF Page

 

<apex:column headerValue="Status" styleClass="{!att.Status__c}">
   <apex:outputField value="{!att.Status__c}"/>
</apex:column>

 

This was selected as the best answer
RustyboyRustyboy

Thanks all for the prompt and helpful responses.

 

I have gone with the CSS solution as it seems the most elegant -- it works perfectly :o)