当前位置: 首页 > 知识库问答 >
问题:

6.2 TabView onTabChange表单数据为空

虞安康
2023-03-14

我不确定我是否犯了一个愚蠢的错误,但这在一个非常简单的情况下对我不起作用:当我从一个选项卡切换到另一个选项卡时,我想保存在表单中输入的数据。提交按钮在每个选项卡上都可以正常工作,但是选项卡更改事件显示我的所有表单数据为空。我已经尝试了所有、形式、这个过程,似乎没有任何效果。更新选项也是如此。

下面是XHTML:

    <h:form id="form">
    <p:growl id="msgs" showDetail="true" keepAlive="5000"  />
    <p:tabView id="tView" dynamic="true" cache="false" >
        <p:ajax event="tabChange" listener="#{deleteMe.onTabChange}" update=":form:msgs" />
        <p:tab title="MyTitle I" id="tab1">
            <p:fieldset legend="Personal Information" toggleable="false" >
                <h:panelGrid columns="2" cellpadding="10"> 
                    Value 1: <p:inputText value="#{deleteMe.thingOne}"></p:inputText>
                    Value 2: <p:inputText value="#{deleteMe.thingTwo}"></p:inputText>
                    <p:commandButton value="Submit" id="ajax" update=":form:msgs" action="#{deleteMe.onSubmit}" />
                </h:panelGrid>
            </p:fieldset>
        </p:tab>
        <p:tab title="MyTitle II" id="tab2">
            <p:fieldset legend="Social Information" toggleable="false">
                <h:panelGrid columns="2" cellpadding="10">
                    <p:inputText value="#{deleteMe.thingThree}"></p:inputText>
                    <p:commandButton value="Submit" id="ajax2" update=":form:msgs" action="#{deleteMe.onSubmit}" />
                </h:panelGrid>
          </p:fieldset>  
        </p:tab>
    </p:tabView>
</h:form>   

这是我的后盾:

'

import javax.annotation.PostConstruct;
import javax.inject.Named;

import org.primefaces.event.TabChangeEvent;
import org.springframework.context.annotation.Scope;


@Named(value = "deleteMe")
@Scope("view")
public class DeleteBean implements Serializable {
    private static final long serialVersionUID = 47L;

    private String thingOne;
    private String thingTwo;
    private String thingThree;

    @PostConstruct
    public void initialize() {

    }   

    public void onTabChange(TabChangeEvent event) {
        System.out.println("Saving draft, current index: "+ event.getTab().getTitle());
        System.out.println(thingOne);
        System.out.println(thingTwo);
        saveDraft();
    }

    public void onSubmit() {
        System.out.println(thingOne);
        System.out.println(thingTwo);
        System.out.println(thingThree);
        saveDraft();
    }

    public void saveDraft() {
        System.out.println("This is thing 1 value: "+thingOne);
        System.out.println("This is thing 2 value: "+thingTwo);
        System.out.println("This is thing 2 value: "+thingThree);
    }


    public String getThingOne() {
        return thingOne;
    }

    public void setThingOne(String thingOne) {
        this.thingOne = thingOne;
    }

    public String getThingTwo() {
        return thingTwo;
    }

    public void setThingTwo(String thingTwo) {
        this.thingTwo = thingTwo;
    }

    public String getThingThree() {
        return thingThree;
    }

    public void setThingThree(String thingThree) {
        this.thingThree = thingThree;
    }
}

'

在tabchange事件上,它会触发该方法,但值都为null。

SystemOut     O This is thing 1 value: null
SystemOut     O This is thing 2 value: null
SystemOut     O This is thing 2 value: null

如果我犯了一些愚蠢的错误,你能指出吗?非常感谢。

共有3个答案

洪鸿博
2023-03-14

看到了一个解决方案,但我不确定为什么它会这样:

我不得不在tabView上添加带有tabchange监听器的远程命令。

<p:remoteCommand name="onTabChangeProcess" process="tView, @this"/> 
    <p:tabView activeIndex="#{deleteMe.activeIndex}" id="tView" onTabChange="onTabChangeProcess()">
            <p:ajax event="tabChange" listener="#{deleteMe.onTabChange}" update="tView" process="tView"/>

这使得表单按预期工作。

鄢英毅
2023-03-14

我也有同样的问题。在不提交而更改选项卡时,由于不更新输入文本字段,数据将丢失。您可以为输入文本字段添加ajax。

   <p:inputText id="thingOneId" value="#{deleteMe.thingOne}">
      <p:ajax update="thingOneId"/>
   </p:inputText>

"真"

适用于不丢失数据,但不会更新输入字段中的值。

庄萧迟
2023-03-14

正确的答案是在p: ajax命令上使用skipCRC="false"。

https://github.com/primefaces/primefaces/issues/2525

 <p:ajax event="tabChange" 
         skipChildren="false"
         listener="#{deleteMe.onTabChange}" 
         update=":form:msgs" />
 类似资料:
  • Framework7 有一些方法可以让读取和填写表单数据变得非常方便: Form 转化成 JSON 使用 app 对应的方法可以非常方便把所有的表单元素转化成一个 JSON 对象: myApp.formToJSON(form) - 把表单转换成JSON对象 form - HTML元素 or 字符串 (CSS选择器) 返回一个JSON对象 <form id="my-form" class="list

  • 你好,我目前正在尝试在一个Android基础应用程序中显示一个表格。然而,我的问题是关于: 这部分代码出错: foreach语句不能对“AsyncTableQuery”类型的变量进行操作 我已经查看了数据库。Inventory Class,它被设置为public Class,并且所有元素都与SQLite数据库(Type 3)表完全相同。 老实说,我真的不知道出了什么问题。 连接数据库.db3没有问

  • 很多情况下,需要传递一些信息,从浏览器到 Web 服务器,最终到后台程序。浏览器使用两种方法可将这些信息传递到 Web 服务器,分别为 GET 方法和 POST 方法。 GET 方法 GET 方法向页面请求发送已编码的用户信息。页面和已编码的信息中间用 ? 字符分隔,如下所示: http://www.test.com/hello?key1=value1&key2=value2 GET 方法是默

  • 我正在尝试从接收包含3个参数的多部分请求: 一个 一个 我在控制器中接收到和fine,但json的所有字段都为NULL。会有什么问题吗? JSON 控制器 邮差

  • 问题内容: 有人可以告诉我推荐的(最新的)方式来快速获取POST表单数据。 如此多的教程/帖子等都谈论bodyParser,但Express不再捆绑它,其他博客等建议直接使用urlencoded,但现在也不可用。 我一直在努力寻找有关这些框架或技术的准确信息。 顺便说一句,我很感兴趣的是非常简单的小型数据 问题答案: 您应该通过安装。现在,它作为一个单独的中间件来了。 之后,在您的app.js中添

  • 2.1. 表单与数据 在典型的PHP应用开发中,大多数的逻辑涉及数据处理任务,例如确认用户是否成功登录,在购物车中加入商品及处理信用卡交易。 数据可能有无数的来源,做为一个有安全意识的开发者,你需要简单可靠地区分两类数据:   l已过滤数据 l被污染数据   所有你自己设定的数据可信数据,可以认为是已过滤数据。一个你自己设定的数据是任何的硬编码数据,例如下面的email地址数据:   $email