<apex:component >

<apex:attribute name="test_attribute" type="String" description="Test Attribute"/>

<apex:outputPanel id="thePanel" rendered="{!IF(test_attribute='first',TRUE,FALSE)}">
    <p>From first panel</p>

<apex:outputPanel id="thatpanel" rendered="{!IF(test_attribute='second',TRUE,FALSE)}">
    <p>From second panel</p>

Visualforce page::

    <apex:page >
    <apex:includeScript value="{!$Resource.Jquery_1_11_3}"/>

    <script type="text/javascript">
        function testFunction(variable){
            if(variable == "first"){

            }else if(variable == "second"){
            console.log('component attribute is now set to '+ $("[id$='componentId']").attr("test_attribute"));

        <apex:actionFunction name="refreshPanel" rerender="componentPanel"/>
        <a href="#" onclick="testFunction('first')">Click for First component panel</a>
        <a href="#" onclick="testFunction('second')">Click for Second component panel</a>
        <apex:outputPanel id="componentPanel">
            <c:TestComponent id="componentId" test_attribute="first"/>


enter image description here

enter image description here

I have two links on Visualforce page. Clicking on each link will invoke a javascript function which will set the component attribute to a different value and calls the action function which rerenders the outputPanel which contains the component.

I posted the complete code including screenshot and console log showing that component attribute is changing but it is not rerendering.

Any help on this??

1 Answer 1


The below code finally worked..Looks like we cannot modify the attribute value of the component via javascript and expect it to rerender. Spent almost half day to learn this :)

Hopefully this helps somebody in the future..

<apex:page controller="CustomController">

    <apex:form >

        <apex:actionFunction name="refreshPanel" rerender="componentPanel">
            <apex:param name="myParam" value="" assignTo="{!test_String}"/>

        <a href="#" onclick="refreshPanel('first'); return false;">Click for First component panel</a>
        <a href="#" onclick="refreshPanel('second'); return false;">Click for Second component panel</a>

        <apex:outputPanel id="componentPanel">
            <c:TestComponent id="componentId" test_attribute="{!test_String}"/>



You must log in to answer this question.

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