4

JSF と Primefaces は初めてです。最初の selectonemenu でユーザーが選択した値に応じて、2 番目の selectonemenu を有効または無効にしたいと考えていました。有効化/無効化のために、クライアント側でやりたかったのでページに Java Script を書きましたが、primefaces コンポーネントで Java スクリプト関数を呼び出す方法がわかりません。

コードサンプル

        <h:head>
        <style type="text/css">
    .ui-widget,.ui-widget .ui-widget {
        font-size: 12px !important;
    }
    </style>
        <script>
            function disableOneMenu() {
                alert("In Disable One Menu Function...");
                var clickedGroup = document.getElementById('groupOneMenu').value;
                alert("Selected Value " + clickedGroup);
                if (clickedGroup == "Designation") {
                    document.getElementById('designation').disabled = true;
                    alert("Location One Menu Disabled...");
                } 
            }
        </script>
        <link type="text/css" rel="stylesheet"
            href="#{request.contextPath}/themes/redmond/skin.css" />
    </h:head>
    <h:body>
        <h:form>
            <p:layout fullPage="true">
                <p:layoutUnit position="north" size="30"
                    header="HCV : Peer Group Analysis" resizable="true">
                </p:layoutUnit>
                <p:layoutUnit id="contentLayout" position="west" size="200">
                    <h:panelGrid columns="2">
                        <h:outputText value="Analyse for values of attribute: " />
                        <p:selectOneMenu id="groupOneMenu" value="#{userInput.groupAttr}"
                            style="font-size:18;font-weight:bold;color:blue;width:100">
                            <f:selectItem itemLabel="Select One" itemValue="" />
                            <f:selectItems value="#{userInput.groupAttrList}" />
                            <p:ajax event="valueChange" actionListener="disableOneMenu" />
                        </p:selectOneMenu>
                        <h:outputText value="Designation: " />
                        <p:selectOneMenu id="designatinoOneMenu"
                            value="#{userInput.designation}"
                            style="font-size:18;font-weight:bold;color:blue;width:100">
                            <f:selectItem itemLabel="Select One" itemValue="" />
                            <f:selectItems value="#{userInput.designationList}" />
                        </p:selectOneMenu>
                       </h:panelGrid>
            </p:layoutUnit>
        </p:layout>
    </h:form>
</h:body>
</html>

助けてください、xhtmlページでJavaスクリプトを使用するにはどうすればよいですか..

ありがとう..

4

3 に答える 3

4

PrimeFaces コンポーネントの JavaScript API は、ほとんどが文書化されています。DOM 変数にはdisable()とメソッドがあります。enable()

widgetVar属性を使用して、この変数に名前を付ける必要があります。

<p:selectOneMenu id="myMenu" widgetVar="myMenuWidget" ... />

JavaScript で呼び出すことができます。

myMenuWidget.disable();

widgetVarID とは異なる必要があります。IE は、(FireFox とは対照的に) ID とグローバル JS 変数に同じ名前空間を使用しています。

于 2013-06-06T06:24:31.763 に答える
0

それを試してみてください！

<script>
  function disableOneMenu() {

    PF('designatinoOneMenuWV').disabled();
  }
</script>

<p:selectOneMenu id="groupOneMenu" value="#{userInput.groupAttr}" 
      style="font-size:18;font-weight:bold;color:blue;width:100" onchange="disableOneMenu()">
  <f:selectItem itemLabel="Select One" itemValue="" />
  <f:selectItems value="#{userInput.groupAttrList}" />
</p:selectOneMenu>

<p:selectOneMenu id="designatinoOneMenu" widgetVar="designatinoOneMenuWV"
      value="#{userInput.designation}" style="font-size:18;font-weight:bold;color:blue;width:100">
  <f:selectItem itemLabel="Select One" itemValue="" />
  <f:selectItems value="#{userInput.designationList}" />
</p:selectOneMenu>
于 2017-07-26T10:08:51.143 に答える