JSF在复合组件上的ui:repeat中禁用带有复选框的输入框 [英] JSF disable inputbox with a checkbox in a ui:repeat on a composite component

问题描述

如何从< ui:repeat> 和复合组件的一部分，以便我可以禁用输入框并使其变灰，如下面的屏幕截图所示?

How can I reference an <h:inputBox> from the <h:selectBooleanCheckbox> which are in a <ui:repeat> and part of a composite component so that I can disable and grey out an input box as depicted in the following screenshot?

<ui:repeat var="qAndA" value="#{cc.attrs.checklist.answer_attribute_list}">
   <td class="chklist"><h:selectBooleanCheckbox  onclick="toggleBox(this, qty_#{qAndA.attribute.attribute_id})" value="#{qAndA.na_value}"> </h:selectBooleanCheckbox></td>
   <td class="chklist"><h:inputText value="#{qAndA.quantity}" id="qty_#{qAndA.attribute.attribute_id}" /></td>

产生此HTML

<input id="j_idt48:2:j_idt94:j_idt94:j_idt167:j_idt171:1:qty_" type="text" name="j_idt48:2:j_idt94:j_idt94:j_idt167:j_idt171:1:qty_" value="6" />

我的 qty _#{qAndA.attribute.attribute_id} 被截断为 qty _

我尝试过

<h:selectBooleanCheckbox  onclick="toggleBox(this, #{cc.attrs.id}_qty)"  value="#{qAndA.na_value}"></h:selectBooleanCheckbox>
<h:inputText value="#{qAndA.quantity}" size="3" maxlength="3" id="#{cc.attrs.id}_qty"/>

我正在尝试将此旧的jsp重构为JSF:

I am trying to refactor this old jsp to JSF:

原始JSP包括:

<SCRIPT>
   function toggleBox(checkName, quantityName) {
      if(checkName.checked) {
         quantityName.disabled=true;
         quantityName.style.backgroundColor="#808080"; 

      } else {
         quantityName.disabled=false;
         quantityName.style.backgroundColor="#FFFFFF"; 
      }
   }
</SCRIPT>

<c:forEach var="qAndA" items="${checklist.answer_attribute_list}">
<c:choose>
   <c:when test="${empty qAndA.na_value || qAndA.na_value == '0'}">
     <td class="chklist"><input type="checkbox" name="check_<c:out value="${qAndA.attribute_id}" />" onclick="toggleBox(this, qty_<c:out value="${qAndA.attribute_id}" />)" value="1"></td>
     <td class="chklist"><input name="qty_<c:out value="${qAndA.attribute_id}" />" type="text" value="<c:out value="${qAndA.quantity}" />" ></td>
  </c:when>

并生成此HTML

<td class="chklist"><input type="checkbox" name="check_1346788339807" onclick="toggleBox(this, qty_1346788339807)" value="1"></td>
<td class="chklist"><input name="qty_1346788339807" type="text" value="6" size="3" maxlength="3"></td>

编辑

quantity_checklist.xhtml复合组件.侦听器是在 checklist.receiving_email 上调用的，但是当它是迭代的一部分时，无论是使用datatable还是ui:repeat

Edit

quantity_checklist.xhtml composite component. the listener is called on the checklist.receiving_email but not when it is part of the iteration, whether I use datatable or ui:repeat

<p:selectBooleanCheckbox value="#{cc.attrs.checklist.receiving_email}">
    <p:ajax listener="#{checklistEdit.listenerTest()}" />
</p:selectBooleanCheckbox>
<h:dataTable var="qnA" value="#{cc.attrs.checklist.answer_attribute_list}">
    <p:column>
       <p:selectBooleanCheckbox value="#{qnA.na_value}">
      <p:ajax render="qty" listener="#{checklistEdit.listenerTest}" update="@all"/>
   </p:selectBooleanCheckbox>
 </p:column>
 <p:column>
    <h:inputText value="#{qnA.quantity}" id="qty" disabled="#{qnA.na_value}" />
 </p:column>
 </h:dataTable>

编辑2

回顾:尝试使用复合框来获取复选框的动态数组以禁用输入框并使其变灰，但是除非我将代码移出复合框，否则没有运气.这是使用复合代码的代码(与有关将旧JSP的代码段重构为等效的JSF?):

WorkItem.xhtml

<ui:repeat var="actionItem" value="#{workItemController.wfiwi.work_action_list}">

<ui:fragment rendered="#{actionItem.workActionClass.workActionType.action_type_id == '2'}">
     <stk:dynamic_checklist actionItem="#{actionItem}" checklist="#{actionItem.meat}" />
</ui:fragment>

dynamic_checklist.xhtml合成

<ui:fragment rendered="#{cc.attrs.checklist.checkListClass.type == '3'}">
    <stk:quantity_checklist actionItem="#{cc.attrs.actionItem}" checklist="#{cc.attrs.checklist}" />
</ui:fragment>

quantity_checklist.xhtml复合如上图所示，是我的第一个修改

quantity_checklist.xhtml composite is shown above in my first Edit

如果我将quantity_checklist代码上移到WorkItem.xhtml文件中，则ajax更新将正常工作，并且数量"输入框将变灰并禁用.但这不能使用复合组件.

If I move the quantity_checklist code up into the WorkItem.xhtml file, the ajax update works and the Qty inputbox is greyed out and disabled. But this won't work using composite components.

请参阅下面的代码... receive_email复选框上的ajax更新会正确影响id ddd 和 poppy ，但是qnA.na_value ajax更新并非如此.换句话说，我在屏幕快照中选中数量6"旁边的不适用"复选框，监听器将触发，并显示我在监听器中设置的素面消息.但是输入框仍处于活动状态，并且未显示为灰色.但是，如果我然后切换"received_email"复选框，则它的侦听器被激发，出现标头消息， AND 屏幕快照中6旁边的QTY框现在变为灰色并被禁用.

see code below...The ajax update on the receiving_email checkboxes properly affects id ddd and poppy but the qnA.na_value ajax update not so. In other words, I check the N/A checkbox next to Qty 6 in screenshot, the listener fires and the primefaces message I set in the listener is shown. But the input box is still active and not greyed out. However, if I then toggle the receiving_email checkbox, it's listener is fired, header message appear, AND the QTY box next to the 6 in the screenshot now goes gray and is disabled.

<h:panelGroup id="ccc">
    <p:selectBooleanCheckbox value="#{cc.attrs.checklist.receiving_email}">
        <p:ajax listener="#{checklistEdit.listenerTest()}" update="ddd,poppy" />
    </p:selectBooleanCheckbox>
</h:panelGroup>
<h:panelGroup id="ddd">
    <h:outputText value="Email Checkbox:"></h:outputText>
    <h:outputText value="#{cc.attrs.checklist.receiving_email}" />
</h:panelGroup>

<h:dataTable var="qnA" value="#{cc.attrs.checklist.answer_attribute_list}" id="poppy">
    <p:column headerText="NA">
        <p:outputLabel id="navalue" value="#{qnA.na_value}"></p:outputLabel>
    </p:column>
    <p:column headerText="NA Checkbox">
        <p:selectBooleanCheckbox value="#{qnA.na_value}">
            <p:ajax listener="#{checklistEdit.checkBoxListenerTest}" update="poppy" />
        </p:selectBooleanCheckbox>
    </p:column>
    <p:column headerText="Quantity">
        <h:inputText value="#{qnA.quantity}" id="qty" disabled="#{qnA.na_value}" />
    </p:column>
</h:dataTable>

推荐答案

我的 qty _#{qAndA.attribute.attribute_id} 被截断为 qty _ ，更不用说所有其他JSF id了，这是因为复合组件是另一个复合组件的子组件，并且使用< ui:fragement>

My qty_#{qAndA.attribute.attribute_id} is getting truncated to qty_ let alone all the other JSF ids prepended, which are because the composite component is a child of another composite component and both components are included conditionally using <ui:fragement>

不.这是因为#{qAndA} 仅在视图渲染期间可用，而不是在视图构建期间可用.< ui:repeat> 在视图渲染期间运行.如果您使用过< c:forEach> ，那么它将按照您期望的方式工作.但是，如您的上一个问题，不幸的是，由于限于旧版的Mojarra 2.1.7，您可能无法使用JSTL来以所需的方式动态构建视图.

No. It's because #{qAndA} is only available during view render time instead of view build time. The <ui:repeat> runs during view render time. If you had used <c:forEach>, then it would have worked the way you expected. But, as indicated by your previous question, you could due to being restricted to old Mojarra 2.1.7 unfortunately not use JSTL to dynamically build the view the way you want.

但是毕竟，您不需要像这样手动使ID动态化.只需指定一个固定的ID即可.

But after all, you don't need to manually make the IDs dynamic like that. Just specify a fixed ID.

<h:inputText id="qty" ... />

< ui:repeat> 将自动在ID中添加迭代索引.另请参见如何将EL与< ui:repeat var>一起使用在JSF组件的id属性中.

The <ui:repeat> will automatically prepend the iteration index in the ID. See also How to use EL with <ui:repeat var> in id attribute of a JSF component.

如何从< ui中的< h:selectBooleanCheckbox> 中引用< h:inputText> :重复> 和 custom 复合组件的一部分，以便我可以禁用输入框并使其变灰，如下面的屏幕截图所示

How can I reference an <h:inputText> from the <h:selectBooleanCheckbox> which are in a <ui:repeat> and part of a custom composite component so that I can disable and grey out an input box as depicted in the following screenshot

只需将输入的 disabled 属性设置为复选框的值，并在切换复选框时使用JSF提供的ajax工具来更新输入:

Just set the input's disabled attribute to checkbox's value and use JSF-provided ajax facility to update the input when the checkbox is toggled:

<h:selectBooleanCheckbox value="#{qAndA.na_value}">
    <f:ajax render="qty" />
</h:selectBooleanCheckbox>
...
<h:inputText id="qty" value="#{qAndA.quantity}" disabled="#{qAndA.na_value}" />

无需其他JS.对于样式，只需将其放入普通的CSS文件中即可:

No additional JS needed. For styling, just put this in a normal CSS file:

input[disabled] {
    background-color: #808080;
}

否则，如果最初禁用了输入，并且您在不通知JSF的情况下使用JavaScript重新启用了该输入(例如，通过< f:ajax> )，则JSF将作为保护措施的一部分针对被黑的请求仍然拒绝提交的值.另请参见如何在JavaScript中禁用/启用JSF输入字段?

Otherwise, if the input were initially disabled, and you re-enabled it using JavaScript without notifying JSF about this (via e.g. <f:ajax>), then JSF would as part of safeguard against hacked requests still deny the submitted value. See also How to disable/enable JSF input field in JavaScript?

与具体问题无关，您似乎想使用< ui:repeat> 呈现HTML < table> .您是否考虑过改用< h:dataTable> ?它应该减少一些HTML样板.而且，在那个旧的Mojarra版本中，它具有更强大的状态保存功能，而众所周知< ui:repeat> 在带有Ajax内容的复杂视图中到处都是错误.

Unrelated to the concrete problem, you appear to want to render a HTML <table> using <ui:repeat>. Have you considered using <h:dataTable> instead? It should reduce some HTML boilerplate. And, in that old Mojarra version, it has much more robust state saving while <ui:repeat> is known to have bugs here and there in complex views with ajax stuff.

这篇关于JSF在复合组件上的ui:repeat中禁用带有复选框的输入框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！