JSF Primefaces单选按钮显示/隐藏/启用一个textarea单选、按钮、JSF、Primefaces

2023-09-10 20:19:13 作者:野似温柔猫

试图重构下面的JSP版本是/否/ NA /解决使用JSF和Primefaces清单:

Trying to refactor the following JSP version for a Yes/No/NA/Resolved checklist using JSF and Primefaces:

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

中的列标题了截止图像,但它们分别是: Q号|问|科|是|没有|没有原因| N / A |解决了吗?

The Column headings got cutoff in image but they are: Q No. | Question | Section | Yes | No | No Reason | N/A | Resolved?

使用旧的JSP,如果用户点击了不广播,这将使他们能够在无理由中输入文字,但如果他们改变主意的话,仍然可以单击是或N / A电台和无理由文本框将灰色并停用。无线电价值并没有真正改变,直到用户点击提交按钮,所以解决的复选框,并没有出现,直到他们点击否,并提交表单。

With the old JSP, if user clicked the "no" radio, it would allow them to enter text under "No Reason" but if they change their minds they could still click the "yes" or the "n/a" radio and the "No Reason" textbox would grey and disable. The radio value didn't really change until the user clicked the submit button, so the Resolved checkbox didn't appear until they clicked "No" and submitted the form.

但随着JSF和数据表,我不知道如何引用的textareas每一行中,我在旧的jsp做到了。因此,基于帮助下BalusC这个职位的数量型清单JSF禁止输入框,在UI的复选框:重复上我尝试使用Ajax以下JSF复合组件:

But with JSF and datatable I don't know how to reference the textareas in each row as I did in the old Jsp. So based on help from BalusC with this post for a Quantity type checklist JSF disable inputbox with a checkbox in a ui:repeat on a composite component I tried the following JSF using Ajax:

<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是可行的。

The problem with Ajax is it is changing the value immediately causing the behavior of the form to be different than with jsp. I'm not sure how to proceed, whether this is even feasible with Ajax.

我也一直在玩弄更具体的渲染和更新

I've also been playing around with more specific render and updates

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

找不到组件与前pression:TEXA从引用的j_idt19:j_idt48:0:j_idt99:j_idt101:dataTable中:2:TEXA。

Cannot find component with expression ":texa" referenced from "j_idt19:j_idt48:0:j_idt99:j_idt101:dataTable:2:texa".

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

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

推荐答案

首先,当你打算AJAX的更新有条件地渲染的成分,那么你需要把它包在其中始终呈现和Ajax更新它,而不是其他组件。否则JS无法找到任何东西在HTML DOM更换节点。

First, when you intend to ajax-update conditionally rendered components, then you need to wrap it in another component which is always rendered and ajax-update it instead. Otherwise JS can't find anything in the HTML DOM to replace the nodes.

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

然后,您可以只使用一台相对客户端ID在&LT;号码:AJAX更新&GT;

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

参见:

Ajax更新/渲染不会对已呈现的属性的组件工作 How找出成分为Ajax更新客户端ID /渲染?无法找到EX pression&QUOT组成部分;富&QUOT;酒吧&QUOT;从&QUOT引用

See also:

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"