javascript - 使用 jsf 2.0 ajax 库调用方法

Question

我正在开发一个应用程序，用户将在其中评估一件艺术品并在评估过程中填写评论表。他们可能会在表单上花费大量时间，所以我想为用户自动保存一次，比如每 5 分钟一次。我希望我可以使用 javascript 并设置一个 5 分钟的计时器，然后让它基本上通过 ajax 执行整个表单，我可以将数据保存到数据库以防用户断开连接等。不幸的是我似乎无法找到任何方式来做到这一点。使用数据更新模型不是问题，但我无法弄清楚如何让它调用该方法(类似于提交时操作通常的方式)。我不想或不需要它重新渲染任何东西，让我调用一个方法来保存数据。我怎样才能做到这一点？

实现解决方案的问题

我尝试实现隐藏命令链接的解决方案，但出现了一些非常奇怪的行为。我不确定是什么原因造成的。首先，一些实现背景。 Form #1 创建一个 bean(无作用域)并将其放入 flash，然后重定向到 Form #2。表格 #2 是我正在写的大表格，我想在其中实现自动保存。表单 #2 有一个 ViewScoped bean。在这个 bean 的 PostConstruct 中，它从 flash 中检索值，并填充属性字段。到目前为止，一切都很好。这在没有 javascript 的情况下工作得很好。我可以按命令按钮提交表单，一切正常。但是，当我引入 javascript 时，当它执行时，我从应该由 PostConstruct 从闪存中填充的变量中得到一个空指针异常。这个javascript如何干扰它？一旦我用对象填充了 View 作用域 bean 的属性，它是否从 flash 作用域中删除应该无关紧要，对吧？仅供引用，如果我只删除 javascript 代码并保留其他所有内容，当我按下按钮提交时它会恢复正常工作。

表格 #1

    <h:form>
    ... bunch of form objects ...
    <h:commandButton "Start New" action="#{someRequestScopedBean.someMethod"/>
    </h:form>

someRequestScopedBean.Method 的代码:

    public String someMethod() {
        // bunch of logic here
        FacesContext.getCurrentInstance()
            .getExternalContext()
                .getFlash()
                    .put("myFlashObj", myFlashObj);
        return "form2?faces-redirect=true";
    }

查看表单 2 中使用的作用域 bean:

    @ManagedBean
    @ViewScoped
    public class someViewScopedBean { 
        //bunch of properties here 

        @PostConstruct
        public void initialize() {
            this.myObject = (MyObject) FacesContext.getCurrentInstance()
                           .getExternalContext()
                           .getFlash()
                           .get("myFlashObject");
        public void saveDraft() { 
            // save to database
        }
    }

表格 2 页:

    <h:outputScript library="javax.faces" name="jsf.js"/>
    <h:form id="myForm">

       ... whole bunch of fields here ... 

       ... real button for user to submit ... 
       <h:commandButton value="Submit myForm" 
                        action="#{someViewScopedBean.save}" />

       ... hidden button for auto-save by javascript ... 
       <h:commandLink id="hiddenSaveDraft" style="display: none;" 
                      action="#{someViewScopedBean.saveDraft}" >
              <f:ajax execute="@form" />
       </h:commandLink> 

       <script>
           function saveDraft() {
                document.getElementById('qForm:hiddenSaveDraft').onclick();
                window.setTimeout('saveDraft()',15000);
           }
           saveDraft();
       </script>

    </h:form>

Answer 1

因为你写下了Javascript作为您的标签之一，我假设您合并了客户端 Javascript在您的应用中编写代码。

首先使用一个隐藏的<h:commandButton/>或隐藏的 < h:inputText/> (我在需要保存有关某个变量的一些信息的情况下使用后者)

在您提交的表单中添加以下内容之一:

<h:commandButton style="display:none" id="clickme">
  <f:ajax execute="@form">
</h:commandButton>

<h:inputText style="display:none" id="changeme">
  <f:ajax execute="@form">
</h:inputText>

在你的Javascript代码 添加此代码以单击或更改:

setInterval(function() { 
  document.getElementById("clickme").onclick();

}, 3000); // update every 3 seconds

setInterval(function() { 
  document.getElementById("changeme").onchange();
}, 3000); // update every 3 seconds

两者都可以正常工作。只需确保它们在您要更新的表单内即可。