Question

我有一个带有tabView的jsf / primefaces页面，它不能像我期望的那样工作。

如果我在选项卡1上进行选择，然后移动到选项卡2并保存，它可以正常工作。如果我停留在选项卡2上并再次保存，则会在第一个选项卡上显示所需字段所需的消息。

如果我返回第一个标签，它将被填写，应该是。如果我现在再次按“保存”，则在第一个选项卡上再次运行。

为什么jsf / primefaces认为此字段未填写？

页：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui">
  <h:head />
  <h:body>

    <div style="height: 50px;">
      <p:messages id="messages" autoUpdate="true" showDetail="true" closable="true" />
    </div>

    <h:form id="form">

      <p:tabView id="tabs" dynamic="true">

        <p:tab id="tab1" title="Tab 1">
          <h:outputLabel value="Field 1" />
          <h:selectOneMenu required="true" requiredMessage="Must fill in field 1 selection">
              <f:selectItem itemLabel="Select..." itemValue="" noSelectionOption="true" />
              <f:selectItem itemLabel="1" itemValue="1" />
          </h:selectOneMenu>
          <br/>
        </p:tab>

        <p:tab id="tab2" title="Tab 2">
          <h:outputLabel value="Field 2" />
          <p:inputText required="false" />
          <br/>
        </p:tab>

      </p:tabView>

      <p:commandButton value="Save" ajax="true" action="#{tabBean.action}" update="form"
          oncomplete="setTimeout(function(){$('[id$=messages]').fadeOut()},'500')" />

    </h:form>
  </h:body>
</html>

豆：

@ViewScoped
@ManagedBean(name = "tabBean")
public class TabBean implements Serializable {

    private static final long serialVersionUID = 1L;

    public TabBean() { }

    @PostConstruct
    public void init(){ }

    public void action() {
        // do the save, if validation doesn't fail first
        addJsfMessage(FacesMessage.SEVERITY_INFO, "OK", "no prob");
    }

    private void addJsfMessage(Severity severity, String summary, String detail) {
        FacesMessage msg = new FacesMessage(severity, summary, detail);
        FacesContext.getCurrentInstance().addMessage(null, msg);
    }
}

在创建此示例时，我发现以下任一更改都消除了错误，但两者都不可取：

关闭动态加载（primefaces文档说in dynamic mode, only the active tab contents are rendered and when an inactive tab header is selected, content is loaded with ajax，我假设在第一次加载时 ，但它似乎不只是隐藏已经加载的标签，而是渲染它们在所有）

将<h:selectOneMenu ... />替换为：<h:inputText required="true" requiredMessage="Must fill in field 1 text" />

Answer 1

由<p:tabView dynamic="true">和<p:commandButton update="form">的组合引起。

当（重新）渲染时，动态tabview仅包含当前活动的选项卡，而不包含其他选项卡。只有在更改选项卡时，它才会异步加载到HTML DOM树中。现在，您将继续提交更新整个表单，包括动态tabview，因此只需重新加载当前活动的选项卡即可重新呈现。在您的特定情况下，第一个选项卡根本不存在于HTML DOM树中，因此无法将任何内容发送到服务器端。

尝试在<p:commandButton update>中更加具体。指定仅真正需要更新的组件，而不是指定动态tabview的整个表单。

p：tabView中的必填字段

1 个答案: