ajax - 第二次提交时，TinyMCE 在 bean 中的值(使用 jsf.ajax.addOnEvent)

Question

我已经建立了一个基本的测试用例，在其中我经历了一些(对我来说)奇怪的行为。使用下面的设置时，编辑器中键入的值仅在第二次提交时由 h:outputText 可见。例如

• 将编辑器中的值更改为“myvalue”
• 发送 Ajax 请求
• h:outputText 显示“test”(bean 的默认值)
• 将编辑器中的值更改为“另一个值”
• 发送 Ajax 请求
• h:outputText 显示“myvalue”
• 发送 Ajax 请求
• h:outputText 显示“另一个值”

注意:有一个自定义组合，如果需要请索取代码(它只是为 TinyMCE 创建文本区域并从下面加载 .js 文件)

index.xhtml

<h:body>
    <h:form>
        <mh:editor id="tinymceEditor" 
                   value="#{bean.value}" />
        <h:commandButton value="Ajax">
            <f:ajax execute="tinymceEditor" 
                    render="show" />
        </h:commandButton>
        <h:outputText id="show" value="#{bean.value}" />
    </h:form>
</h:body>

jsfhandler.js -> 包含在自定义复合 mh:editor 的 header 中

jsf.ajax.addOnEvent(function(data) {
    switch(data.status) {
        case "begin":
            tinyMCE.execCommand('mceRemoveControl',true,"tinymceEditor");
            tinyMCE.triggerSave();
            break;

        case "complete":
            tinyMCE.execCommand('mceAddControl',true,"tinymceEditor");
            break;

        case "success":            
            break;
    }
});

Bean.java

@Named
@RequestScoped
public class Bean {
    private String value = "test";
}

Answer 1

JSF ajax begin 事件来得太晚，无法考虑表单数据的更改。 ajax 请求已根据此事件之前的表单数据准备好。

实际上，顺序如下:

• 用户输入内容(并离开字段)。
• 在输入字段上触发 HTML DOM“更改”事件。
• 用户点击提交按钮。
• 提交按钮上触发 HTML DOM“点击”事件。
• JSF 准备 ajax 请求。
• JSF ajax“开始”事件在 ajax 请求时触发。
• JSF 发送 ajax 请求。
• ...

基本上，您应该在 HTML DOM“点击”事件期间执行 tinyMCE.triggerSave()。

<h:commandButton ... onclick="tinyMCE.triggerSave()">

或者，更好的是，在tinyMCE文本区域的HTML DOM“更改”事件期间。