<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}"/>



Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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