Ajax 调用从 JSF 页面上的 Bean 中删除值



堆栈溢出的第一次帖子,所以如果我在提问时没有达到预期的标准,请道歉。

我们有一个JSF页面,其中包含一个html表(下面的代码(。该表包含 5 列,需要用户的响应(例如选项列表、数字输入等(。这个想法是用户从列 ID "条件"的选择列表中选择,然后为列 ID "恢复"选择一个选项。如果恢复设置为是,那么我们希望调用 ajax 并启用最后 3 列"恢复日期"、"专业"和"恢复成本"。

但是,我们发现,当用户从"条件"中选择他们的选项,然后在"恢复"中选择是时,最后 3 列将正确启用,但在"条件"中输入的值将被删除并放回 null。

将日志添加到 bean(具有通用的 getter/setter 方法(我可以看到该值最初被设置,但在 ajax 调用后再次将其设置为 null。此外,此值仅在第一次设置为 null,如果在表的同一行或表中的新行上重复相同的步骤,则该值将像我们预期的那样正确保留。

一个有效的 hack 解决方案是向 bean 中的 set 方法添加一个 if 查询,以仅在传递给该方法的字符串不为 null 时才设置值,但是这不是我们想要使用的解决方案,除非它是最后的手段。

任何人都可以提供任何帮助或提供任何理由来解释为什么它会这样做吗?谢谢。

使用 Primefaces 8.0 版,Bean 是会话范围的。

<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://xmlns.jcp.org/jsf/core" xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui" xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
<p:outputPanel id="conditions">
<p>CONDITION AND RESTORATIONS</p>
<p>Condition value key:</p>
<ui:repeat var="con" value="#{sessionDataWrapper.sessionData.classicCarDto.conditions}" varStatus="status">
<br/><h:outputText styleClass="mandatoryText" value="#{con.value} - #{con.name}: #{con.description}"/>
</ui:repeat>
<br/>
<table id="conditionsTable" class="conditionsTable">
<tr>
<th></th>
<th id="conditionHeader" class="tableHeader">CONDITION</th>
<th id="restoredHeader" class="tableHeader">RESTORED</th>
<th id="dateHeader" class="tableHeader">DATE</th>
<th id="professionallyHeader" class="tableHeader">PROFESSIONALLY</th>
<th id="costHeader" class="tableHeader">COST</th>
</tr>
<tbody>
<ui:repeat id="conditionsTableSub" var="c" value="#{dto.components}" varStatus="status">
<tr>
<td class="tableFieldName">#{c.name}</td>
<td>
<p:selectOneMenu class="tableDropdown" id="condition" value="#{c.condition}">
<f:selectItem itemLabel="Select" itemValue=""/>
<f:selectItems value="#{dto.conditions}" var="condition" itemLabel="#{condition.value}" itemValue="#{condition.value}" />
<p:ajax event="change" process="@this" />
</p:selectOneMenu>  
</td>
<td>
<p:selectOneMenu class="tableDropdown" id="restored" value="#{c.restored}">
<f:selectItem itemLabel="Select" itemValue=""/>
<f:selectItem itemLabel="Yes" itemValue="true"/>
<f:selectItem itemLabel="No" itemValue="false"/>
<f:ajax event="change" process="@this" render=":uploadClassicCarForm:conditions"/>
</p:selectOneMenu>
</td>
<td>
<p:datePicker styleClass="smallDate" inputStyleClass="smallDateInput" panelStyleClass="smallDatePanel" readonlyInput="true" id="restoredDate" view="month" value="#{c.restorationDate}" pattern="MMM yyyy" 
hideOnDateTimeSelect="true" yearNavigator="true" yearRange="#{sessionDataWrapper.sessionData.classicCarDto.getYears()}" placeholder="Month, Year" disabled="#{c.restored eq 'false' or c.restored eq null}">
<p:ajax event="dateSelect" process="@this" />
</p:datePicker>
</td>
<td>
<p:selectOneMenu class="tableDropdown" id="professionally" value="#{c.professionallyRestored}" disabled="#{c.restored eq 'false' or c.restored eq null}">
<f:selectItem itemLabel="Select" itemValue=""/>
<f:selectItem itemLabel="Yes" itemValue="true"/>
<f:selectItem itemLabel="No" itemValue="false"/>
<p:ajax event="change" process="@this" />
</p:selectOneMenu>
</td>
<td>
<p:inputNumber class="tableNumber" id="restorationCost" minValue="0" maxValue="999999999" value="#{c.restorationCost}" symbol="£ " emptyValue="focus" decimalPlaces="0" 
placeholder="£ " disabled="#{c.restored eq 'false' or c.restored eq null}">
<p:ajax event="change" />
</p:inputNumber>
</td>
</tr>
</ui:repeat>
</tbody>
</table>
</p:outputPanel>

我注意到你的代码中有这个:

<p:selectOneMenu class="tableDropdown" id="restored" value="#{c.restored}">
<f:selectItem itemLabel="Select" itemValue=""/>
<f:selectItem itemLabel="Yes" itemValue="true"/>
<f:selectItem itemLabel="No" itemValue="false"/>
<f:ajax event="change" process="@this" render=":uploadClassicCarForm:conditions"/>
</p:selectOneMenu>

<f:ajax event="change" process="@this" render=":uploadClassicCarForm:conditions"/>

在几个方面存在"错误"。

  1. 最好在PrimeFaces组件中使用p:ajax
  2. 属性是p:ajax和 f:ajax 的混合
    • f:ajax:没有process属性,而是execute
    • p:ajax:没有render属性,而是update

所以这似乎是一种混合。不确定它是否是(部分(原因,但错误永远不会少

最新更新