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.
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!
