Take the 2-minute tour ×
Salesforce Stack Exchange is a question and answer site for Salesforce administrators, implementation experts, developers and anybody in-between. It's 100% free, no registration required.

I have created a custom Visualforce component, and I want to include in my Visualforce page two times. I will be passing certain attributes using apex:attribute so that component will function accordingly, but its not working. When I embed component two times, the second time component works. My VF page

<apex:page >
 <c:TreeView id="myj" rendered="true"   objectName="Contact"  toolTipField="FirstName">
 <c:TreeView id="my" rendered="true"  objectName="Account" toolTipField="Name">

My Component

<apex:component controller="treeController">
<apex:includeScript value="{!$Resource.Jquery}"/>   

  <apex:outputPanel id="JSRerender">
      <script type="text/javascript">
      var lazyHtml = "";
      function completionMethod()

            id = $(this).attr('id');


    <apex:form >
     <apex:actionFunction name="fetch" action="{!fetchRecords}" reRender="JSRerender,treePanel" oncomplete="fetchComplete()"/>
    <apex:attribute name="objectName" assignTo="{!objectName}" type="String" required="true" description="object Name of which data to be shown"/>


My Controller

    public class treeController {

        //it contains objects of which tree to be shown    
        public String objectName{get;set;}

        //it contains comma sperated list of ToolTip shown on the node of a tree
        public String toolTipField{get;set;}

        public treeController(){

        *it fetches all the records of objectName

        public void fetchRecords(){
//when i put system.debug(objectName)
//it prints Account as object name also it comes only once in this method while i have used two components so it should come twice
//i want once contact to be printed and once account
//where i am going wrong
share|improve this question
Yep, you can use components many times - can you paste your source code? –  user320 Feb 6 '13 at 12:21
What do you mean "second time component works"? What is wrong with the first component? Are the attributes for the first component overriden with attributes from the second one? Explain. –  mast0r Feb 6 '13 at 12:29
Please edit your question and include some of your code. It will make it much easier for the community to help you troubleshoot. –  Jesse Altman Feb 6 '13 at 13:10
Pankaj, you need to make a bit more effort. I've just reviewed about half a dozen of your posts and you never post source code. The only one is one where I took the code you put into a comment and edited your post. For this reason I am voting down this post until you do. Please make a bit more effort. Poor quality posts like this as often as you post drives down the overall quality of the site. Thanks. –  Peter Feb 6 '13 at 13:14
Yes. You can use your component as many times as you want. But as MastOr said, make sure there are no static elements in it. For eg. Siteheaders and sitefooter components. It would make no sense to use such components again in your page. –  Shailesh Deshpande Feb 6 '13 at 15:45
show 1 more comment

1 Answer

Because i don't realy understand your actual problem without any code provided i can only guess. But here are some general minds to this topic.

It works fine until the component don't have "static" elements like css styles or javascript functions whith remain the same (visualforce objects like output panels get unique ids).

For example we have the following component "MyComponent":

    <apex:attribute name="customColor" type="String" required="false"/>

        .myStyle { color:{!customColor}; }

    <apex:outputText styleClass="myStyle" value="Please click here" />

Now we will insert this component twice at our page and give two different values for the "customColor". First one we want to get red color, for the second one - green:

    Text 1: <c:MyComponent customColor="red" /> <br/>
    Text 2: <c:MyComponent customColor="green" />

The result looks like this:

enter image description here

This is because the same css style was rendered twice at the main page and the second one won, that is overrides the first style. The same thing happens with javascript functions.

To work around this problem just insert an unique id attribute to the component and provide each static object with this parameter. Our component will look then like this:

    <apex:attribute name="id" description="The unique id" type="String" required="true"/>
    <apex:attribute name="customColor" description="" type="String" required="false"/>

        .myStyle{!id} { color:{!customColor}; }

    <apex:outputText styleClass="myStyle{!id}" value="Please click here" />

At the page we must to enter an id for each instance of component:

    Text 1: <c:MyComponent id="First" customColor="red" /> <br/>
    Text 2: <c:MyComponent id="Second" customColor="green" />

And now our main page will be rendered correctly, because each has an unique id:

enter image description here

share|improve this answer
This is it, exactly. @Pankaj, you need to make use of your id attribute to make sure names are unique in your component. For example, JSRerender could be JSRerender_{!id}. The post at boards.developerforce.com/t5/Visualforce-Development/… points to conflicting actionFuntion names, so be sure to do apex:actionFunction name="fetch_{!id}"... –  tomlogic Feb 18 '13 at 16:55
add comment

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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