change color of inputtextfield on select booleancheckbox

Question

I have a form in which there is a selectbox, and a inputtext field with default red color.

I want to change color of inputtextfield when that checkbox is selected.

How can I do that?

I am trying to achieve in this way, but unable to get change color.

pojo:

private Boolean changeColor=false;
    private boolean sign1;

public void ChangeColorEvent(){
        System.out.println("inside color change event");

        changeColor=true;
        sign1=true;
        }



<h:outputText value="understood and Signed?: " />  
            <p:selectBooleanCheckbox  label="Yes" value="#{patient.sign1}" >
            <p:ajax update="hppa1" listener="#{patient.ChangeColorEvent}" /> 
            </p:selectBooleanCheckbox>
    <h:panelGroup>
    <p:inputText id="hppa" size="5" style="color:White;background:Red;" rendered="#{!patient.changeColor}" />
    <p:inputText id="hppa1" size="5" rendered="#{patient.changeColor}" style="color:White;background:Green;"/>
    </h:panelGroup>

Please read about the `change()` and `css()` method of `jQuery`. The answer lies there. And please do mention what have you tried so far in the question. Just asking a question without even trying won't fetch you any answers here on stackoverflow. — Niks, May 09 '12 at 05:42
I have edited my question, please tell me what am doing wrong? — Java, May 09 '12 at 05:56

Niks · Accepted Answer · 2012-05-09T06:20:32.323

3

You can use the approach suggested by Daniel. Or a slightly different version would be this

<p:inputText id="hppa1" size="5" style="#{patient.changeColor eq true ? 'color:White;background:Green;' : 'color:White;background:Red;'}"/>

Saves you unnecessary markup and processing!

UPDATE: btw, you can very well handle these events in Javascript if you do not need any server side reflection of the sign1 boolean flag

edited May 09 '12 at 06:20

answered May 09 '12 at 06:14

Niks

4,802
4
36
55

its working fine.but when but when i go to back or next page and agin comes to same page, it remains clicked , it should get comes his initial stage until i save it. if I refreshed also,it should need to its intial satge(i.e by default red and unclicked) right? – Java May 09 '12 at 06:40
Unless you use `RequestScoped` or `ViewScoped` bean, you are going to face this problem. That is why my first comment was a `jQuery` (client side) solution. I think @Fallup has given exactly what you need. – Niks May 14 '12 at 04:59

Fallup · Answer 2 · 2012-05-09T07:01:57.513

Alternative approach with jQuery using styleClass as @Daniel mentioned would be like this : Define style classes in your css:

.red {
    background-color: red;
}

.blue{
    background-color: blue;
}

Have just one p:inputText (your approach with switching between two of them is really wrong) and add a styleClass="red" to it.

<p:inputText id="inputID" styleClass="red"/>

Then define this function :

<script type="text/javascript">
        function changeColor(param){
          if (jQuery("[id*="+param+"]").hasClass('red')){
              jQuery("[id*="+param+"]").removeClass('red');
              jQuery("[id*="+param+"]").addClass('blue');
          }
          else {
              jQuery("[id*="+param+"]").removeClass('blue');
              jQuery("[id*="+param+"]").addClass('red');

          }

        };
    </script>

And use it in p:selectBooleanCheckbox:

<p:selectBooleanCheckbox onchange="changeColor('inputID')"/>

Note 1: [id*="+param+"] in jQuery is because primefaces adds ids to your element (p:inputText) depending on what wraps it (eg. form, dataTable, ...). With [id*="+param+"] you can basically escape these added ids and find your desired inputText.

Note 2: If you want to work only with red class you can use :

function changeColor(param){
              jQuery("[id*="+param+"]".toggleClass('red'));       
            };

EDIT: This approach has no problem with initial stage which you mentioned in comment to @NikhilPatil answer.

score 1 · Answer 3 · edited May 23 '17 at 12:20

for start add id to your <h:panelGroup id="myWrapper">

and change the p:ajax to this <p:ajax update="myWrapper" ....

You can't update elements that are not rendered... read this Similar issue

Or , an alternative solution (since you are using primefaces) is to change your <h:panelGroup> into <p:outputPanel id="panel" autoUpdate="true"> and leave alll the rest the way it was

Output panel is a container element with several use cases, this example uses an autoUpdate outputPanel to update a component page which doesn't exist on page initially and rendered based on a condition.

Output Panel

But the way you are trying to change color is completely wrong... instead of hiding and displaying the element you should modify the css attributes of ONE element...

define 2 css classes like this

.classOne{
    color:White;
    background:Red;
}


.classTwo{
    color:White;
    background:Green;
}

.classThree{
    color:White;
    background:Blue;
}

and change the styleClass="" of your <p:inputText id="hppa1"

like this

 <p:inputText id="hppa1" styleClass="#{patient.className}".....

add String changeColor to your bean + getter/setter and change its values from classOne to classTwo ....

change color of inputtextfield on select booleancheckbox

3 Answers3