javascript - JSF Primefaces 单选按钮显示/隐藏/启用文本区域

Question

尝试使用 JSF 和 Primefaces 重构以下 JSP 版本以获得“是/否/不适用/已解决” list :

<c:forEach var="qAndA" items="${checklist.answer_attribute_list}">
 ..trim..
<td class="chklist"><input type="radio" name="radio_<c:out value="${qAndA.attribute_id}" />" onclick="this.form.no_<c:out value="${qAndA.attribute_id}" />.disabled=true;this.form.no_<c:out value="${qAndA.attribute_id}" />.style.backgroundColor='#808080';" value="1"></td>
<td class="chklist"><input type="radio" name="radio_<c:out value="${qAndA.attribute_id}" />" onclick="this.form.no_<c:out value="${qAndA.attribute_id}" />.style.backgroundColor='#ffffff';this.form.no_<c:out value="${qAndA.attribute_id}" />.disabled=false;" value="2"></td>
<td class="chklist"><textarea DISABLED onkeyup="sz(this);" style="background:#808080" name="no_<c:out value="${qAndA.attribute_id}" />" cols=19 rows="4" onkeypress="if(this.value.length>499){ alert('You have exceeded the limit of 500 characters. Please edit your entry.'); return false}"></textarea></td>
<td class="chklist"><input type="radio" name="radio_<c:out value="${qAndA.attribute_id}" />" onclick="this.form.no_<c:out value="${qAndA.attribute_id}" />.disabled=true;this.form.no_<c:out value="${qAndA.attribute_id}" />.style.backgroundColor='#808080';" value="3"></td>
<td class="chklist"><input type="checkbox" DISABLED name="check_<c:out value="${qAndA.attribute_id}" />" value="4"></td>

列标题在图像中被 chop ，但它们是:
问号 |问题 |部分|是的 |没有 |没有理由|不适用 |解决？

使用旧的 JSP，如果用户单击“否”单选按钮，将允许他们在“无原因”下输入文本，但如果他们改变主意，他们仍然可以单击"is"或“不适用” radio 和“无原因”文本框将变灰并禁用。直到用户单击“提交”按钮后，单选值才会真正更改，因此，直到用户单击“否”并提交表单后，“已解决”复选框才会出现。

但是对于 JSF 和数据表，我不知道如何像在旧 Jsp 中那样引用每行中的文本区域。因此，基于 BalusC 的帮助，这篇文章提供了数量类型 list JSF disable inputbox with a checkbox in a ui:repeat on a composite component我使用 Ajax 尝试了以下 JSF:

<p:dataTable id="dataTable" value="#{cc.attrs.checklist.answer_attribute_list}" var="qAndA">

    <p:column headerText="Yes" width="50px;">
        <p:selectOneRadio id="yesNoNA" value="#{qAndA.toggle_value}" layout="custom">
            <f:selectItem itemLabel="Yes" itemValue="1" />
            <f:selectItem itemLabel="No" itemValue="2" />
            <f:selectItem itemLabel="NA" itemValue="3" />
            <f:selectItem itemLabel="Resolved" itemValue="4" />
            <p:ajax update="@form" />
        </p:selectOneRadio>

        <p:radioButton id="yes" for="yesNoNA" itemIndex="0" rendered="#{empty qAndA.toggle_value or qAndA.toggle_value == '0'}" />
        <h:outputText value="X" rendered="#{qAndA.toggle_value == '1'}" />
        <h:outputText value="" rendered="#{qAndA.toggle_value == '2' or qAndA.toggle_value == '3' or qAndA.toggle_value == '4'}" />
    </p:column>


    <p:column headerText="No" width="50px;">
        <p:radioButton id="no" for="yesNoNA" itemIndex="1" rendered="#{empty qAndA.toggle_value or qAndA.toggle_value == '0'}" />
        <h:outputText value="X" rendered="#{qAndA.toggle_value == '2' or qAndA.toggle_value == '4'}" />
        <h:outputText value="" rendered="#{qAndA.toggle_value == '1' or qAndA.toggle_value == '3'}" />
    </p:column>

    <p:column headerText="Reason For Attribute Failure" width="250px;">
        <h:inputTextarea value="#{qAndA.fail_reason}" rendered="#{qAndA.toggle_value == '2'}" />
        <h:outputText value="#{qAndA.fail_reason}" rendered="#{empty qAndA.toggle_value or qAndA.toggle_value == '0'}" />
        <h:outputText value="" rendered="#{qAndA.toggle_value == '1' or qAndA.toggle_value == '3'}" />
        <h:outputText value="#{qAndA.fail_reason}" rendered="#{qAndA.toggle_value == '2' or qAndA.toggle_value == '4'}" />THIS ONE IS REDUNDANT
    </p:column>

    <p:column headerText="N/A" width="50px;">
        <p:radioButton id="na" for="yesNoNA" itemIndex="2" rendered="#{empty qAndA.toggle_value or qAndA.toggle_value == '0'}" />
        <h:outputText value="X" rendered="#{qAndA.toggle_value == '3'}" />
        <h:outputText value="" rendered="#{qAndA.toggle_value == '1' or qAndA.toggle_value == '2' or qAndA.toggle_value == '4'}" />
    </p:column>

    <p:column headerText="Resolved *" width="75px;">
        <p:radioButton id="resolved" for="yesNoNA" itemIndex="3" rendered="#{qAndA.toggle_value == '2'}"
        disabled="#{qAndA.toggle_value != '2'}" />
        <h:outputText value="" rendered="#{qAndA.toggle_value == '1' or qAndA.toggle_value == '3'}" />
        <h:outputText value="X" rendered="#{qAndA.toggle_value == '4'}" />
    </p:column>

Ajax 的问题是它会立即更改值，从而导致表单的行为与 jsp 不同。我不确定如何继续，这对于 Ajax 是否可行。

我也一直在尝试更具体的渲染和更新

 <f:ajax  render=":dataTable:2:texa"/>
 <p:ajax update="how to reference specific row" />

找不到包含从“j_idt19:j_idt48:0:j_idt99:j_idt101:dataTable:2:texa”引用的表达式“:texa”的组件。

j_idt19:j_idt48:0:j_idt99:j_idt101:dataTable:ROWID:COMPONENT

Answer 1

首先，当您打算使用 ajax 更新有条件渲染的组件时，您需要将其包装在另一个始终渲染的组件中，然后使用 ajax 更新它。否则 JS 无法在 HTML DOM 中找到任何内容来替换节点。

<p:column ...>
    <h:panelGroup id="reason">
        <h:inputTextarea ... rendered="#{...}" />
        ...
    </h:panelGroup>
</p:column>

然后，您可以在 <p:ajax update> 中使用与表相关的客户端 ID .

<p:column ...>
    <p:selectOneRadio ...>
        ...
        <p:ajax update="reason" />
    </p:selectOneRadio>
</p:column>

另请参阅:

• Ajax update/render does not work on a component which has rendered attribute
• How to find out client ID of component for ajax update/render? Cannot find component with expression "foo" referenced from "bar"