Apex Code Development You need to sign in to do that
Don't have an account?
Conditional If is not working in StyleClass attribute of command button in Visualforce Page?
Hi,
I am using Conditional if condition in styleClass attribute of <apex:commandbutton> to render a button class as per value selected by picklist, but it is not working.
Below is my picklist and command button
<div class="sortStyle11">
<b style="margin-right: 8px;"> Sort by Relevance:</b>
<apex:selectList size="1" value="{!pickvalueForSubsUnSubs}">
<apex:actionSupport event="onchange" action="{!perform}" rerender="table1k"/>
<apex:selectOption itemLabel="--None--" itemValue="--None--" ></apex:selectOption>
<apex:selectOption itemLabel="Subscribed" itemValue="Subscribed" ></apex:selectOption>
<apex:selectOption itemLabel="Unsubscribed" itemValue="Unsubscribed"></apex:selectOption>
</apex:selectList>
<apex:commandButton value="Search records" action="{!MassSubORUnSub}" styleClass="{!IF(pickvalueForSubsUnSubs == '--None--','check', IF(pickvalueForSubsUnSubs == 'Unsubscribed','SubscribedClass', 'UnSubscribedClass'))}}" style="width: 153px;border-radius: 17px;line-height: 2;margin-left: 10px;"/>
</div>
Initally i want button to be hide and when pickilst value is subscribed I want to rendered one UnSubscribedClass and same for another.
Regards,
Sangeet
I am using Conditional if condition in styleClass attribute of <apex:commandbutton> to render a button class as per value selected by picklist, but it is not working.
Below is my picklist and command button
<div class="sortStyle11">
<b style="margin-right: 8px;"> Sort by Relevance:</b>
<apex:selectList size="1" value="{!pickvalueForSubsUnSubs}">
<apex:actionSupport event="onchange" action="{!perform}" rerender="table1k"/>
<apex:selectOption itemLabel="--None--" itemValue="--None--" ></apex:selectOption>
<apex:selectOption itemLabel="Subscribed" itemValue="Subscribed" ></apex:selectOption>
<apex:selectOption itemLabel="Unsubscribed" itemValue="Unsubscribed"></apex:selectOption>
</apex:selectList>
<apex:commandButton value="Search records" action="{!MassSubORUnSub}" styleClass="{!IF(pickvalueForSubsUnSubs == '--None--','check', IF(pickvalueForSubsUnSubs == 'Unsubscribed','SubscribedClass', 'UnSubscribedClass'))}}" style="width: 153px;border-radius: 17px;line-height: 2;margin-left: 10px;"/>
</div>
Initally i want button to be hide and when pickilst value is subscribed I want to rendered one UnSubscribedClass and same for another.
Regards,
Sangeet
<style> .subscribedclass { color: red !important; } .unsubscribedclass { color: goldenrod !important; } .check { display: none !important; } </style> <apex:form > <apex:outputPanel id="table1k"> <div class="sortStyle11"> <b style="margin-right: 8px;"> Sort by Relevance:</b> <apex:selectList size="1" value="{!pickvalueForSubsUnSubs}"> <apex:actionSupport event="onchange" action="{!perform}" rerender="table1k"/> <apex:selectOption itemLabel="--None--" itemValue="--None--" ></apex:selectOption> <apex:selectOption itemLabel="Subscribed" itemValue="Subscribed" ></apex:selectOption> <apex:selectOption itemLabel="Unsubscribed" itemValue="Unsubscribed"></apex:selectOption> </apex:selectList> <apex:commandButton value="{!pickvalueForSubsUnSubs}" action="{!MassSubORUnSub}" styleClass="{!If(pickvalueForSubsUnSubs = '--None--','check', if(pickvalueForSubsUnSubs='Subscribed','subscribedclass','unsubscribedclass'))}" style="width: 153px;border-radius: 17px;line-height: 2;margin-left: 10px;"/> </div> </apex:outputPanel> </apex:form>One thing I noticed in your code, the formula of style calss if sentence is incorrect. There was a extra } in the formula.With the style, please make sure !important is added to each attribute when change apex:commandbutton style.
All Answers
<style> .subscribedclass { color: red !important; } .unsubscribedclass { color: goldenrod !important; } .check { display: none !important; } </style> <apex:form > <apex:outputPanel id="table1k"> <div class="sortStyle11"> <b style="margin-right: 8px;"> Sort by Relevance:</b> <apex:selectList size="1" value="{!pickvalueForSubsUnSubs}"> <apex:actionSupport event="onchange" action="{!perform}" rerender="table1k"/> <apex:selectOption itemLabel="--None--" itemValue="--None--" ></apex:selectOption> <apex:selectOption itemLabel="Subscribed" itemValue="Subscribed" ></apex:selectOption> <apex:selectOption itemLabel="Unsubscribed" itemValue="Unsubscribed"></apex:selectOption> </apex:selectList> <apex:commandButton value="{!pickvalueForSubsUnSubs}" action="{!MassSubORUnSub}" styleClass="{!If(pickvalueForSubsUnSubs = '--None--','check', if(pickvalueForSubsUnSubs='Subscribed','subscribedclass','unsubscribedclass'))}" style="width: 153px;border-radius: 17px;line-height: 2;margin-left: 10px;"/> </div> </apex:outputPanel> </apex:form>One thing I noticed in your code, the formula of style calss if sentence is incorrect. There was a extra } in the formula.With the style, please make sure !important is added to each attribute when change apex:commandbutton style.
I have used your code it is working fine, but now I have a issue with rerender id because i have 2 filter on page and i am rendering all values in page block table so it is giving duplicate id issue,
Will you please tell how I can solve this by adding your code, both filter need to be synced.
Below is my code for both filters-
<div class="slds-grid slds-wrap">
<div class="slds-col slds-size_12-of-12">
<apex:outputPanel id="table1">
<div class="sortStyle11">
<b style="margin-right: 8px;"> Sort by Relevance:</b>
<apex:selectList size="1" value="{!pickvalueForSubsUnSubs}">
<apex:actionSupport event="onchange" action="{!perform}" rerender="table1"/>
<apex:selectOption itemLabel="--None--" itemValue="--None--" ></apex:selectOption>
<apex:selectOption itemLabel="Subscribed" itemValue="Subscribed" ></apex:selectOption>
<apex:selectOption itemLabel="Unsubscribed" itemValue="Unsubscribed"></apex:selectOption>
</apex:selectList>
<apex:commandButton value="{!If(pickvalueForSubsUnSubs = 'Subscribed','UnsubscribeAll', 'SubscribeAll')}" action="{!MassSubORUnSub}" styleClass="{!If(pickvalueForSubsUnSubs = '--None--','check', if(pickvalueForSubsUnSubs='Subscribed','subscribedclass','unsubscribedclass'))}" style="width: 153px;border-radius: 17px;line-height: 2;margin-left: 10px;"/>
</div>
<div class="sortStyle">
<b style="margin-right: 8px;"> Sort by Relevance:</b>
<apex:selectList size="1" value="{!subPickvalue}">
<apex:actionSupport event="onchange" action="{!perform}" rerender="table1"/>
<apex:selectOption itemLabel="--None--" itemValue="--None--" html-selected="true" ></apex:selectOption>
<apex:selectOption itemLabel="Recently Created" itemValue="createdDate" ></apex:selectOption>
<apex:selectOption itemLabel="Recently Modified" itemValue="lastModifiedDate"></apex:selectOption>
</apex:selectList>
</div>
</apex:outputPanel>
</div>
</div>
<apex:pageBlockTable value="{!subsD}" var="srh" border="1" id="table1">
</apex:pageBlockTable>
Regards,
Sangeet
<apex:pageBlockTable value="{!subsD}" var="srh" border="1" id="table2">
</apex:pageBlockTable>
If you want to rerender both table1 and table2, change the rerender attribute of apex:actionSupport as below:
<apex:actionSupport event="onchange" action="{!perform}" rerender="table1,table2"/>
I have only one table but two filters are present-
1. Sort by Subscribed Record.
2. Sort by relevant
When I sort with Subscribed record this need to filter out from table and and at same time button should popup for unsubscribed All
And for second sorting by relevant like with created date
Using both i am rerendering the pageblocktable first filter is having rerender="table1" and same for another filter rerender="table1"
but you have added outputpanel with id="table1" for sorting same id is also present with pageblocktable.
So thats why it is giving Error as duplicate id.
Please help me to resolve this issue.
Regards,
Sangeet
<apex:outputPanel id="table2">
and actionsuupport.
<apex:actionSupport event="onchange" action="{!perform}" rerender="table2"/>