stratoflow

Differences in using CSS, JQuery and Java Script with ID in Visualforce Page controllers

Today we’re gonna focus on what’s different between CSS, JQuery and JS when it comes to Visualforce page controllers. It’s quite important to know that since a mistake can lead into some problems.

As you probably are aware, using Java Script and JQuery is a little different when it comes to Visualforce Page and HTML tags. The main reason for this is that Visualforce code is converted into HTML code in user end page. In a nutshell, HTML code is generated from Visualforce code. When we are using Visualforce tags instead of HTML tags our id’s names are altered in the end HTML page.

Building a new application or extending your development team?

🚀 We're here to assist you in accelerating and scaling your business. Send us your inquiry, and we'll schedule a free estimation call.

Estimate your project

In the following example we are able to see how ID of apex:outputText was changed:

<apex:outputText styleClass="abc" id='t'> abc </apex:outputText> 

We are leaved in end user page with this code :

abc
<span id="j_id0:theform:t" class="abc"></span>

In this case how can we add CSS look or JS code to Visualforce page? We can of course use class name to do this because as we can see that there wasn’t any changes made to its name. But we cannot forget that class name isn’t a unique name for tag and it can be used in different places therefore it isn’t the best practice. Better solution to that problem is still using  Id attribute but we must refer to it other way. Another interesting aspect in this example, is that even if we add text to Visualforce tags we can’t be sure whether it will be shown inside the tags the way we intend it or not.

To feed Java Scrpit to Visualforce it is best to use this: {!$Component.IdName} formula to take proper Id name from Visualforce Page:

<apex:outputPanel styleClass="abc" id='t'> abc </apex:outputPanel>

var y= document.getElementById('{!$Component.t}');

In this particular example, if we use apex:output panel then we will get text inside HTML tags. It is also worth keeping in mind that stuff like this does like to happen.

the other case, while using Jquery we will also need to fill Id in other way than in normal HTML code. Best way of doing this is probably in the following example. You can notice that id name for visualforce tags in JQuery is inserted according to this formula: [id$=IdName].

<apex:inputText id="output" html-placeholder="Click here"/>

$('[id$=output]').click(function(){
alert('InputText clicked');
}

And now let’s move on to feeding Visualforce tag with custom CSS layout using Id. Best way of working this out is doing this like it is presented in the example below, and just to clarify: if you want to connect CSS file tag you’d need to write ID with this particular formula: [id*=IdName].

<apex:outputText id="myId" value="This is less fancy."/>

<style type="text/css">
[id*=myId] { font-weight: bold; }
</style>

All of this is showing us that you need to be very careful with Visualforce and always make sure that code is behaving just like you intend. Hope these tips will turn out to be helpful!

Building a new application or extending your development team?

🚀 We're here to assist you in accelerating and scaling your business. Send us your inquiry, and we'll schedule a free estimation call.

Estimate your project

Testimonials

They have a very good company culture of their own, which gives them a real edge compared to other providers.

CEO

Leading UK system integrator

They're very skilled technically and are also able to see the bigger picture.

Managing Partner

Scalable SaaS for healthcare IoT built on Salesforce platform

They've been consistently able to deliver work on time and within budget.

CTO

High performance SaaS for financial insitutions

We are seriously impressed by the quality and broader picture of anything they do for us.

CEO

Gold trading platform

testowy tekst

Martyna

Senior