0

selectbox があるフォームと、デフォルトの赤色の inputtext フィールドがあります。

そのチェックボックスが選択されたときにinputtextfieldの色を変更したい。

どうやってやるの？

この方法で達成しようとしていますが、色を変えることができません。

ポジョ:

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>
4

3 に答える 3

2

ダニエルが提案したアプローチを使用できます。または、わずかに異なるバージョンがこれになります

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

不要なマークアップと処理を節約できます!

sign1更新：ところで、サーバー側でブール値フラグを反映する必要がない場合は、これらのイベントをJavascriptでうまく処理できます

于 2012-05-09T06:14:42.547 に答える
2

@Danielが言及したようにjQueryを使用した代替アプローチは、次のようになります：styleClassあなたのスタイルクラスを定義しますcss：

.red {
    background-color: red;
}

.blue{
    background-color: blue;
}

1つだけにp:inputTextして（2つを切り替えるアプローチは本当に間違っています）、それにastyleClass="red"を追加します。

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

次に、この関数を定義します。

<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>

そしてそれを使用しますp:selectBooleanCheckbox：

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

注 1: [id*="+param+"] jQuery では、primefaces がids要素 ( p:inputText) をラップするもの (例: 、...) に応じてform追加dataTableされるためです。基本的に[id*="+param+"]、追加されたこれらをエスケープidsして、目的の を見つけることができますinputText。

注 2: red クラスのみを使用する場合は、次を使用できます。

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

編集：このアプローチは、@NikhilPatilの回答へのコメントで言及した初期段階では問題ありません。

于 2012-05-09T06:54:35.770 に答える
1

開始するには、IDをあなたに追加します<h:panelGroup id="myWrapper">

をこれに変更p:ajaxします<p:ajax update="myWrapper" ....

レンダリングされていない要素を更新することはできません...この類似の問題を読んでください

または、別の解決策 (primefaces を使用しているため) に変更<h:panelGroup>し<p:outputPanel id="panel" autoUpdate="true">、残りはすべてそのままにしておくことです。

出力パネルは、いくつかの使用例を持つコンテナー要素です。この例では、autoUpdate outputPanel を使用して、最初はページに存在せず、条件に基づいてレンダリングされたコンポーネント ページを更新します。

出力パネル

しかし、色を変更しようとしている方法は完全に間違っています...要素を非表示にして表示する代わりに、1つの要素のcss属性を変更する必要があります...

このように2つのcssクラスを定義します

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


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

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

styleClass=""あなたの<p:inputText id="hppa1"

このような

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

String changeColorBean + getter/setter に追加し、その値をclassOneからclassTwo...に変更します。

于 2012-05-09T06:07:40.350 に答える