Включить/Отключить SelectOneMenu с помощью Java Script

Question

Я новичок в JSF и Primefaces. Я создаю страницу xhtml, в которой у меня есть два selectonemenu из простых. Мне нужно включить или отключить второй selectonemenu в зависимости от значения, выбранного пользователем в первом selectonemenu. Чтобы включить/отключить, я написал Java Script на странице, так как я хотел сделать это на стороне клиента, но я не знаю, как вызвать функцию java-скрипта в компоненте perffaces.

Пример кода

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

Пожалуйста, помогите, я могу HW использовать Java Script в верстку страницы ..

Спасибо ..

Answer 1

Вы можете использовать disabled атрибуты <h:selectOneMenu> сделать то же самое , вам не нужно использовать java-скрипт.

<h:body> 
    <h:form> 
     <h:outputText value="#{test.visible}"/> 
     <h:selectOneMenu valueChangeListener="#{test.valuChangeHandler}" onchange="submit()" immediate="true"> 
      <f:selectItems value="#{test.opList}"/> 
     </h:selectOneMenu> 
     <h:selectOneMenu disabled="#{!test.visible}"> 
      <f:selectItems value="#{test.testList}"/> 
     </h:selectOneMenu> 
    </h:form> 
</h:body> 

и Bean можно записать в виде:

private boolean visible = false; 
public boolean isVisible() { 
    return visible; 
} 
public void setVisible(boolean visible) { 
    this.visible = visible; 

} 
//Other Codes 
public void valuChangeHandler(ValueChangeEvent changeEvent){ 

    if(changeEvent.getNewValue().toString().trim().equalsIgnoreCase("test1")) 
     setVisible(true); 
} 

Смотрите, если это помогает!

Answer 2

JavaScript API для компонента PrimeFaces в основном документирован. Существуют методы disable() и enable() для переменной DOM.

Вы должны дать имя этой переменной с помощью widgetVar атрибута:

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

Вы можете, чем вызов в JavaScript:

myMenuWidget.disable(); 

widgetVar должен отличаться от ID! IE использует одно и то же пространство имен для идентификаторов и глобальных переменных JS (в отличие от FireFox).

Answer 3

попробуйте!

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