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

Question

尝试使用 JSF 和 Primefaces 为 Yes/No/NA/Resolved 清单重构以下 JSP 版本：

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

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

对于旧的 JSP，如果用户单击“否”单选，它将允许他们在“无理由”下输入文本，但如果他们改变主意，他们仍然可以单击“是”或“不适用”收音机和“无理由”文本框将变灰并禁用。在用户单击提交按钮之前，单选值并没有真正改变，因此在他们单击“否”并提交表单之前，不会出现“已解决”复选框。

但是对于 JSF 和数据表，我不知道如何像在旧 Jsp 中那样引用每一行中的文本区域。因此，根据 BalusC 对 Quantity 类型清单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-update 时，您需要将其包装在另一个始终渲染的组件中并改为 ajax-update。否则 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"