function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
SamCousinsSamCousins 

Persist CSS between rerender

I have an VisualForce page set up like this: 
<apex:actionPoller interval="5" reRender="panel" action="{!getPanelRecords}"/>

<apex:outputPanel id="panel">
    <button onClick = "btnClick(this,'blue');" value="Change me blue"/>
    <button onClick = "btnClick(this,'red');" value="Change me red"/>
</apex:outputPanel>

<script>
    function btnClick(element, color) {
        this.attr('color', color);
    }
</script>

When I click the button, it will change color, But due to the panel getting rerendered, it will not persist between refreshes.

I was thinking of using the actionPoller onComplete event to get a list of id's and set the colors accordingly, but I'm not sure if there's an easier/better way to achieve this.

Can anybody recommend how to store the changed CSS on multiple elements between refreshes?
Best Answer chosen by SamCousins
Jayamaruthyraman JaganathJayamaruthyraman Jaganath
I modified the code and tested it. Here is the modified code. Apologies for the previous response uploaded without testing.

<apex:page controller="PanelColorController">
 <script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
    <apex:form > 
     
         <apex:actionPoller interval="5" reRender="panel" action="{!getPanelRecords}">
        
         </apex:actionPoller>

        <apex:outputPanel id="panel">
           <apex:commandButton value="Change me red" action="{!setRedColor}" style="color: {!color2}" rerender="panel"/>
            <apex:commandButton value="Change me blue" action="{!setBlueColor}" style="color: {!color1}" rerender="panel"/>
            {!panelContent}
        </apex:outputPanel>

        <script>
            function btnClick(element, color) {
                $(element).css({'color': color});
            }
        </script>
    
    </apex:form>
</apex:page>

public with sharing class PanelColorController {

    public PageReference setRedColor() {
        color2 = 'Red';
        return null;
    }


    public PageReference setBlueColor() {
    color1 = 'blue';
        return null;
    }


public string color1 { get; set; }
public string color2 { get; set; }

private integer i;

    public PanelColorController () { i = 0; }
    public string panelContent { get; set; }

    public PageReference getPanelRecords() {
    i = i + 1;
        panelContent = String.valueOf(i);
        return null;
    }

}

All Answers

SrikanthKuruvaSrikanthKuruva
Do you really have to poll every 5 seconds to get the PanelRecords? is it not evough to retrieve the records just once(may be in the constructor or in the action attribute of VF page)?
SamCousinsSamCousins
@SrikanthKuruva - It's just an example. The interval does not matter for the purposes of this question. :)
sandeep madhavsandeep madhav
Hi,

Try to Use onSubmit/OnComplete function.

https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_compref_actionPoller.htm

Hope this helps.
Jayamaruthyraman JaganathJayamaruthyraman Jaganath
I modified your code to match the following:

<apex:page controller="PanelColorController">
 <script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
    <apex:form > 
     
         <apex:actionPoller interval="5" reRender="panel" action="{!getPanelRecords}">
        
         </apex:actionPoller>

        <apex:outputPanel id="panel">
            <button onClick = "btnClick(this,'blue'); return false;">Change me blue</button>
            <button onClick = "btnClick(this,'red'); return false;">Change me red</button>
        </apex:outputPanel>

        <script>
            function btnClick(element, color) {
                $(element).css({'color': color});
            }
        </script>
    
    </apex:form>
</apex:page>

public with sharing class PanelColorController {

public string color1 { get; set; }
public string color2 { get; set; }

    public PageReference getPanelRecords() {
        return null;
    }

}
Jayamaruthyraman JaganathJayamaruthyraman Jaganath
I modified the code and tested it. Here is the modified code. Apologies for the previous response uploaded without testing.

<apex:page controller="PanelColorController">
 <script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
    <apex:form > 
     
         <apex:actionPoller interval="5" reRender="panel" action="{!getPanelRecords}">
        
         </apex:actionPoller>

        <apex:outputPanel id="panel">
           <apex:commandButton value="Change me red" action="{!setRedColor}" style="color: {!color2}" rerender="panel"/>
            <apex:commandButton value="Change me blue" action="{!setBlueColor}" style="color: {!color1}" rerender="panel"/>
            {!panelContent}
        </apex:outputPanel>

        <script>
            function btnClick(element, color) {
                $(element).css({'color': color});
            }
        </script>
    
    </apex:form>
</apex:page>

public with sharing class PanelColorController {

    public PageReference setRedColor() {
        color2 = 'Red';
        return null;
    }


    public PageReference setBlueColor() {
    color1 = 'blue';
        return null;
    }


public string color1 { get; set; }
public string color2 { get; set; }

private integer i;

    public PanelColorController () { i = 0; }
    public string panelContent { get; set; }

    public PageReference getPanelRecords() {
    i = i + 1;
        panelContent = String.valueOf(i);
        return null;
    }

}
This was selected as the best answer