web-dev-qa-db-ja.com

JSFでコンポーネントを表示/非表示するにはどうすればよいですか？

JSFでコンポーネントを表示/非表示するにはどうすればよいですか？私は現在、javascriptの助けを借りて同じことを試みていますが、成功していません。サードパーティのライブラリを使用できません。

ありがとう|アブヒ

javajavascriptjsf
20
Abhishek Dhote

通常、 clientId を介してコントロールへのハンドルを取得する必要があります。この例では、リクエストスコープバインディングを持つJSF2 Faceletsビューを使用して、他のコントロールへのハンドルを取得します。

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://Java.Sun.com/jsf/html">
  <h:head><title>Show/Hide</title></h:head>
  <h:body>
    <h:form>
      <h:button value="toggle"
               onclick="toggle('#{requestScope.foo.clientId}'); return false;" />
      <h:inputText binding="#{requestScope.foo}" id="x" style="display: block" />
    </h:form>
    <script type="text/javascript">
      function toggle(id) {
        var element = document.getElementById(id);
        if(element.style.display == 'block') {
          element.style.display = 'none';
        } else {
          element.style.display = 'block'
        }
      }
    </script>
  </h:body>
</html>

正確にこれを行う方法は、作業中のJSFのバージョンによって異なります。古いJSFバージョンについては、このブログ投稿を参照してください： JSF：コンポーネント識別子の操作 。

13
McDowell

実際にこれを達成することができますなし JavaScript、JSFのrendered属性のみを使用して、panelGroupなどの再レンダリング可能なコンポーネントで表示/非表示の要素を囲むことにより、少なくともJSF2では。たとえば、次のJSFコードは、3番目の値に応じて2つのドロップダウンリストの一方または両方を表示または非表示にします。 AJAXイベントを使用して表示を更新します。

<h:selectOneMenu value="#{workflowProcEditBean.performedBy}">
    <f:selectItem itemValue="O" itemLabel="Originator" />
    <f:selectItem itemValue="R" itemLabel="Role" />
    <f:selectItem itemValue="E" itemLabel="Employee" />
    <f:ajax event="change" execute="@this" render="perfbyselection" />
</h:selectOneMenu>
<h:panelGroup id="perfbyselection">
    <h:selectOneMenu id="performedbyroleid" value="#{workflowProcEditBean.performedByRoleID}"
                     rendered="#{workflowProcEditBean.performedBy eq 'R'}">
        <f:selectItem itemLabel="- Choose One -" itemValue="" />
        <f:selectItems value="#{workflowProcEditBean.roles}" />
    </h:selectOneMenu>
    <h:selectOneMenu id="performedbyempid" value="#{workflowProcEditBean.performedByEmpID}"
                     rendered="#{workflowProcEditBean.performedBy eq 'E'}">
        <f:selectItem itemLabel="- Choose One -" itemValue="" />
        <f:selectItems value="#{workflowProcEditBean.employees}" />
    </h:selectOneMenu>
</h:panelGroup>
58
Kevin Rahe

H-namespaceのすべてではないにしても、ほとんどのタグで使用可能な「レンダリング済み」属性を使用します。

<h:outputText value="Hi George" rendered="#{Person.name == 'George'}" />
4
Thorbjørn Ravn Andersen

1つの明らかな解決策は、javascript（JSFではない）を使用することです。 JSFでこれを実装するには、AJAXを使用する必要があります。この例では、ラジオボタングループを使用して、2セットのコンポーネントを表示および非表示にします。バックBeanでは、ブールスイッチを定義します。

private boolean switchComponents;

public boolean isSwitchComponents() {
    return switchComponents;
}

public void setSwitchComponents(boolean switchComponents) {
    this.switchComponents = switchComponents;
}

スイッチがtrueの場合、コンポーネントの1つのセットが表示され、falseの場合、他のセットが表示されます。

 <h:selectOneRadio value="#{backbean.switchValue}">
   <f:selectItem itemLabel="showComponentSetOne" itemValue='true'/>
   <f:selectItem itemLabel="showComponentSetTwo" itemValue='false'/>
   <f:ajax event="change" execute="@this" render="componentsRoot"/>
 </h:selectOneRadio>


<H:panelGroup id="componentsRoot">
     <h:panelGroup rendered="#{backbean.switchValue}">
       <!--switchValue to be shown on switch value == true-->
     </h:panelGroup>

   <h:panelGroup rendered="#{!backbean.switchValue}">
      <!--switchValue to be shown on switch value == false-->
   </h:panelGroup>
</H:panelGroup>

注：ajaxイベントでは、コンポーネントのルートをレンダリングします。そもそもレンダリングされないコンポーネントは ajaxイベントで再レンダリングされる にできないためです。

また、「componentsRoot」とラジオボタンが異なるコンポーネント階層の下にある場合にも注意してください。ルート（フォームルート）から参照する必要があります。

0
Mr.Q

以下のコードを確認してください。これはドロップダウンメニュー用です。これで他を選択するとテキストボックスが表示され、そうでなければテキストボックスが非表示になります。

function show_txt(arg,arg1)
{
if(document.getElementById(arg).value=='other')
{
document.getElementById(arg1).style.display="block";
document.getElementById(arg).style.display="none";
}
else
{
document.getElementById(arg).style.display="block";
document.getElementById(arg1).style.display="none";
}
}
The HTML code here :

<select id="arg" onChange="show_txt('arg','arg1');">
<option>yes</option>
<option>No</option>
<option>Other</option>
</select>
<input type="text" id="arg1" style="display:none;">

または、このリンクを確認できます ここをクリック

0
Gitesh Dang